沿着路径Paper.js滚动

Scroll along path Paper.js

本文关键字：js 滚动 Paper 路径      更新时间：2024-07-02

基本上我想沿着路径滚动一个对象。我看到有几个线程在寻找不使用paper.js的类似解决方案，但我想知道这在paper.jss中是否可行。或者有人能给我一个有效的jsfiddle of object follow 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;
}

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

谢谢！

您可以沿着具有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/

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

相关文章：