如何在点击事件上绘制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>