KineticJS draw line between two shapes -
i have 2 kineticjs rectangles draggable on canvas. want able use modifier (like clicking button says draw line, or keyboard modifier cntrl) , click on 1 of rectangles, drag anothe rectangle , have simple line drawn connecting both rectangles). line needs linked each rectangle if either of rectangles move, line stays connected.
the second part of question seems solved post: kineticjs drag box line connected
but can't find resources me first problem.
here’s how let user select 2 rectangles clicking on them
you don’t need [start connect] button, let user click 2 rectangles , connection.
the user can select rectangle clicking on it. rectangle highlighted black , red border. user can click same rectangle again unselect (the highlighting removed).
highlighting separate rectangle “outlines” selected rectangle in black , red border. highlighting done on separate layer.
first, add couple of custom properties every rectangle.
// ishighlighted on/off flag // mark rectangle highlighted user. rect.ishighlighted=false; // highlight second rectangle “highlights” rectangle rect.highlight=null; // add click event toggles highlighting on/off // whenever user clicks on rectangle rect.on("click",function(){ highlight(this); target.draw(); }); this function toggles rectangle's highlight on/off when user clicks it.
this function tests if 2 rectangles highlighted can connect them.
yes...you found post on how connecting:
kineticjs drag box line connected
// create counter of highlighted rectangles var highlightcount=0; // when rectangle clicked, toggle highlight on/off function highlight(rect){ if(rect.highlighted){ rect.ishighlighted=false; rect.highlight.remove(); highlightcount--; }else{ var x=rect.getx()-8; var y=rect.gety()-8; var width=rect.getwidth()+16; var height=rect.getheight()+16; var highlight=krect(x,y,width,height,"red","black",3,target); rect.ishighlighted=true; rect.highlight=highlight; highlightcount++; // if 2 rectangles highlighted, connect them if(highlightcount==2){ var results="connect these rectangles: "; var children=layer.getchildren(); for(var i=0;i<children.length;i++){ if(children[i].ishighlighted){ results+="["+i+"]"; } } alert(results); } } } here code , fiddle: http://jsfiddle.net/m1erickson/mbpkn/
<!doctype html> <html> <head> <meta charset="utf-8"> <title>prototype</title> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.3-beta.js"></script> <style> #container{ border:solid 1px #ccc; margin-top: 10px; } </style> <script> $(function(){ var stage = new kinetic.stage({ container: 'container', width: 400, height: 400 }); // create target layer highlights drawn var target = new kinetic.layer({name:"target"}); stage.add(target); // create regular layer var layer = new kinetic.layer({name:"layer"}); stage.add(layer); // create 4 rectangles var rect1=krect(50,50,40,40,"lightgray","skyblue",6,layer); var rect2=krect(125,125,40,40,"lightgray","skyblue",6,layer); var rect3=krect(200,50,40,40,"lightgray","skyblue",6,layer); var rect5=krect(275,125,40,40,"lightgray","skyblue",6,layer); // create counter of highlighted rectangles var highlightcount=0; // when rectangle clicked, toggle highlight on/off function highlight(rect){ if(rect.highlighted){ rect.ishighlighted=false; rect.highlight.remove(); highlightcount--; }else{ var x=rect.getx()-8; var y=rect.gety()-8; var width=rect.getwidth()+16; var height=rect.getheight()+16; var highlight=krect(x,y,width,height,"red","black",3,target); rect.ishighlighted=true; rect.highlight=highlight; highlightcount++; if(highlightcount==2){ var results="connect these rectangles: "; var children=layer.getchildren(); for(var i=0;i<children.length;i++){ if(children[i].ishighlighted){ results+="["+i+"]"; } } alert(results); } } } // build specified kineticjs rectangle , add stage function krect(x,y,width,height,fill,stroke,strokewidth,layer){ var rect = new kinetic.rect({ x: x, y: y, width: width, height: height, fill: fill, stroke: stroke, strokewidth: strokewidth }); // if not highlight, make highlight-able if(layer.getname()!="target"){ rect.ishighlighted=false; rect.highlight=null; rect.on("click",function(){ highlight(this); target.draw(); }); } layer.add(rect); stage.draw(); return(rect); } }); // end $(function(){}); </script> </head> <body> <div id="container"></div> </body> </html>
Comments
Post a Comment