javascript - Snap.svg拖动多个组

选择它们后，我不知道如何在snap.svg中拖动多个组。当选择了两个元素（其中两个元素的不透明度已更改）并且我使用dragGroup函数时，我想拖动两个元素，而不仅是单击的元素。您能给我一些支持如何实现它吗？

请参阅显示问题的JSFiddle-JSFiddle

SelectMultipleGroups();
dragGroup(Snap.select("#extGrid1"));
dragGroup(Snap.select("#extGrid2"));


function SelectMultipleGroups () {

  var paper = Snap('#svgArea')

  // group that will receive the selected items
  //var selections = paper.group()
  selections = Snap.set();

  // DRAG FUNCTIONS
  // when mouse goes down over background, start drawing selection box
  var box = paper.rect(-2000, -2000, 0, 0).attr('stroke', 'black'); //obszar zaznaczania (x, y, width, height);
  function dragstart (x, y, event) {

   //if path or circle were clicked don't draw box
   if(event.target.nodeName == "path" || event.target.nodeName == "circle" )
   {
      return false;
   }
   box = paper.rect(x, y-32, 0, 0).attr('stroke', 'black');
  }
  // when mouse moves during drag, adjust box. If to left or above original point, you have to translate the whole box and invert the dx or dy values since .rect() doesn't take negative width or height
  function dragmove (dx, dy, x, y, event) {
      var xoffset = 0,
          yoffset = 0

      if (dx < 0) {
        xoffset = dx
        dx = -1 * dx
      }

      if (dy < 0) {
        yoffset = dy
        dy = -1 * dy
      }

      box.transform('T' + xoffset + ',' + yoffset)
      box.attr('width', dx)
      box.attr('height', dy)
      box.attr('fill', 'none')
  }
  function dragend (event) {

      var border = box.getBBox()
      box.remove()

      var items = Snap.selectAll('#svgArea g');

      items.forEach(function (el) {
        // here, we want to get the x,y vales of each object regardless of what sort of shape it is, but rect uses rx and ry, circle uses cx and cy, etc
        // so we'll see if the bounding boxes intercept instead
        var mybounds = el.getBBox()

        // do bounding boxes overlap?
        // is one of this object's x extremes between the selection's xextremes?
        if (Snap.path.isBBoxIntersect(mybounds, border)) {
            el.attr({
              attr: "selected",
              opacity: 0.5,
            });
        }
      });
  }
  Snap.select('#svgArea').drag(dragmove, dragstart, dragend);
};


function dragGroup (element) {

  startFnc = function (e) {

    var matrixSplit = element.transform().localMatrix.split();

    ox = matrixSplit.dx
    oy = matrixSplit.dy

  }, // handler for drag start
  moveFnc = function (dx, dy) { // handler for moving

    lx = dx + ox // add the new change in x to the drag origin
    ly = dy + oy // add the new change in y to the drag origin

    // limit the area for drag
    lx = insideContainer(element, lx, ly).x
    ly = insideContainer(element, lx, ly).y

    element.transform('translate(' + lx + ',' + ly + ')')

  },
  endFnc = function () { // handler for drag end
    ox = 0
    oy = 0
  }
  element.drag(moveFnc, startFnc, endFnc);
};

// limit the area for drag
function insideContainer (element, lx, ly) {

  var thisGroup = element.getBBox();


  if (lx < 0) {
    lx = 0
  }
  if (ly < 0) {
    ly = 0
  }
  if (lx > ($("#svgArea").width() - thisGroup.width)) {
    lx = ($("#svgArea").width()  - thisGroup.width)
  }
  if (ly > ($("#svgArea").height() - thisGroup.height)) {
    ly = ($("#svgArea").height()  - thisGroup.height)
  }

  return {
    x: lx,
    y: ly
  }
}

最佳答案

最简单的方法是将两个组元素都放在另一个组中。这样，您只需将处理程序放在父组元素上，然后拖动它，内部的所有内容都会随之移动。

dragGroup(Snap.select("#parentGroup"));

jsfiddle example

如果由于某种原因您不能执行此操作，则必须遍历每个组元素并进行转换，在拖动之前存储每个组的起始位置。所以看起来可能像这样...

startFnc = function (e) {

    selections.forEach(function(el) {
      var matrixSplit = el.transform().localMatrix.split();

      el.data('ox',matrixSplit.dx)
      el.data('oy',matrixSplit.dy)
    });

  }, // handler for drag start
  moveFnc = function (dx, dy) { // handler for moving

    selections.forEach(function(el) {

      lx = dx + el.data('ox') // add the new change in x to the drag origin
      ly = dy + el.data('oy') // add the new change in y to the drag origin

      // limit the area for drag
      lx = insideContainer(el, lx, ly).x
      ly = insideContainer(el, lx, ly).y

      el.transform('translate(' + lx + ',' + ly + ')')
    });
}

jsfiddle