Connect canvas with lines

问题:

I need to connect two canvas with a line to create a dynamic workflow.

I'll generate the canvas rectangle dynamic (amount of steps I have at DB) but I need to connect the steps with lines.

Anybody have some ideas?

回答1:

Here’s how to automatically connect 2 draggable canvas rectangles with a line

First, define some boxes and connectors:

    // define any boxes that will be drawn     var boxes=[];     boxes.push({x:50,y:25,w:75,h:50});    // x,y,width,height     boxes.push({x:200,y:100,w:50,h:50});      // define any connectors between any boxes     var connectors=[];     connectors.push({box1:0,box2:1}); 

Draw the boxes and automatically draw their connectors:

    function draw(){          // clear the canvas         ctx.clearRect(0,0,canvas.width,canvas.height);          for(var i=0;i

The code below allows any box to be dragged and remain connected.

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/GX6HS/

   
Drag boxes--they remain connected
     

文章来源: Connect canvas with lines