如何 enable/draw JointJS 图形的网格线

Question

JointJs 是否可以选择 enable/draw 图表的网格线？

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

Answer 1

这是在 JointJS 论文中绘制网格线的一种方法，利用了 HTML 5 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');

Answer 2

根据 jointjs changelog，您现在可以通过 joint.dia.paper 的 drawGrid 选项显示网格。

这是一个例子：

var paper = new joint.dia.Paper({
  el: $('#myholder-small'),
  width: 600,
  height: 100,
  model: graph,
  gridSize: 15,
  drawGrid:true
});

PS : jointjs doc 没有明确说明这个选项。

如何 enable/draw JointJS 图形的网格线

how to enable/draw grid lines for JointJS graph

jointjs