使用FabricJS绘制路径

Question

首先：

var canvas = new fabric.StaticCanvas('c');
var path = new fabric.Path('M 0 0 L 50 0 M 0 0 L 4 -3 M 0 0 L 4 3 z', {
    left: 100,
    top: 100,
    stroke: 'red',
    strokeWidth: 1,
    fill: false
});
canvas.add(path);

结果：

---

那么如何将此箭头旋转45度，其中心点为箭头，如下所示：

我尝试设置'originX'和'originY'，但问题是我无法通过设置这两个参数将原点设置为箭头。如下图所示：

var canvas = new fabric.StaticCanvas('c');
var path = new fabric.Path('M 0 0 L 50 0 M 0 0 L 4 -3 M 0 0 L 4 3 z', {
    left: 100,
    top: 100,
    stroke: 'red',
    strokeWidth: 1,
    fill: false,
    **originX: 'left',**
    **originY: 'top'**
});
canvas.add(path);

var canvas = new fabric.StaticCanvas('c');
var path = new fabric.Path('M 0 0 L 50 0 M 0 0 L 4 -3 M 0 0 L 4 3 z', {
    left: 100,
    top: 100,
    stroke: 'red',
    strokeWidth: 1,
    fill: false,
    originX: 'left',
    originY: 'top',
    **angle: 45**
});
canvas.add(path);

Answer 1

这应该这样做：

var canvas = new fabric.StaticCanvas('c');
var path = new fabric.Path('M 0 0 L 50 0 M 0 0 L 4 -3 M 0 0 L 4 3 z', {
    stroke: 'red',
    strokeWidth: 1,
    fill: false,
    originX: 'left',
    originY: 'top'
});
path.setAngle(45).set({ left: 100, top: 100 });
canvas.add(path);