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

Question

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

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

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

在创建新网格之前，我还会删除每个放大/缩小之前放置的任何网格。

这是一个动态网格的概念，它极大地提高了性能，因为拥有一个非常大的静态网格会对性能产生巨大的影响。因此网格仅覆盖当前可查看的屏幕区域。

问题是网格在它们之间没有相对定位。

放大到鼠标位置，因此它改变了
paper.view.bounds目的。不幸的是，Grid-Drawing 函数也使用该对象来绘制网格，因此网格不是相对于彼此定位的。

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

有任何想法吗？

Answer 1

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

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

所以yPos/xPos现在有一个 correctedBoundingRectLeft和一个 correctedBoundingRectTop从中得出他们的计算

编码:

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);

还有一个 Paper Sketch for the above