通过特定路径拖动对象并在兄弟路径中移动 [英] Drag object through specific path and move in a sibling path

问题描述

我想知道如何拖动对象通过画布，我想出了这一点： JsFiddle

I was wondering how to drag a object through a canvas and I've come up with this: JsFiddle

现在的事情是：我有两个不同的路径，我需要在他们（球）上拖动两个对象，球应该在两个路径上独立移动一个我正在移动。

Now the thing is: I have two different paths which I need to drag two objects on they (balls), the balls should move on both paths independently on which one I am moving.

我想做一些类似Google地图高程服务，你可以沿着路径移动一个球，可视化的另一边的高程

I am trying to do something like the Google Maps Elevation Service, which you can move a ball along the path and visualize on the other side the elevation that corresponds to that area of the path.

（要了解这一点，请转到Google地图并选择A到B点并选择Bike，然后显示Elevation在屏幕的左侧。）

(To look forward into this, go to Google maps and select A to B points and select Bike, then Elevation will show up on the left side of screen.)

Google地图

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

I have some piece of code using Raphael.js but I can't find a way through.

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);

推荐答案

您可以创建第二个路径，如果没有，你可以克隆（）第一个和缩放它或某事），计算出旅行的比例，然后调整第二个路径圆以相同的比例移动。所以它可以看起来像...

You can create a 2nd path (assuming they are different, if not, you could just clone() the first and scale it or something), figure out the ratio travelled, then adjust the 2nd path circle to move along the same ratio. So it could look something like...

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（）func ...

Then inside your move() func...

var ratioDone = l / totLen;
var p2Len = ratioDone * p2totLen
var p2Pt = p2.getPointAtLength( p2Len )
e2.attr({ cx: p2Pt.x, cy: p2Pt.y })

jsfiddle （拖动无限圆）

这篇关于通过特定路径拖动对象并在兄弟路径中移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！