выделение нескольких элементов SVG и перетаскивание их в Raphael.js - PullRequest
Новая
       36

выделение нескольких элементов SVG и перетаскивание их в Raphael.js

7 голосов
/ 01 мая 2011

Кто-нибудь знает, как мне этого добиться?

У меня в основном документ svg с несколькими фигурами, линиями, текстом и т. Д., И я пытаюсь реализовать инструмент выделения, который помогает мне выбирать несколько элементов, группировать их и перетаскивать их.

Ответы [ 2 ]

27 голосов
/ 04 мая 2011

В raphäel есть функция под названием set: http://raphaeljs.com/reference.html#set

Вы можете добавить все элементы, которые хотите перетащить, в новый набор, а затем применить механизм перетаскивания к набору.

Я сделал тебе это: http://jsfiddle.net/Wrajf/

Это не идеально. Я бы добавил событие mousemove в документ, но для этого вам нужна библиотека, такая как jQuery. В противном случае, если вы двигаете мышь быстро, у вас выпадет.

4 голосов
/ 30 октября 2012

Я сделал это ( пример здесь ):

РЕДАКТИРОВАТЬ: что-то чище

  1. Создать методы для установки и извлечения группы элемента: 

    Raphael.el.setGroup = function (group) {
  this.group = group;
};
Raphael.el.getGroup = function () {
  return this.group;
};

  2. Создать метод для ваших сгруппированных элементов: 

    Raphael.fn.superRect = function (x, y, w, h, text) {
  var background = this.rect(x, y, w, h).attr({
    fill: "#FFF",
    stroke: "#000",
    "stroke-width": 1
  });
  var label = this.text(x+w/2,y+h/2, text);
  var layer = this.rect(x, y, w, h).attr({
    fill: "#FFF",
    "fill-opacity": 0,
    "stroke-opacity": 0,
    cursor: "move"
  });
  var group = this.set();
  group.push(background, label, layer);
  layer.setGroup(group);
  return layer;
};

  3. создать функции для перетаскивания сгруппированных элементов: 

    var dragger = function () {
  this.group = this.getGroup();
  this.previousDx = 0;
  this.previousDy = 0;
},
move = function (dx, dy) {
  var txGroup = dx-this.previousDx;
  var tyGroup = dy-this.previousDy;

  this.group.translate(txGroup,tyGroup);

  this.previousDx = dx;
  this.previousDy = dy;
},
up = function () {};

  4. Инициируйте SVG-бумагу и создайте свои элементы (порядок элементов важен) :: 

    window.onload = function() {

  var paper = Raphael(0, 0,"100%", "100%");

  var x=50, y=50, w=30, h=20;

  paper.superRect(x, y, w, h, "abc").drag(move, dragger, up);

  x +=100;

  paper.superRect(x, y, w, h, "def").drag(move, dragger, up);

};
...