Javascript 沿着路径Paper.js滚动

基本上我想沿着路径滚动一个对象。我见过几个线程不使用paper.js寻找类似的解决方案，但我想知道paper.js是否可能。或者有人可以给我一个工作的JSFIDLE对象跟随svg曲线，因为我无法让任何东西工作。我最终想让一连串的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;
}

以下是JSFIDLE：

---

谢谢

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

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

// 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：

---

单击并沿直线拖动填充的圆，以沿三角形移动圆。

您的问题不清楚-您能否解释一下使用滚动条按比例跟随路径的意思？另外，请记住paper.js不是移动外部div的最佳工具，而是在canvas元素中显示图形。基本上我想沿着路径滚动对象。你想沿着三角形路径移动圆吗？是的，通过滚动谢谢！虽然我想用鼠标滚轮来控制它，但我可以从这里开始。