如何在join.js中创建一个网格

Question

我需要为jointjs中的项目实现cm或inch的网格。如何使此网格在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');