創建一個網格，得到的重繪每個縮放級別

我試圖創建一個從每縮放/平移水平重繪，使其只覆蓋當前可視屏幕區域的網格。創建一個網格，得到的重繪每個縮放級別

網格和滾動縮放到鼠標位置是如何工作的：

每個zoomIn或縮小（ZoomOut）繪製基於當前可視區域網格（使用paper.view.bounds作爲論據從哪裏開始繪製需要電網和多少個單元）
我創建一個新的前柵格也刪除每個zoomIn /任何以前放置的網格。

這是一個動態網格的概念，它極大地提高了性能，因爲有一個非常大的靜態網格有巨大的性能影響。因此網格只覆蓋當前可查看的屏幕區域。

的問題是，網格是不是相對放置在它們之間。

變焦舍入上的鼠標位置，從而它改變了 paper.view.bounds對象。不幸的是，網格繪圖功能也使用該對象來繪製網格，因此網格並不相對於彼此定位。
如果我畫上的縮放級別1矩形，然後我放大/縮小矩形不再與網格對齊，因爲電網在與前格柵相對位置不正確放置。

任何想法？

來源

2014-05-08 Nicholas Kyriakides

+1 paperjs問題上的SO。希望很多人都會效仿這個例子。 –

雖然Alex的答案可能是比較正確的，

我想通了這個解決方案，我在XPOS/yPos那肯定會對應一個網格線佈局創建網格。

所以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

來源

2014-05-09 20:36:51

它看起來像你的drawGrid()功能將始終從點（0,0）開始。相反，你應該通過一個點作爲一個參數，將網格偏移適當的量。

來源

2014-05-08 20:31:03

我已經修改了這個問題，使其更加清晰幷包含JSFiddle。如果你所說的話仍然適用，我將如何去抵消電網？ –

創建一個網格，得到的重繪每個縮放級別

回答

相關問題