放大网格坐标

Enlarge grid coordinates?

本文关键字：坐标 网格 放大      更新时间：2023-09-26

我有一个坐标列表，用来定义不同大小元素的网格。每个元素从左上角开始定位，给出起始列、起始行及其宽度和高度。

{
  "col": 1,
  "row": 1,
  "size_x": 3,
  "size_y": 2
},
{
  "col": 4,
  "row": 1,
  "size_x": 3,
  "size_y": 2
},
{
  "col": 1,
  "row": 3,
  "size_x": 3,
  "size_y": 2
},
{
  "col": 4,
  "row": 3,
  "size_x": 3,
  "size_y": 2
},
{
  "col": 1,
  "row": 5,
  "size_x": 3,
  "size_y": 2
},
{
  "col": 4,
  "row": 5,
  "size_x": 3,
  "size_y": 2
}

这组坐标是在6列网格上定义的。

现在网格有12列（每行是前面的一半），所以我需要将size_x和size_y乘以2。

但这还不够，我还需要更新col和row坐标，以防止冲突，并实现旧的6列网格的相同布局。

这是我准备的脚本，它将size_x和size_y放大了2，并以某种方式修复了col。。。但我找不到一种方法来完成它并使它变得可靠。http://codepen.io/FezVrasta/pen/qbrYGv?editors=001

一旦应用到UI，布局应该是这样的：

[---][---]
[---][---]
[---][---]
- = 1 col
[ = 2 rows

我不是100%清楚这个问题，但我认为你希望六列网格发展成12列网格，并使用一些基本的数学方法，这很容易。在谈到定位时，我已经将一些变量重命名为我觉得可以轻松处理的变量，但以下记录了12列宽的网格，它将与您传递的任何网格一起工作，这些网格是结构化的对象数组（希望只包含数字）。

更新我纠正了脚本中的一些愚蠢错误，并更改了输出和输入，以便您可以直接在代码段中看到它们。希望它能有所帮助！

var grid = [
  { x: 1, y: 1, w: 3, h: 2 },
  { x: 4, y: 1, w: 3, h: 2 },
  { x: 1, y: 3, w: 3, h: 2 },
  { x: 4, y: 3, w: 3, h: 2 },
  { x: 1, y: 5, w: 3, h: 2 },
  { x: 4, y: 5, w: 3, h: 2 }
];
document.getElementById('input').textContent = JSON.stringify(grid);
function resizeGrid(grid, from, to){
  // Loop through the grid
  for(var i = 0; i < grid.length; i++)
     // Loop through the values of the grid
     for(var key in grid[i]) 
       // This is a safety check to not enumerate inherited properties
       // not necessary, but I find it safer when doing for..in loops
       if(grid[i].hasOwnProperty(key))
         // Simply divide the value by the original and 
         // multiply by the desired output
         grid[i][key] = grid[i][key] / from * to
  return grid;
}
document.getElementById('output').textContent = JSON.stringify(resizeGrid(grid, 6, 12));
<div id="input"></div>
<div id="output"></div>

我也不能100%确定你是如何设置网格的，但最好将你最左上角的坐标保持为0——原因是如果你在0, 0有东西，当你调整网格大小时，它会留在那个角落——如果你的坐标从1开始，这会变得更复杂，因为1,1现在会变成2,2，尽管它不应该改变。始终从0开始计数！

为了解决这个1,1问题，你可以简单地替换这行：

grid[i][key] = grid[i][key] / from * to;

这行：

grid[i][key] = grid[i][key] === 1
    ? 1
    : grid[i][key] / from * to;

这里有一个实现：

var grid = [
  { x: 1, y: 1, w: 3, h: 2 },
  { x: 4, y: 1, w: 3, h: 2 }
];
document.getElementById('input').textContent = JSON.stringify(grid);
function resizeGrid(grid, from, to){
  // Loop through the grid
  for(var i = 0; i < grid.length; i++)
     for(var key in grid[i]) 
       if(grid[i].hasOwnProperty(key))
         switch(key){
           case 'w': case 'h': grid[i][key] = grid[i][key] / from * to; break;
           case 'x': case 'y': grid[i][key] = (grid[i][key] - 1) / from * to + 1; break;
         }
  return grid;
}
document.getElementById('output').textContent = JSON.stringify(resizeGrid(grid, 6, 12));
<div id="input"></div>
<div id="output"></div>

相关文章：