raphael - 如何在 Raphael JS 中链接和拖动 2 个圆形？

Question

出于某种原因，我可以使用矩形变量而不是圆形来使用它。
目前，此代码允许两个圆圈独立拖动，但不能一起拖动

有人知道如何解决这个问题或其他方法吗？

addIntermediateSymbol = function()
{
    var Intermediate = raphaelReference.set();
    Intermediate.push(
        raphaelReference.circle(74, 79, 20).attr({fill: "#ff7f00",stroke: "#000000",'stroke-width': 3}),
        raphaelReference.circle(74, 79, 10).attr({fill: "#ff7f00",stroke: "#000000",'stroke-width': 4})
        );

var start = function () {
    // storing original coordinates
    this.ox = this.attr("cx");
    this.oy = this.attr("cy");
},
move = function (dx, dy) {
    // move will be called with dx and dy
    this.attr({cx: this.ox + dx, cy: this.oy + dy});
},
up = function () {
    ;
};
Intermediate.drag(move, start, up);
}

Answer 1

您必须在拖动函数(开始、移动、向上)中再次使用 Intermediate，但使用 translate 函数(这使集合中的每个人都以相同的方式移动):

var start = function () {
    Intermediate.oBB = Intermediate.getBBox();
},
move = function (dx, dy) {
    var bb = Intermediate.getBBox();
    Intermediate.translate(Intermediate.oBB.x - bb.x + dx, Intermediate.oBB.y - bb.y + dy);
},

参见 http://irunmywebsite.com/raphael/additionalhelp.php?v=1&q=anglebannersoncurves#PAGETOP(单击右侧示例列表中的“Draggable Set”)

似乎 Intermediate.func() 只是将属性 func() 映射到集合内的元素(适用于 drag() 和 translate() )，例如:

for (var shape in Intermediate) {shape.func();}

关于猴子答案:

正如蒙基指出的那样，在拖动方法中 this 引用了单击的 SVG 对象

Raphael 集合没有 "cx"，所以 Intermediate.attr({cx:this.ox ... 只有当集合中的所有元素都是圆并且具有相同的几何中心时才有效......