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（点击右侧示例列表中的“可拖动设置”）

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

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

关于monkee回答：

当monkee指出它时，在拖动方法this中引用所单击的SVG对象
拉斐尔集合没有"cx"，因此只有当集合中的所有元素都是 circle 并且具有相同的几何时，Intermediate.attr({cx:this.ox ...才有效中心 ...

Answer 2

在移动功能中，“this”引用点击的Raphäel对象。

而不是：

move = function (dx, dy) {
    this.attr({cx: this.ox + dx, cy: this.oy + dy});
}

这样做：

move = function (dx, dy) {
    Intermediate.attr({cx: this.ox + dx, cy: this.oy + dy});    
}

这里的格式错误的工作示例：http://jsbin.com/uxege4/7/edit

Answer 3

这是一个有用的js小提琴解决方案，完全符合您的要求，改编自http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2#pagetop

http://jsfiddle.net/q4vUx/102/

var paper = Raphael('stage', 300, 300);
var r = paper.rect(50,100,30,50).attr({fill:"#FFF"}),
c = paper.circle(90,150,10).attr({fill:"#FFF"}),
t = paper.text(50, 140, "Hello");


var rr = paper.rect(200,100,30,50).attr({fill:"#FFF"}),
cc = paper.circle(240,150,10).attr({fill:"#FFF"}),
tt = paper.text(200, 140, "Hello");

var pp = paper.set(rr, cc, tt);
var p = paper.set(r, c, t);

r.set = p, c.set = p, t.set = p;
rr.set = pp, cc.set = pp, tt.set = pp;

p.newTX=0,p.newTY=0,p.fDx=0,p.fDy=0,p.tAddX,p.tAddY,p.reInitialize=false,
pp.newTX=0,pp.newTY=0,pp.fDx=0,pp.fDy=0,pp.tAddX,pp.tAddY,pp.reInitialize=false,
start = function () {

},
move = function (dx, dy) {
    var a = this.set;
    a.tAddX=dx-a.fDx,a.tAddY=dy-a.fDy,a.fDx=dx,a.fDy=dy;
    if(a.reInitialize)
    {
        a.tAddX=0,a.fDx=0,a.tAddY=0;a.fDy=0,a.reInitialize=false;
    }
    else
    {
        a.newTX+=a.tAddX,a.newTY+=a.tAddY;
        a.attr({transform: "t"+a.newTX+","+a.newTY});
    }

},
up = function () {
    this.set.reInitialize=true;
};
p.drag(move, start, up);
pp.drag(move, start, up);

Answer 4

我遇到了各种各样的问题。

确实： - 延伸拉斐尔使拖曳设置成为可能 - 通过鼠标单击创建新集 - 将拖动的集合保持在画布边界内。

简称代码：

CANVAS_WIDTH = 250;
CANVAS_HEIGHT = 250;
var newSet = document.getElementById("newSet");
paper = Raphael('canvas', CANVAS_WIDTH, CANVAS_HEIGHT);
var backGround = paper.rect(0,0,CANVAS_HEIGHT, CANVAS_WIDTH);
backGround.attr({fill: "lightgrey", "fill-opacity": 0.5, "stroke-width": 0});

newSet.onclick = function() {
    createNewSet();
}

createNewSet = function() {
  var mySet = paper.set();
  var rect = paper.rect(0, 0, 50, 50);
    rect.attr({fill: "red", "fill-opacity": 0.5, "stroke-width": 0});
  var bBox = rect.getBBox();  
  var text = paper.text(10, 10, "Hello");
    text.attr({fill: 'black', 'text-anchor': 'start'});

    mySet.push(rect, text);

    mySet.draggable();
    //mySet = reposText(mySet);
    mySet.max_x = CANVAS_WIDTH - bBox.width;
    mySet.min_x = 0;
    mySet.max_y = CANVAS_HEIGHT - bBox.height;
    mySet.min_y = 0;   
};

Raphael.st.draggable = function() {
  var me = this,
      lx = 0,
      ly = 0,
      ox = 0,
      oy = 0,
      moveFnc = function(dx, dy) {
        lx = dx + ox;
        ly = dy + oy;

        if (lx < me.min_x ) {
          lx = me.min_x;
        } 
        else if ( lx > me.max_x) {
          lx = me.max_x;
        }

        if ( ly < me.min_y ) {
          ly = me.min_y;
        } 
        else if ( ly > me.max_y) {
          ly = me.max_y;
        }

          me.transform('t' + lx + ',' + ly);
      },
      startFnc = function() {},
      endFnc = function() {
          ox = lx;
          oy = ly;
      };

  this.drag(moveFnc, startFnc, endFnc);
};

在此处查看此代码： http://jsfiddle.net/Alexis2000/mG2EL/ 祝你好运！

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

4 个答案: