使用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 
});