chemin Dessin avec FabricJS

Question

Première:

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); 

Résultat:

---

Alors, comment puis-je tourner cette flèche de 45 degrés dont le centre est à la tête de la flèche comme ce:

J'ai essayé de définir 'originX' et 'originY', mais le problème est que je ne peux pas définir l'origine à la tête de la flèche en réglant ces deux paramètres. Comme indiqué ci-dessous:

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

Cela devrait le faire:

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);