jointjs - 如何在 join.js 中制作网格

Question

我需要为 jointjs 中的项目实现以厘米或英寸为单位的网格。我怎样才能使这个网格准确并在 1x1cm 和 1x1 英寸之间变化。 谢谢。

Answer 1

使用 HTML5 Canvas 绘制网格

 function setGrid(paper, gridSize, color) {
        // Set grid size on the JointJS paper object (joint.dia.Paper instance)
        paper.options.gridSize = gridSize;
        // Draw a grid into the HTML 5 canvas and convert it to a data URI image
        var canvas = $('<canvas/>', { width: gridSize, height: gridSize });
        canvas[0].width = gridSize;
        canvas[0].height = gridSize;
        var context = canvas[0].getContext('2d');
        context.beginPath();
        context.rect(1, 1, 1, 1);
        context.fillStyle = color || '#AAAAAA';
        context.fill();
        // Finally, set the grid background image of the paper container element.
        var gridBackgroundImage = canvas[0].toDataURL('image/png');
        paper.$el.css('background-image', 'url("' + gridBackgroundImage + '")');
    }

    // Example usage:
    setGrid(paper, 10, '#FF0000');