Как связать и перетащить 2 круга в Raphael JS? - PullRequest
Новая
       0

Как связать и перетащить 2 круга в Raphael JS?

4 голосов
/ 30 марта 2011

По какой-то причине я могу заставить это работать с прямоугольными переменными, но не с кругами.На данный момент этот код позволяет перетаскивать оба круга независимо, но не вместе

Кто-нибудь знает, как исправить этот или альтернативный метод? 

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

Ответы [ 4 ]

11 голосов
/ 06 сентября 2011

Вы должны снова использовать 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-объект
  • Наборы Рафаэля не имеют "cx" как такового, поэтому Intermediate.attr({cx:this.ox ... работает, только если все элементы набора кружки и имеют такой же геометрический центр ...
0 голосов
/ 20 декабря 2013

У меня тоже были проблемы с перетаскиванием сетов.

Это делает: - расширяет Рафаэля, чтобы сделать возможным перетаскивание наборов - создает новые наборы с помощью мыши - сохраняет перетаскиваемый набор в границах холста.

Код вкратце: 

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/ Удачи!

0 голосов
/ 04 мая 2013

Вот полезное решение js Fiddle, которое делает именно то, что вы хотите, адаптировано с 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);
0 голосов
/ 08 апреля 2011

В функции перемещения «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

...