如何在Raphael JS中链接和拖动2个Circle形状？

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();}

关于monkee回答:

• 正如monkee指出的那样,在拖动方法中this引用了单击的SVG对象
• 拉斐尔集合没有"cx"这样,所以Intermediate.attr({cx:this.ox ...只有当集合中的所有元素都是圆形且具有相同的几何中心时才能工作......