我需要一些数学建议…或者,至少我认为我知道。
我有一组元素在我的数据库中表示对象(如物理对象)的位置(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>