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