Как нарисовать прямоугольники на SVG на событии клика?

Question

В моем приложении используется raphael js. Здесь мне нужно нарисовать маленький прямоугольник в точке щелчка на бумаге raphael. Мне нужно связать эти прямоугольники с помощью строки. Может ли кто-нибудь сделать ДЕМО этого. Я добавляю образец DEMO. Пожалуйста, обновите это.

Мой DEMO .: HERE

var paper = Raphael("editor", 635,500), 
     canvas= document.getElementById('editor').style.backgroundColor='gray'; 

Теперь мне нужно сделать Samll прямоугольники щелкать Raphael бумагу и joing их с линией.

Answer 1

Это должно сделать трюк; 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>