javascript - Snap.svg 沿路径拖动组

Question

我需要按照 this 做一些事情，但我使用 Snap.svg 并能够:

1. 沿着路径拖动整个组
2. 拖动过程中保持间距
3. 允许从任何组项目进行组拖动
4. 支持任意数量的组项目
5. 支持各种不同形状的路径

我开始this jsfiddle作为工作起点(也在下面发布)，但我不知道如何最好地解决这个问题。

var paper = Snap('#panel');

var path = paper.path('M44.16,44.16 L44.16,44.16 L73.6,14.719999999999999 L132.48,73.6 L14.719999999999999,191.35999999999999 L132.48,309.12 L103.03999999999999,338.55999999999995 L44.16,279.67999999999995 L44.16,279.67999999999995')
.attr({
    stroke: 'gray',
    strokeWidth: 3,
    fill: 'none'
});

var c1 = paper.circle(103.03999999999999, 103.03999999999999, 15);
var c2 = paper.circle(44.16, 161.92, 15);
var c3 = paper.circle(73.6, 132.48, 15);

var cGroup = paper.g();
cGroup.add(c1,c2,c3);

Answer 1

总的来说，这是一个相当棘手的问题。这是大部分解决方案，至少应该让您作为一种可能的方法正确进行。对于距离检查，我使用了原始 fiddle 中的代码，因此归功于编写该代码的人，因为它可能很棘手(也许值得它自己的SO问题，但我认为它需要调整)。

fiddle here编辑:您需要进行调整以允许更好的起始位置。

拖动圆圈来开始它，因为我还没有设置开始位置。您将需要调整元素的起始位置，具体取决于您是否将它们归零或其他什么(否则您在移动/变换时需要考虑到这一点)。您可能还想检查第一个/最后一个元素是否到达末尾并停止所有元素，因此如果一个元素到达路径末端，它们都会停止。

它的工作原理是将所有对象放在一个集合中，然后为每个对象附加一个处理程序(您可能在该组中只有一个处理程序，更优雅，但可能有点棘手)。

我们跟踪每个元素索引

this.data('index')

因此，当涉及到沿线移动它们时，我们知道它在“链”中的位置，并且可以偏移进行补偿，即下面的线...

 var whichDrag = this;
 ....
 mySet.forEach( function( el, i ) {

    var which = whichDrag.data("index") - i;
    pt = path.getPointAtLength(l + (which * spacer ));
    if( !isNaN(pt.x) && !isNaN(pt.x) ) { // check if over end
        el.transform('t' + pt.x + ',' + pt.y );
    };
 } ); 

完整代码...

var paper = Snap('#panel');

var spacer = 70;

var path = paper.path('M44.16,44.16 L44.16,44.16 L73.6,14.719999999999999 L132.48,73.6 L14.719999999999999,191.35999999999999 L132.48,309.12 L103.03999999999999,338.55999999999995 L44.16,279.67999999999995 L44.16,279.67999999999995')
.attr({
    stroke: 'gray',
    strokeWidth: 3,
    fill: 'none'
});
var pt = path.getPointAtLength(l);
    //e = r.ellipse(pt.x, pt.y, 4, 4).attr({stroke: "none", fill: "#f00"}),
var totLen = path.getTotalLength();


var r1 = paper.rect(0,0,10,10);
var c3 = paper.circle(0,0, 15);
var c2 = paper.circle(0,0, 15);
var c1 = paper.circle(0,0, 15);
var l = 0;
var searchDl = 1;

var cGroup = paper.g();
cGroup.add(c3,c2,c1,r1);

var mySet = cGroup.selectAll("*");

start = function () {
    this.data("ox", +this.getBBox().cx );
    this.data("oy", +this.getBBox().cy );
    this.attr({opacity: 1});
},
move = function (dx, dy) {
    var whichDrag = this;
    var tmpPt = {
        x : this.data("ox") + dx, 
        y : this.data("oy") + dy
    };
    // move will be called with dx and dy
    l = gradSearch(l, tmpPt);
    pt = path.getPointAtLength(l);
  //  this.attr({cx: pt.x, cy: pt.y});

    mySet.forEach( function( el, i ) {
        var which = whichDrag.data("index") - i;
        pt = path.getPointAtLength(l + (which * spacer ));
        if( !isNaN(pt.x) && !isNaN(pt.x) ) {
             //el.attr({cx: pt.x, cy: pt.y});
            el.transform('t' + pt.x + ',' + pt.y );
        };
    } );

},
up = function () {
    // restoring state
    this.attr({opacity: 1});
},

gradSearch = function (l0, pt) {
    l0 = l0 + totLen;
    var l1 = l0,
        dist0 = dist(path.getPointAtLength(l0 % totLen), pt),
        dist1,
        searchDir;

    if (dist(path.getPointAtLength((l0 - searchDl) % totLen), pt) > 
       dist(path.getPointAtLength((l0 + searchDl) % totLen), pt)) {
        searchDir = searchDl;
    } else {
        searchDir = -searchDl;
    }

    l1 += searchDir;
    dist1 = dist(path.getPointAtLength(l1 % totLen), pt);
    while (dist1