如何用鼠标位置控制二次曲线手柄位置？

Question

如何控制 quadraticCurve 手柄与鼠标位置的位置而不像 here 那样重叠？我需要这样的东西

onMouseMove = function(event) {
    var path = new Path();
    path.moveTo(300,100);
    path.strokeColor = 'blue';
    path.fillColor = 'red';
    // path.fullySelected = true;
    path.quadraticCurveTo(event.point.x,event.point.y,300,500);

}

但没有覆盖之前的路径。有没有办法实现动态二次曲线句柄？

Answer 1

在您当前的代码中，您正在为每个 onMouseMove 事件创建一个新的 Path 项目，而不删除任何先前的项目。如果只想呈现一个路径项，请在范围外创建路径变量，并在创建新项之前将其删除：

var path = new Path();

onMouseMove = function(event) {
    path.remove();

    path = new Path();
    path.moveTo(300,100);
    path.strokeColor = 'blue';
    path.fillColor = 'red';
    // path.fullySelected = true;
    path.quadraticCurveTo(event.point.x,event.point.y,300,500);

}

Here's a sketch

或者，您可以移动曲线的控件 handles，而不是在每个事件上创建新的 Path。

var path = new Path([300, 100], [300, 500]);
path.strokeColor = 'blue';
path.fillColor = 'red';

onMouseMove = function(event) {
   path.segments[0].handleOut = (event.point -path.segments[0].point)/1.5;
   path.segments[1].handleIn = (event.point - path.segments[1].point)/1.5;
}

如何用鼠标位置控制二次曲线手柄位置？

How to control quadraticCurve handles position with mouse position?

javascript

paperjs