如何在點擊事件上繪製SVG上的矩形？

Question

我在我的應用程序中使用了raphael js。在這裏，我需要在拉法爾紙上點擊一個小矩形。我需要使用一條線連接這些矩形。任何人都可以做這個DEMO。我正在添加示例DEMO。請更新這個。

我的DEMO： HERE

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

現在我需要借鑑一下拉斐爾文件，並與線joing他們samll矩形。

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>