Question

我需要一些数学建议......或者，至少我认为我做了。

我的数据库中有一组元素，它们表示具有位置（x，y，z）的对象（如物理对象）。这些位置可以是完全随机的，如对象A的位置为1532,3512,1500，B的位置为2421,4612,1234。

我正在尝试在2D中创建对象的图形地图（使用CSS）。所以只使用X和Y坐标。我想要绘制的地图具有特定的宽度和高度。现在这里是棘手的部分：我希望地图可以根据地图的大小进行缩放。就像，当有2个物体，其中一个在coord：1,1和另一个在coord 3,3时，我希望物体1位于地图的左上角，另一个位于右下角。

所以，这是我的元素（对象）的一个例子：

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

首先，我采用这些元素的最小值和最大值来创建一个公式，让coords从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像素。如何创建一个在地图上展开我的对象的公式。重要的是，对象不要超出地图边界，但也需要展开。因此，如果2个对象的位置为1,1和1,2，则它们需要位于左上角和左下角。

任何人都可以帮我解决这个问题吗？

任何帮助和建议appriciated！

Answer 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 个答案: