使用 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的值改成了center，完美的来了。更新后的代码应如下所示。您更新后的代码 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
 });

使用 FabricJS 的箭头形状

Arrow shape using FabricJS

javascript

html5-canvas

fabricjs

trigonometry