I am using raphael js
in my application. Here I need to draw a small rectangle on a point of clicking in raphael paper. I need to connect these rectangle using a line. Can anyone make DEMO of this. I am adding sample DEMO. Please update this.
My DEMO.: HERE
var paper = Raphael("editor", 635,500),
canvas= document.getElementById('editor').style.backgroundColor='gray';
Now I need to draw samll rectangles on clicking raphael paper and joing them with a line.
This should do the trick; http://jsfiddle.net/9dsgcv1c/1/
var paper = Raphael("editor", 635,500),
canvas= document.getElementById('editor').style.backgroundColor='gray';
var offsetx = paper.canvas.offsetLeft;
var offsety = paper.canvas.offsetTop;
var prevRect = null;
var rWidth = 50;
paper.canvas.onmousedown = function(e) {
var posX = e.pageX-offsetx;
var posY = e.pageY-offsety;
var rectX = posX - (rWidth/2)
var rectY = posY - (rWidth/2)
var c = paper.rect(rectX, rectY, rWidth, rWidth).attr({fill:"#fff"});
if(prevRect) {
var p = "M"+prevRect.x +" " +prevRect.y +"L"+posX+" "+posY
var line = paper.path(p);
}
prevRect = {x: posX, y:posY};
}
-
<b>Click on CAMVAS to draw rectangle</b>
<div id="editor"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.