Рассчитать масштабный коэффициент на фиксированном размере карты и динамических позициях объекта - PullRequest
Новая
       9

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

2 голосов
/ 20 апреля 2011

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

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

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

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

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. Я вхожу в цикл и делаю следующее: 

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 Ответ

0 голосов
/ 20 апреля 2011

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

<?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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...