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);

}

但没有画过以前的路径。有没有办法实现动态quadraticCurve句柄？

Answer 1

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

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;
}

如何控制二次曲线处理鼠标位置的位置？

1 个答案: