如何控制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; 
}