Question

JointJs是否可以选择为图形启用/绘制网格线？

如果没有，有没有办法自定义实现并绘制网格线？

Answer 1

根据jointjs changelog，您现在可以通过drawGrid的{{1}}选项显示网格。

以下是一个例子：

joint.dia.paper

PS：jointjs doc并未明确此选项。

Answer 2

这是利用HTML 5画布元素在JointJS论文中绘制网格线的一种方法：

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

如何为JointJS图启用/绘制网格线

2 个答案: