javascript - How to draw a polygon with control point for each corner using raphael.js -

how can draw polygon shape control points in each corner of polygon using raphael.js.

the control points should draggable , when control points moving related line should move. idea please??

here's 1 way this. first draw circle each control point, so:

// creates canvas var paper = raphael("canvas1", "100%", "100%");  // create small circle each polygon point var p1 = paper.circle(150, 50, 5).attr("fill", "blue"); var p2 = paper.circle(200, 100, 5).attr("fill", "blue"); var p3 = paper.circle(200, 200, 5).attr("fill", "blue"); var p4 = paper.circle(100, 200, 5).attr("fill", "blue"); var p5 = paper.circle(100, 100, 5).attr("fill", "blue"); 

next need connect control points in such way lines automatically redraw if updated. there handy function doing in this question, i've reproduced here, modified suit our needs (it listens drag event, accepts line attributes argument , fixes bug noted in comment on original question):

// modified from: https://stackoverflow.com/questions/9956186/raphael-js-maintain-path-between-two-objects // call paper.connect(obj1,obj2,attributes) // draws line between 2 objects , maintains line when objects animated raphael.fn.connect = function(obj1, obj2, attribs) {     // list of paths each object has     if (!obj1.connections) obj1.connections = []     if (!obj2.connections) obj2.connections = []     // bounding box of each object     var box1 = obj1.getbbox()     var box2 = obj2.getbbox()     // create line/path object 1 object 2     var p = this.path("m" + (box1.x + box1.width / 2) + ","             + (box1.y + box1.height / 2) + "l" + (box2.x + box2.width / 2)             + "," + (box2.y + box2.height / 2))     // adjust attributes of path     p.attr(attribs)     // set start , end element path     p.startelement = obj1;     p.endelement = obj2;     // add path each of object     obj1.connections.push(p)     obj2.connections.push(p)     // mark each object being connected     obj1.connected = true;     obj2.connected = true;     // listen raphael frame event     eve.on("raphael.drag.*", function(obj) {         // if object frame event fired on connected         if (this.connected) {             // each connection on object             ( var c in this.connections) {                 var path = this.connections[c]; // temp path                 var b1 = path.startelement.getbbox(); // current                                                         // location of start                                                         // element                 var b2 = path.endelement.getbbox();// current location                                                     // of end element                 // move path new locations                 path.attr({                     path : "m " + (b1.x + b1.width / 2) + " "                             + (b1.y + b1.height / 2) + "l "                             + (b2.x + b2.width / 2) + " "                             + (b2.y + b2.height / 2),                     opacity : math.max(path.startelement.attr('opacity'),                             path.endelement.attr('opacity'))                 });             }         }     }); } 

using function can connect adjacent control points.

// connect adjacent polygon points paper.connect(p1,p2,{stroke:"red"}); paper.connect(p2,p3,{stroke:"red"}); paper.connect(p3,p4,{stroke:"red"}); paper.connect(p4,p5,{stroke:"red"}); paper.connect(p5,p1,{stroke:"red"}); 

next want make our control points draggable. can follows:

// make points draggable var start = function () {     this.ox = this.attr("cx");     this.oy = this.attr("cy"); }, move = function (dx, dy) {     this.attr({cx: this.ox + dx, cy: this.oy + dy}); }, = function () {}; paper.set(p1,p2,p3,p4,p5).drag(move, start, up); 

putting give polygon draggable vertices , edges update vertices dragged.

you can see example of in action here