如何控制quadraticCurve使用鼠标位置控制位置

How to control quadraticCurve handles position with mouse position?

本文关键字：控制 位置 鼠标 quadraticCurve 何控制      更新时间：2023-09-26

如何用鼠标位置控制quadraticCurve处理位置，而不会像这里那样重叠？我需要像这个一样的东西

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控制柄吗？

在当前代码中，您在每个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);
}

这是的草图

或者，可以移动曲线的控件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;
}
相关文章：