如何在单击事件时在SVG上绘制矩形

How to draw rectangles on SVG on click event?

本文关键字：绘制 SVG 单击 事件      更新时间：2023-09-26

我在应用程序中使用raphael js。在这里，我需要在拉斐尔纸上的点击点上画一个小矩形。我需要用一条线把这些矩形连接起来。有人能把它做成DEMO吗。我正在添加示例DEMO。请更新此信息。

我的演示：此处

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

现在，我需要在拉斐尔纸上画出所有的矩形，并用一条线将它们连接起来。

这样就可以了；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>
相关文章：