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

Answer 2

看起来你的drawGrid()函数总是从点（0,0）开始。相反，您应该将一个点作为参数传递，以使网格偏移适当的数量。

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

2 个答案: