PaperJSにシンプルな2Dグリッド(インタラクティブではない)を描く方法は?

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

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

私が描きたいグリッドのタイプは、この画像の例(a)のように、2Dメッシュ中心のグリッドです:

2D basic grid types

どんな啓発も大歓迎です。

2
私はこれを単に別のキャンバスを使ってPaperJSのものの下に置くだけで解決できるかもしれません(z-indexはトリックを行います)。ジェームズが提案したようにグリッドをレンダリングします。
追加された 著者 Juho Vepsäläinen,
Paper.jsはベクターグラフィックスを描くためのライブラリであり、特定のグラフィックを描く方法を尋ねているので、これは奇妙な質問のようです。 moveTo、lineTo、moveTo、lineTo、...でパスを作成しようとしましたか?
追加された 著者 James Clark,

1 答え

必要なものがすべて行である場合:

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

個々の矩形に対して、各矩形を個別のhitTestへのパスにする場合は、次のようにします。

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);
3
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript