Javascript &引用;粘的;光标沿paperjs中的路径移动

Javascript &引用;粘的;光标沿paperjs中的路径移动,javascript,paperjs,Javascript,Paperjs,我希望能够沿着paperjs中预定义的路径拖动鼠标,并在鼠标大致位于该路径的位置上画一个“粘性”圆圈标记,圆圈的中心位于路径上 我已经设法得到了-以下内容正是我想要的直线,但它在弯折处不起作用,圆心从直线上“脱落”: var path = new Path(); path.strokeColor = 'black'; path.moveTo([50,50]); path.lineTo([100,100]); path.lineTo([150,50]); var cursorCircle = n

我希望能够沿着
paperjs
中预定义的路径拖动鼠标,并在鼠标大致位于该路径的位置上画一个“粘性”圆圈标记,圆圈的中心位于路径上

我已经设法得到了-以下内容正是我想要的直线,但它在弯折处不起作用,圆心从直线上“脱落”:

var path = new Path();
path.strokeColor = 'black';
path.moveTo([50,50]);
path.lineTo([100,100]);
path.lineTo([150,50]);

var cursorCircle = new Path.Circle({radius: 5,
                                    strokeColor: 'blue',
                                    visible: false});

function onMouseMove(event) {
  cursorCircle.position = event.point;

  var intersections = path.getIntersections(cursorCircle);
  if (intersections.length >= 2) {
    cursorCircle.position = (intersections[0].point + intersections[1].point)/2;
    cursorCircle.visible = true;
  } else if (intersections.length == 1) {
    cursorCircle.position = intersections[0].point;
    cursorCircle.visible = true;
  } else {
    cursorCircle.visible = false;
  }
}
如何使圆圈始终保持在直线上(假设光标足够近)?

在以下内容中找到答案:

var star = new Path.Star({
    center: view.center,
    points: 10,
    radius1: 30,
    radius2: 60,
    strokeColor: 'black'
});

var circle = new Path.Circle({
    center: view.center,
    radius: 3,
    fillColor: 'red'
});

function onMouseMove(event) {
    // Get the nearest point from the mouse position
    // to the star shaped path:
    var nearestPoint = star.getNearestPoint(event.point);

    // Move the red circle to the nearest point:
    circle.position = nearestPoint;
}