Javascript 使用FabricJS的箭头形状
我试图创建一个箭头使用线和三角形的形状。您可以在jsbin上查看演示: 从演示中可以看出,箭头的位置随角度而变化,这是不正确的。我做错了什么 这是我用来计算角度的数学:Javascript 使用FabricJS的箭头形状,javascript,html5-canvas,fabricjs,trigonometry,Javascript,Html5 Canvas,Fabricjs,Trigonometry,我试图创建一个箭头使用线和三角形的形状。您可以在jsbin上查看演示: 从演示中可以看出,箭头的位置随角度而变化,这是不正确的。我做错了什么 这是我用来计算角度的数学: var dx = x2 - x1, dy = y2 - y1, angle = Math.atan2(dy, dx); angle *= 180 / Math.PI; angle += 90; 我已将centerX和CenterY的值更改为“中心”,并且它的效果非常完美。更新后的代码应该是这样的。您的更新代
var dx = x2 - x1,
dy = y2 - y1,
angle = Math.atan2(dy, dx);
angle *= 180 / Math.PI;
angle += 90;
我已将centerX和CenterY的值更改为“中心”,并且它的效果非常完美。更新后的代码应该是这样的。您的更新代码
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
});