在固定的地图大小和动态对象位置上计算比例因子


Calculate scale factor on fixed map size and dynamic object positions

我需要一些数学建议…或者,至少我认为我知道。

我有一组元素在我的数据库中表示对象(如物理对象)的位置(x,y,z)。这些位置可以是完全随机的,例如对象A的位置为1532、3512、1500,而对象B的位置为2421、4612、1234。

我试图创建一个图形地图(使用CSS)的对象在2D。所以只使用了X和Y轴。我要绘制的地图有特定的宽度和高度。现在是棘手的部分:我希望地图与地图的大小成比例。比如,有两个对象,一个在坐标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。我进入一个for循环,做如下操作:

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

地图大小为720x480像素。我如何创建一个公式,在地图上展开我的对象。重要的是,物体不能超出地图边界,但也需要分散开来。例如,如果两个对象的位置分别为1,1和1,2,则它们需要位于左上角和左下角。

有谁能帮我一下吗?

任何帮助和建议感谢!

试试这个,但要注意,这只是我想到的一个非常快速和肮脏的原始草图。但也许它足以给你一个跳跃的开始:

<?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>