Question

我需要按照this的方式做一些事情，但是我使用Snap.svg并且能够：

沿路径拖动整个组
拖动期间保留间距
允许从任何组项目拖动组
支持任意数量的群组项目
支持各种不同形状的路径

我开始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

总的来说这非常棘手。这里的大多数解决方案至少应该让你成为一种可能的方法。对于距离检查，我使用了原始小提琴中的代码，因此可以归功于编写该代码的人，因为它可能很棘手（并且可能值得自己提出SO问题，但我认为它需要进行调整）。

fiddle here编辑：您需要进行调整才能更好地开始排名。

拖动圆圈以启动它，因为我还没有设置开始位置。您将需要调整元素的起始位置，具体取决于您是否将零偏移它们或其他任何东西（否则您将需要在移动/转换时允许这样做）。您可能还想检查第一个/最后一个元素是否到达结尾并将它们全部停止，因此如果一个元素到达路径末尾它们都会停止。

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

我们跟踪每个元素索引

this.data('index')

因此，当涉及到沿着线移动它们时，我们知道它在链中的位置＆＃39;并且可以抵消以补偿，即下一行...

 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

Snap.svg沿路径拖动组

1 个答案: