So erstellen Sie ein Raster in join.js

Question

Ich muss ein Raster in cm oder Zoll für ein Projekt in Jointjs implementieren. Wie kann ich dieses Gitter genau und veränderlich zwischen 1x1cm und 1x1 Zoll machen. Danke.

Answer 1

Draw Gitter mit 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');