Javascript SVG中的可拖动和可调整大小

我想让svg元素（path、rect或circle）能够被拖动，并为其提供调整大小的句柄

但与HTMLDOM不同的是，并非所有元素都具有左上角的x、y坐标以及内容周围框的宽度和高度。这使得进行常规的调整大小或拖动过程变得不方便

将每个路径或圆绘制在它自己的svg对象中，给我一个框来玩，这是一个好主意吗

---

SVG中通常是如何实现可拖动/可调整大小的？

注意：对于拖动和调整大小，您必须为某些不同类型的元素分别设置大小写。看看，它在同一组函数中处理椭圆和矩形的拖动

---

要使图元可拖动，请使用：

element.drag(move, start, up);

这三个参数是对处理移动（拖动）、启动（鼠标下移）和停止（mouseup）的函数的引用

例如，制作一个可拖动的圆（来自文档）：

在上面的示例中，将

ox

和

oy

属性附加到元素上以跟踪其位置，这些属性与

dx

和

dy

一起用于在拖动元素时更改元素的位置

回答

要使对象可调整大小，只需为大小调整器创建第二组拖放方法，并根据拖动大小调整器调整目标元素的高度和宽度

这是我写的一个完整的拖放和可调整大小的框：

包含的事件处理程序（当然，您可以结合使用更多）和拖放说明位于页面底部

您只需制作一张拉斐尔画布，然后每个项目将是一个不同的元素。只需将它们分配给变量，这样您就可以处理它们，如上面的示例所示（

c

用于引用创建的圆元素）

作为对评论的回应，这里是一个简单的拖放+可调整大小的圆圈。诀窍是圆圈使用属性

cx

和

cy

进行定位，使用属性

r

进行大小。力学原理基本相同。。。椭圆会稍微复杂一点，但这只是一个使用正确属性的问题

---

看看哪一个似乎与你的目标相符。

试试Graphiti这里是链接：

---

它基于Raphael，非常易于使用。

SVG.js也有这个插件

---

您好，上面的例子很好，但我希望进一步扩展它。我想能够使用re-sizeable与圆圈。我已经设法让rect的工作，但与此斗争。我认为我的问题源于rmove方法，因为当我设置这个时。框的宽度和高度对于圆来说没有其他选择。你知道的任何想法或任何可能的教程。谢谢。@Adam-对于圆和椭圆，您只需使用圆心、

cx

和

cy

以及半径即可。下面是一个如何处理拖动==>的矩形和椭圆的示例（查看“拖动器”函数，它使用if

shapes[ind]。type==“rect”

检查形状类型并分别处理。-----这意味着您必须编写单独的代码来处理椭圆的拖动和调整大小（使用半径和中心坐标而不是长方体）。抱歉，可能我没有说清楚。拖动形状没有任何问题。调整大小有问题。我可以像上面的示例那样调整矩形的大小，但我无法使用可拖动形状调整圆/省略号的大小，即使我选择了正确的属性。我想问题出在.box上，因为没有宽度，并且圆圈的右属性。@Adam-我明白了。这就是为什么我说要使用

cx

、

cy

和半径作为圆圈。半径属性是通过

r

访问的，您可以使用它而不是框来调整圆圈的大小-下面是一个快速调整圆圈大小的示例：（当然，您希望在更精致的示例中添加一个调整大小的句柄）-请注意，我正在使用

r

来调整圆的大小。-这个

box

只是一个较大对象的副本，你必须自己创建它…看最后一行代码==>

s.box=c；

啊，现在一切都有意义了，我已经让它工作了。谢谢你的帮助。我可能应该问一个问题，这样你就可以了代表的姓名。谢谢：）

window.onload = function() {
var R = Raphael("canvas", 500, 500);    
var c = R.circle(100, 100, 50).attr({
    fill: "hsb(.8, 1, 1)",
    stroke: "none",
    opacity: .5
});
var start = function () {
    // storing original coordinates
    this.ox = this.attr("cx");
    this.oy = this.attr("cy");
    this.attr({opacity: 1});
},
move = function (dx, dy) {
    // move will be called with dx and dy
    this.attr({cx: this.ox + dx, cy: this.oy + dy});
},
up = function () {
    // restoring state
    this.attr({opacity: .5});
};
c.drag(move, start, up);    
};​

window.onload = function() {
var R = Raphael("canvas", 500, 500),
    c = R.rect(100, 100, 100, 100).attr({
            fill: "hsb(.8, 1, 1)",
            stroke: "none",
            opacity: .5,
            cursor: "move"
        }),
    s = R.rect(180, 180, 20, 20).attr({
            fill: "hsb(.8, .5, .5)",
            stroke: "none",
            opacity: .5
        }),
    // start, move, and up are the drag functions
    start = function () {
        // storing original coordinates
        this.ox = this.attr("x");
        this.oy = this.attr("y");
        this.attr({opacity: 1});

        this.sizer.ox = this.sizer.attr("x");
        this.sizer.oy = this.sizer.attr("y");
        this.sizer.attr({opacity: 1});
    },
    move = function (dx, dy) {
        // move will be called with dx and dy
        this.attr({x: this.ox + dx, y: this.oy + dy});
        this.sizer.attr({x: this.sizer.ox + dx, y: this.sizer.oy + dy});        
    },
    up = function () {
        // restoring state
        this.attr({opacity: .5});
        this.sizer.attr({opacity: .5});        
    },
    rstart = function () {
        // storing original coordinates
        this.ox = this.attr("x");
        this.oy = this.attr("y");

        this.box.ow = this.box.attr("width");
        this.box.oh = this.box.attr("height");        
    },
    rmove = function (dx, dy) {
        // move will be called with dx and dy
        this.attr({x: this.ox + dx, y: this.oy + dy});
        this.box.attr({width: this.box.ow + dx, height: this.box.oh + dy});
    };   
    // rstart and rmove are the resize functions;
    c.drag(move, start, up);
    c.sizer = s;
    s.drag(rmove, rstart);
    s.box = c;
};​

window.onload = function() {
    var R = Raphael("canvas", 500, 500),
        c = R.circle(100, 100, 50).attr({
            fill: "hsb(.8, 1, 1)",
            stroke: "none",
            opacity: .5
        }),
        s = R.circle(125, 125, 15).attr({
            fill: "hsb(.8, .5, .5)",
            stroke: "none",
            opacity: .5
        });
    var start = function () {
        // storing original coordinates
        this.ox = this.attr("cx");    
        this.oy = this.attr("cy");

        this.sizer.ox = this.sizer.attr("cx");    
        this.sizer.oy = this.sizer.attr("cy")

        this.attr({opacity: 1});
        this.sizer.attr({opacity: 1});
    },
    move = function (dx, dy) {
        // move will be called with dx and dy
        this.attr({cx: this.ox + dx, cy: this.oy + dy});
        this.sizer.attr({cx: this.sizer.ox + dx, cy: this.sizer.oy + dy});
    },
    up = function () {
        // restoring state
        this.attr({opacity: .5});
        this.sizer.attr({opacity: .5});
    },
    rstart = function() {
        // storing original coordinates
        this.ox = this.attr("cx");
        this.oy = this.attr("cy");        

        this.big.or = this.big.attr("r");
    },
    rmove = function (dx, dy) {
        // move will be called with dx and dy
        this.attr({cx: this.ox + dy, cy: this.oy + dy});
        this.big.attr({r: this.big.or + Math.sqrt(2*dy*dy)});
    };
    c.drag(move, start, up);    
    c.sizer = s;
    s.drag(rmove, rstart);
    s.big = c;
};