如何控制quadraticCurve用鼠标位置处理位置？

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

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