Creazione di una griglia che viene ridisegnata a ogni livello di zoom

Question

Sto provando a creare una griglia che viene ridisegnata su ogni livello di zoom/panoramica in modo che copra solo l'area dello schermo attualmente visibile.

Come le griglie e scroll-zoom-to-topo-posizione di lavoro:

• Ogni zoomIn o zoomOut disegna una griglia sulla base della superficie attualmente visualizzabile (utilizzando paper.view.bounds come argomento per dove cominciare disegno la griglia e il numero di celle necessarie)

• Eliminare anche qualsiasi griglia precedentemente inserita su ogni zoomIn/Out prima di creare una nuova griglia.

è un concetto di rete dinamico che migliora notevolmente le prestazioni in quanto avente una grande rete statico ha un enorme calo di prestazioni. Pertanto la griglia copre solo l'area dello schermo attualmente visibile.

Il problema è che le griglie sono non relativamente posizionate tra di loro.

• Le case-in zoom sulla posizione del mouse quindi cambia l'oggetto paper.view.bounds. Sfortunatamente la funzione Disegno a griglia usa anche quell'oggetto per disegnare la griglia, quindi le griglie non sono posizionate l'una rispetto all'altra.

• Se posso disegnare un rettangolo sul livello di zoom 1 e poi mi zoom in/out della rettangolo non è più allineata alla rete, dal momento che la griglia è stata posta in una posizione relativamente sbagliato con la rete precedente.

Qualche idea?

Answer 1

Anche se la risposta di Alex potrebbe essere più corretto,

ho capito questa soluzione in cui creo la rete ad un xpos/yPos che sicuramente corrispondere a un collocamento griglia.

Così yPos/xPos hanno ora un correctedBoundingRectLeft e un correctedBoundingRectTop per disegnare i loro calcoli da

Il codice:

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

E un Paper Sketch for the above

Answer 2

Sembra che la funzione drawGrid() inizi sempre dal punto (0,0). Invece, si dovrebbe passare un punto come argomento che compensa la griglia della quantità appropriata.