CODEWITHSUNDEEP
jointjs
tacapaca
tacapaca

Reputation: 21

How to make a grid in join.js

I need to implement a grid in cm or inches for a project in jointjs. How can I make this grid be accurate and changeable between 1x1cm and 1x1 inch. Thank you.

Upvotes: 2

Views: 455

Answers (1)

Gokul Maha
Gokul Maha

Reputation: 298

Draw grid using 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');

Upvotes: 2

Related Questions