创建一个在每个缩放级别上重绘的网格

Question

我正在尝试创建一个在每个缩放/平移级别上重绘的网格,以便它仅覆盖当前可查看的屏幕区域.

网格和滚动缩放到鼠标位置的工作方式:

• 每个zoomIn或zoomOut根据当前可视区域绘制网格(使用paper.view.bounds作为开始绘制网格的位置以及需要多少个单元格的参数)

• 在创建新网格之前,我还会在每个zoomIn/Out上删除任何先前放置的网格.

这是一个动态网格的概念,它大大提高了性能,因为具有非常大的静态网格具有巨大的性能影响.因此,网格仅覆盖当前可见的屏幕区域.

问题是网格之间没有相对的位置.

• 缩放在鼠标位置上,因此它改变了 paper.view.bounds对象.遗憾的是,网格绘图功能也使用该对象绘制网格,因此网格不是相对于彼此定位的.

• 如果我在缩放级别1上绘制一个矩形,然后我放大/缩小矩形不再与网格对齐,因为网格与前一个网格位于相对错误的位置.

有任何想法吗？

Answer 1

虽然亚历克斯的答案可能更正确，

我已经找到了这个解决方案，我在 xPos/yPos 处创建网格，这肯定对应于 gridLine 放置。

现在yPos/xPos有 acorrectedBoundingRectLeft和 acorrectedBoundingRectTop来进行计算

代码：

var drawGrid = function(boundingRect, cellSize) {
  var vCellsNum = boundingRect.height / cellSize;
  var hCellsNum = boundingRect.width / cellSize;

  for (var i = 0; i <= hCellsNum; i++) {
    var offsetXPos = Math.ceil(boundingRect.left / cellSize) * cellSize;
    var xPos = offsetXPos + i * cellSize;
    var topPoint = new paper.Point(xPos, boundingRect.top);
    var bottomPoint = new paper.Point(xPos, boundingRect.bottom);
    var line = new paper.Path.Line(topPoint, bottomPoint);

    line.strokeColor = '#968d8d';
  }

  for (var i = 0; i <= vCellsNum; i++) {
    var offsetYPos = Math.ceil(boundingRect.top / cellSize) * cellSize;
    var yPos = offsetYPos + i * cellSize;
    var leftPoint = new paper.Point(boundingRect.left, yPos);
    var rightPoint = new paper.Point(boundingRect.right, yPos);
    var line = new paper.Path.Line(leftPoint, rightPoint);

    line.strokeColor = '#968d8d';
  }
}

// where `30` is the cell width/height in px
drawGrid(paper.view.bounds, 30);

以及上述内容的纸质草图