沿路径 Paper.js 滚动

Question

基本上我想沿着路径滚动一个对象。我已经看到几个线程正在寻找不使用 paper.js 的类似解决方案，但我想知道 paper.js 是否可能。或者有人可以给我一个对象遵循 svg 曲线的工作 jsfiddle，因为我无法得到任何工作。我最终希望有一个 div 链跟随路径。

// vars
var point1 = [0, 100];
var point2 = [120, 100];
var point3 = [120, 150];

// draw the line
var path = new Path();
path.add(new Point(point1), new Point(point2), new Point(point3));
path.strokeColor = "#FFF";
path.closed = true;

// draw the circle
var circle = new Path.Circle(0,100,4);
circle.strokeColor = "#FFF";

// target to move to
var target = point2;

// how many frame does it take to reach a target
var steps = 200;

// defined vars for onFrame
var dX       = 0;
var dY       = 0;

// position circle on path
circle.position.x = target[0];
circle.position.y = target[1];

function onFrame(event) {

    //check if cricle reached its target
    if (Math.round(circle.position.x) == target[0] && Math.round(circle.position.y) == target[1]) {
        switch(target) {
            case point1:
                target = point2;
                break;
            case point2:
                target = point3;
                break;
            case point3:
                target = point1;
                break;
        }

        // calculate the dX and dY
        dX = (target[0] - circle.position.x)/steps;
        dY = (target[1] - circle.position.y)/steps;

    }

    // do the movement
//circle.position.x += dX;
//circle.position.y += dY;
}

这里是 jsfiddle： http://jsfiddle.net/J9xgY/12/

谢谢！

Answer 1

您可以使用path.getPointAt(offset) 沿路径找到一个点，其中offset 以沿路径长度的点为单位测量。如果您可以计算滑块沿其轨道的位置，则可以将其乘以 path.length 以获得偏移量。

您可以使用 HTML 滑块或画布元素执行此操作，如下所示：

// vars
var point1 = [0, 100];
var point2 = [120, 100];
var point3 = [120, 150];

// draw the line
var path = new Path();
path.add(new Point(point1), new Point(point2), new Point(point3));
path.strokeColor = "#FFF";
path.closed = true;

// draw the circle
var circle = new Path.Circle(0,100,4);
circle.strokeColor = "#FFF";

// slider
var sliderLine = new Path(new Point(10,30.5), new Point(210, 30.5));
sliderLine.strokeColor = '#FFF';
var sliderKnob = new Path.Circle(new Point(10,30.5), 5);
sliderKnob.fillColor = '#FFF';

var sliderHit = false;

function onMouseDown(event) {
    if (event.item == sliderKnob) sliderHit = true;
}

function onMouseDrag(event) {
    if (sliderHit === true) {
        if (event.point.x > 10 && event.point.x < 210) {
            sliderKnob.position.x = event.point.x;
        }
        else if (event.point.x < 11) {
            sliderKnob.position.x = 10;
        }
        else if (event.point.x > 209) {
            sliderKnob.position.x = 210;
        }

        // Get offset and set circle position
        var percent = ( sliderKnob.position.x - 10 ) / 200;
        circle.position = path.getPointAt(path.length * percent);             
    }

}

function onMouseUp(event) {
    sliderHit = false;
}

jsfiddle：http://jsfiddle.net/J9xgY/13/

单击并沿线拖动实心圆圈以沿三角形移动圆圈。