使用FabricJS的箭頭形狀

Question

我想創建一個使用線條和三角形形狀的箭頭。您可以檢查jsbin演示：

http://jsbin.com/xuyere/1/edit?js,output

正如你可以從箭頭的位置與角度不同，它是不正確的演示中看到。我在這裏做錯了什麼？

這是我用來計算角度的數學：

var dx = x2 - x1, 
    dy = y2 - y1, 
    angle = Math.atan2(dy, dx); 

angle *= 180/Math.PI; 
angle += 90; 

Answer 1

我已經改變的centerX和CenterY的價值中心及其完美的到來。更新後的代碼應該如下所示。您更新的代碼http://jsbin.com/nepiqaviqe/1/edit?js,output

var triangle = new fabric.Triangle({ 
angle: angle, 
fill: '#207cca', 
top: y2, 
left: x2, 
height: headLength, 
width: headLength, 
originX: 'center', 
originY: 'center', 
selectable: false 
    }); 

    fCanvas.add(triangle); 
    } 


function createLineArrow(points) { 
var line = new fabric.Line(points, { 
strokeWidth: 5, 
stroke: '#7db9e8', 
originX: 'center', 
originY: 'center', 
hasControls: false, 
hasBorders: false, 
hasRotatingPoint: false, 
hoverCursor: 'default', 
selectable: false 
});