Як намалювати просту 2D сітку (неінтерактивну) у PaperJS?

У мене є інтерактивне макетування додатків, зроблене за допомогою PaperJS , але воно ще мало функціональності. Мені потрібно намалювати 2D сітці (ви знаєте ..., що однакова сітка ліній, які повторюються нескінченно над поверхнею), вона буде використовуватися як керівництво для взаємодії користувачів при перетягуванні речей по екрану (але сама сітка може бути повністю статичною )

Я просто не знаю, як це зробити в PaperJS. Це не може бути лише фонове зображення, оскільки воно буде представлено в різних масштабах, також я хотів, щоб його було надано дуже швидко, оскільки воно завжди буде видно.

Тип сітки, який я хотів би намалювати, - це сітка 2D сітчастої сітки, як у прикладі (а) цього зображення:

2D basic grid types

Будь-яке просвітлення вітається.

2
Я можу вирішити це просто, скориставшись іншим Canvas і розташувавши його під паперу 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
504 учасників

співтовариство javascript розробників в Telegram