Вычислить масштабный коэффициент при фиксированном размере карты и динамических положениях объектов

ProgramBox

Вычислить масштабный коэффициент при фиксированном размере карты и динамических положениях объектов

Post author:admin
Запись опубликована:17 мая, 2023
Post category:Вопросы по программированию

#php #javascript #css #math #coordinates

#php #javascript #css #математика #координаты

Вопрос:

Мне нужен совет по математике… Или, по крайней мере, я думаю, что делаю.

В моей базе данных есть набор элементов, которые представляют объекты (например, физические объекты) с позицией (x, y, z). Эти позиции могут быть абсолютно случайными, например, объект A имеет позицию 1532,3512,1500, а B имеет позицию 2421,4612,1234.

Я пытаюсь создать графическую карту (используя CSS) объектов в 2D. Таким образом, используются только координаты X и Y. Карта, на которой я хочу рисовать, имеет определенную ширину и высоту. Теперь вот сложная часть: я хочу, чтобы карта масштабировалась в соответствии с размером карты. Например, когда есть 2 объекта, один из которых находится в координатах 1,1, а другой — в координатах 3,3, я хочу, чтобы первый объект находился в верхнем левом углу карты, а другой — в правом нижнем углу.

Итак, вот пример моих элементов (objects):

 database elements:
  - [1] => x: 1254, y: 1642
  - [2] => x: 2311, y: 2361
  - [3] => x: 1732, y: 2351
  - [4] => x: 1436, y: 3323

Сначала я беру минимальное и максимальное значения этих элементов, чтобы создать формулу, которая позволяет координатам начинаться с 0,0 и идти оттуда.

итак, допустим, минимальное значение x в этом примере равно 1254, а Y равно 1642. Я захожу в цикл for и делаю следующее:

 foreach( $this->db as $item )
{
    $x = $this->value_x_max - $item['x'];
    $y = $this->value_y_max - $item['y'];
}

Размер карты составляет 720×480 пикселей. Как мне создать формулу, которая распределяет мои объекты по карте. Важно, чтобы объекты не выходили за границы карты, но также должны быть распределены. Таким образом, если 2 объекта имеют позиции 1,1 и 1,2, например, они должны находиться в верхнем левом и нижнем левом углах.

Кто-нибудь может мне помочь с этим?

Любая помощь и рекомендации приветствуются!

1. Возможно, представляет интерес?: http://www.highcharts.com

2. Я пытаюсь создать не диаграмму, а 2D-карту (просто прямоугольник с квадратами внутри, который представляет объекты).

3. Я бы начал с попытки найти некоторые минимальные / максимальные значения для ваших координат, исходя из них вы можете рассчитать масштабный коэффициент, который, в свою очередь, вы можете применить ко всем координатам при отображении.

4. Да, это то, что я сделал (см. Код в первом сообщении). Но, похоже, я не могу найти правильную формулу для генерации правильного масштабного коэффициента… У меня есть следующие доступные переменные: — minimum-x — maximum-x — minimum-y — maximum-y — mapWidth — mapHeight

Ответ №1:

Попробуйте это, но имейте в виду, это всего лишь очень быстрый и грязный набросок того, что пришло мне в голову. Но, возможно, этого достаточно, чтобы дать вам толчок:

 <?php
$elements = array(
    array('x' => 1254, 'y' => 1642),
    array('x' => 2311, 'y' => 2361),
    array('x' => 1732, 'y' => 2351),
    array('x' => 1436, 'y' => 3323),
);

$mapWidth = 720;
$mapHeight = 480;
$blockWidth = 10;
$blockHeight = 10;

$minimumX = $minimumY = $maximumX = $maximumY = null;
foreach ($elements as $element) {
    if ($minimumX === null || $element['x'] < $minimumX) {
        $minimumX = $element['x'];
    }
    if ($minimumY === null || $element['y'] < $minimumY) {
        $minimumY = $element['y'];
    }
    if ($maximumX === null || $element['x'] > $maximumX) {
        $maximumX = $element['x'];
    }
    if ($maximumY === null || $element['y'] > $maximumY) {
        $maximumY = $element['y'];
    }
}

foreach ($elements as $i => $element) {
    $elements[$i]['x'] -= $minimumX;
    $elements[$i]['y'] -= $minimumY;
}

$fx = ($mapWidth - $blockWidth) / ($maximumX - $minimumX);
$fy = ($mapHeight - $blockHeight) / ($maximumY - $minimumY);
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>2D</title>
        <style type="text/css">
            body {
                background: black;
            }

            #map {
                position: relative;

                margin: 20px auto;

                width: <?php echo $mapWidth; ?>px;
                height: <?php echo $mapHeight; ?>px;

                background: grey;
            }

            .dot {
                position: absolute;

                width: <?php echo $blockWidth; ?>px;
                height: <?php echo $blockHeight; ?>px;

                background: lightblue;
            }
        </style>
    </head>

    <body>
        <div id="map">
            <?php
                foreach ($elements as $element) {
                    printf(
                        '<div class="dot" style="left: %.1fpx; top: %.1fpx;"></div>',
                        $element['x'] * $fx,
                        $element['y'] * $fy
                    );
                }
            ?>
        </div>
    </body>
</html>

1. Похоже, тоже не работает = [ Объекты отображаются в правом нижнем углу и не растекаются.

2. Предполагается, что если вы добавите элемент с очень маленькими координатами, он будет нарисован ближе к верхнему левому углу. Или вы хотите всегда располагать минимальные значения вверху / слева, а максимальные значения внизу / справа?

3. Да, они всегда должны распространяться по углам карты 😉