Javascript 通过特定路径拖动对象并在同级路径中移动

我想知道如何在画布上拖动一个对象，我想到了这个：

现在的问题是：我有两条不同的路径，我需要在它们上面拖动两个物体（球），球应该在两条路径上独立移动，我在其中一条路径上移动

我试着做一些类似谷歌地图高程服务的事情，你可以沿着路径移动一个球，然后在另一侧可视化与路径区域对应的高程

（要了解这一点，请转到谷歌地图，选择A到B点并选择Bike，然后屏幕左侧将显示高程。）

我有一些使用Raphael.js的代码，但我找不到一个方法

var searchDl = 1;
var l = 0;

// Creates canvas 320 × 200 at 10, 50
var r = Raphael(10, 50, 320, 200);

var p = r.path("M100,100c0,50 100-50 100,0c0,50 -100-50 -100,0z").attr({stroke: "#ddf"}),
    pt = p.getPointAtLength(l);
    e = r.ellipse(pt.x, pt.y, 4, 4).attr({stroke: "none", fill: "#f00"}),
    totLen = p.getTotalLength(),


start = function () {
    // storing original coordinates
    this.ox = this.attr("cx");
    this.oy = this.attr("cy");
    this.attr({opacity: 1});
},
move = function (dx, dy) {
    var tmpPt = {
        x : this.ox + dx, 
        y : this.oy + dy
    };
    // move will be called with dx and dy
    l = gradSearch(l, tmpPt);
    pt = p.getPointAtLength(l);
    this.attr({cx: pt.x, cy: pt.y});
},
up = function () {
    // restoring state
    this.attr({opacity: 1});
},
gradSearch = function (l0, pt) {
    l0 = l0 + totLen;
    var l1 = l0,
        dist0 = dist(p.getPointAtLength(l0 % totLen), pt),
        dist1,
        searchDir;

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

    l1 += searchDir;
    dist1 = dist(p.getPointAtLength(l1 % totLen), pt);
    while (dist1 < dist0) {
        dist0 = dist1;
        l1 += searchDir;
        dist1 = dist(p.getPointAtLength(l1 % totLen), pt);
    }
    l1 -= searchDir;

    return (l1 % totLen);
},
dist = function (pt1, pt2) {
    var dx = pt1.x - pt2.x;
    var dy = pt1.y - pt2.y;
    return Math.sqrt(dx * dx + dy * dy);
};
e.drag(move, start, up);

var searchDl=1；
var l=0；
//在10,50处创建画布320×200
var r=拉斐尔（10,50,320,200）；
var p=r.path（“m100100c0,50 100-50 100,0c0,50-100-50-100,0z”）.attr（{stroke:#ddf}），
pt=p.getPointAtLength（l）；
e=r.ellipse（pt.x，pt.y，4，4）.attr（{笔划：“无”，填充：#f00}），
totLen=p.getTotalLength（），
开始=功能（）{
//存储原始坐标
this.ox=this.attr（“cx”）；
this.oy=this.attr（“cy”）；
this.attr（{opacity:1}）；
},
移动=功能（dx，dy）{
var tmpPt={
x:this.ox+dx，
y:这个
};
//将使用dx和dy调用move
l=梯度搜索（l，tmpPt）；
pt=p.getPointAtLength（l）；
this.attr（{cx:pt.x，cy:pt.y}）；
},
up=函数（）{
//恢复状态
this.attr（{opacity:1}）；
},
梯度搜索=函数（l0，pt）{
l0=l0+totLen；
变量l1=l0，
dist0=dist（p.getPointAtLength（10%总长度），pt），
区1，
searchDir；
如果（距离（p.getPointAtLength（（l0-searchDl）%totLen），pt）>
距离（p.getPointAtLength（（l0+searchDl）%totLen），pt））{
searchDir=searchDl；
}否则{
searchDir=-searchDl；
}
l1+=searchDir；
dist1=dist（p.getPointAtLength（l1%总长度），pt）；
而（dist1

您可以创建第二条路径（假设它们不同，如果不是，您可以克隆（）第一条路径并缩放它或其他），计算出行驶的比率，然后调整第二条路径圆以沿相同的比率移动。所以它看起来像

var p2 = r.path("M150 0 L75 200 L225 200 Z").attr({ stroke: 'blue' }),
    pt2 = p2.getPointAtLength(l),
    e2 = r.ellipse(pt2.x, pt2.y, 4, 4).attr({stroke: "none", fill: "#f00"}),
    p2totLen = p2.getTotalLength();

然后在move（）函数中

（拖动无穷大圆）

您可以创建第二条路径（假设它们不同，如果没有，您可以克隆（）第一条路径并缩放它或其他东西），计算出行驶的比率，然后调整第二条路径圆以沿相同的比率移动。所以它看起来像

var p2 = r.path("M150 0 L75 200 L225 200 Z").attr({ stroke: 'blue' }),
    pt2 = p2.getPointAtLength(l),
    e2 = r.ellipse(pt2.x, pt2.y, 4, 4).attr({stroke: "none", fill: "#f00"}),
    p2totLen = p2.getTotalLength();

然后在move（）函数中

---

（拖动无限大圆圈）

我的坏！我想你是对的。现在我看看OP的小提琴，我看到他们想要同时导航两条路径——一条在地图上，另一条在立面图上。我删除了我的错误答案：-你的代码很好，但我们应该能够同时拖动两个球。有可能对两者都发出命令吗？我如何调整比率而不弄乱最终点？每当我尝试时，第一条路径在第二条路径结束之前结束。换句话说，我需要让第二个球跑得慢一点，但只要第一个球跑得慢一点，它仍然会到达终点。我不确定我是否跟随，如果你让第二个球跑得慢一点，它就不会到达终点（除非路径更小）。因为比率是两条路径之间的差值。也许值得用一个测试例子问一个新问题，试着进一步解释一下，或者在这里贴一张小提琴。我能不能把这个比例调大一点？Path1 Traveled等于Path2 Traveled的空间时间任何仍然到达endMy bad的空间时间！我想你是对的。现在我看看OP的小提琴，我看到他们想要同时导航两条路径——一条在地图上，另一条在立面图上。我删除了我的错误答案：-你的代码很好，但我们应该能够同时拖动两个球。有可能对两者都发出命令吗？我如何调整比率而不弄乱最终点？每当我尝试时，第一条路径在第二条路径结束之前结束。换句话说，我需要让第二个球跑得慢一点，但只要第一个球跑得慢一点，它仍然会到达终点。我不确定我是否跟随，如果你让第二个球跑得慢一点，它就不会到达终点（除非路径更小）。因为比率是两条路径之间的差值。也许值得用一个测试例子问一个新问题，试着进一步解释一下，或者在这里贴一张小提琴。我能不能把这个比例调大一点？Path1 Traveled等于Path2 Traveled的空间乘以仍然到达终点的任何值