Question

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

{
  "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

Answer 1

我不是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 - 原因是如果你有{{1}的东西当你调整网格大小时它会保留在那个角落 - 如果你的坐标从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));

放大网格坐标？

1 个答案: