CODEWITHSUNDEEP
fabricjs
chylvina
chylvina

Reputation: 161

Drawing path with FabricJS

First:

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

result:

enter image description here

So how can I rotate this arrow by 45 degree whose center point is the head of the arrow like this:

enter image description here

I tried to set 'originX' and 'originY', but the problem is I cannot set the origin to the head of the arrow by setting these two parameters. As shown below:

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

enter image description here

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

enter image description here

Upvotes: 2

Views: 14490

Answers (1)

kangax
kangax

Reputation: 39168

This should do it:

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

Upvotes: 4

Related Questions