在网格中绘制位置

Question

我有一个动态网格和每个人的 x 和 y 分数列表 - 只有这些，我如何确定将每个人放在哪个“框”中？

由于网格是动态的，我试图弄清楚如何使用数组来避免硬编码 - 我目前正在循环遍历所有人并将它们添加到包含 x 和 y 的数组中（我可以重做这个如果它更容易）。有了这些值，我怎样才能遍历网格并选择每个框中的人？我怀疑我想得太多了，但我就是无法让它发挥作用。

例如，假设网格是 7 x 5

Array ( ["Bob"] => Array ( ["x"] => 3 ["y"] => 4 )
Array ( ["Fred"] => Array ( ["x"] => 4 ["y"] => 2 )
Array ( ["Tom"] => Array ( ["x"] => 1 ["y"] => 5 )
Array ( ["Joan"] => Array ( ["2"] => 3 ["y"] => 3 )

如果网格是从左下角开始编号的：

29 30 31 32 33 34 35
22 23 24 25 26 27 28
15 16 17 18 19 20 21
8  9  10 11 12 13 14
1  2  3  4  5  6  7

那么鲍勃应该在 24 岁，弗雷德在 11 岁，汤姆在 29 岁，琼在 17 岁等等

如何运行循环以将每个人放置在正确的位置？

到目前为止我已经尝试过：

$xEach=100/$xMax/100;

$xArray=array();
for ($i=$xEach; $i<100; $i=$i+$xEach) {
    $xArray[]=$i;
}

$yEach=100/$yMax/100;

$yArray=array();
for ($i=$yEach; $i<100; $i=$i+$yEach) {
    $yArray[]=$i;
}


$x=array();
$y=array();

<loop through people>

    $originalValue=$res['value'];
    $axis=res['axis'];
    $name=$res['name'];

    if ($axis=="x") {
        $newValue=$originalValue/$xMax;
        $hit=0;
        foreach ($xArray as $value) {
            if ($newValue<$value&&$hit==0) {
                $hit++;
                $x["$originalValue"][]=$name;
            }
        }

    } else {
        $type="y";
        $newValue=$originalValue/$yMax;
        $hit=0;
        foreach ($yArray as $value) {
            if ($newValue<$value&&$hit==0) {
                $hit++;
                $y["$originalValue"][]=$name;
            }
        }
    }
</loop>

<div class="customgridwrapper">
    <?php 
        $box=0;
        for ($yLoop=$yMax; $yLoop>=$yMin; $yLoop--) { ?>
        <?php for ($xLoop=$xMin; $xLoop<=$xMax; $xLoop++) {
            $box++;
            ?>
            <div class="griditem">      
                <span><?=$box?></span>
            </div>
        <?php } ?>
    <?php } ?>
</div>

Answer 1

我认为你把问题复杂化了。因此，为了更容易理解，请将其分解为单独的部分。

创建网格

所以第一个任务是创建网格。这可以很容易地用嵌套的 PHP 数组来表示。但是，要记住的一件事是您希望网格从左下角开始，而为简单起见，我们将从左上角开始构建网格。不过不用担心，我们可以在渲染输出时轻松解决这个问题。

以下函数将创建一个具有指定数量$columns 和$rows 的网格，并相应地初始化单元格$value。

function createGrid($columns, $rows)
{
    $grid = [];
    $value = 1;

    for ($r = 0; $r < $rows; $r++) {
        $row = [];

        for ($c = 0; $c < $columns; $c++) {
            $row[] = $value++;
        }

        $grid[] = $row;
    }

    return $grid;
} 

绘制值

您的值基于从1, 1 开始的笛卡尔坐标。我们的网格，因为它基于 PHP 数组，实际上是零索引的，所以从 0, 0 开始。因此，在网格上绘制值时，我们需要将$x 和$y 的值减一以相应地映射它们。

$values = [
    'bob' => [3, 4],
    'fred' => [4, 2],
    'tom' => [1, 5],
    'joan' => [3, 3],
];

function plotGridValues($grid, $values)
{
    foreach ($values as $value => $coordinates) {
        list($x, $y) = $coordinates;
        $grid[$y - 1][$x - 1] = $value;
    }

    return $grid;
}

渲染网格

我们之前提到过，您希望从左下角渲染网格，而我们已经创建它从左上角开始。在渲染之前，我们需要解决这个问题，使用array_reverse可以轻松实现。

我讨厌以这种方式混合 PHP 和 HTML，但为了简单起见，我在 <table> 中使用了 echod。

function renderGrid($grid) 
{
    $grid = array_reverse($grid);

    echo "<table>\r\n";

    foreach ($grid as $row) {
        echo '<tr>';

        foreach ($row as $cell) {
            echo "<td>{$cell}</td>";
        }

        echo "</tr>\r\n";
    }

    echo '</table>';
}

完整代码

去狂野！

<?php

$values = [
    'bob' => [3, 4],
    'fred' => [4, 2],
    'tom' => [1, 5],
    'joan' => [3, 3],
];

$grid = createGrid(7, 5);
$grid = plotGridValues($grid, $values);
echo renderGrid($grid);

function createGrid($columns, $rows)
{
    $grid = [];
    $cell = 1;

    for ($r = 0; $r < $rows; $r++) {
        $row = [];

        for ($c = 0; $c < $columns; $c++) {
            $row[] = $cell++;
        }

        $grid[] = $row;
    }

    return $grid;
}

function plotGridValues($grid, $values)
{
    foreach ($values as $value => $coordinates) {
        list($x, $y) = $coordinates;
        $grid[$y - 1][$x - 1] = $value;
    }

    return $grid;
}

function renderGrid($grid) 
{
    $grid = array_reverse($grid);

    echo "<table>\r\n";

    foreach ($grid as $row) {
        echo '<tr>';

        foreach ($row as $cell) {
            echo "<td>{$cell}</td>";
        }

        echo "</tr>\r\n";
    }

    echo '</table>';
}