PaperJSで単純な2Dグリッド（非インタラクティブ）を描くにはどうすればよいですか？

Question

私はPaperJSで作られたインタラクティブなアプリケーションモックアップを持っていますが、まだ小さな機能はありません。私は2次元グリッドを描画する必要があります（あなたが知っている...表面上で無限に繰り返される線の均一なメッシュ）、画面上でオブジェクトをドラッグするときのユーザーのやりとりのガイドとして使用されます（グリッド自体は完全に静的）。

PaperJSで実装する方法はわかりません。別のスケールで表示されるため、単なる背景画像ではありません。常に目に見えるので、非常に速くレンダリングしたかったのです。

この写真の（a）の例のように、私は描画したいグリッドの種類は、グリッドを中心とする2次元メッシュである：任意の啓発は歓迎され

。

Answer 1

あなたが望むすべての行の場合：あなたは、各矩形は個々の長方形のためのhitTestに別のパスになりたい場合は

var drawGridLines = function(num_rectangles_wide, num_rectangles_tall, boundingRect) { 
    var width_per_rectangle = boundingRect.width/num_rectangles_wide; 
    var height_per_rectangle = boundingRect.height/num_rectangles_tall; 
    for (var i = 0; i <= num_rectangles_wide; i++) { 
     var xPos = boundingRect.left + i * width_per_rectangle; 
     var topPoint = new paper.Point(xPos, boundingRect.top); 
     var bottomPoint = new paper.Point(xPos, boundingRect.bottom); 
     var aLine = new paper.Path.Line(topPoint, bottomPoint); 
     aLine.strokeColor = 'black'; 
    } 
    for (var i = 0; i <= num_rectangles_tall; i++) { 
     var yPos = boundingRect.top + i * height_per_rectangle; 
     var leftPoint = new paper.Point(boundingRect.left, yPos); 
     var rightPoint = new paper.Point(boundingRect.right, yPos); 
     var aLine = new paper.Path.Line(leftPoint, rightPoint); 
     aLine.strokeColor = 'black'; 
    } 
} 

drawGridLines(4, 4, paper.view.bounds); 

：

var drawGridRects = function(num_rectangles_wide, num_rectangles_tall, boundingRect) { 
    var width_per_rectangle = boundingRect.width/num_rectangles_wide; 
    var height_per_rectangle = boundingRect.height/num_rectangles_tall; 
    for (var i = 0; i < num_rectangles_wide; i++) { 
     for (var j = 0; j < num_rectangles_tall; j++) { 
      var aRect = new paper.Path.Rectangle(boundingRect.left + i * width_per_rectangle, boundingRect.top + j * height_per_rectangle, width_per_rectangle, height_per_rectangle); 
      aRect.strokeColor = 'white'; 
      aRect.fillColor = 'black'; 
     } 
    } 
} 

drawGridRects(4, 4, paper.view.bounds);