2

初め:

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' を設定しようとしましたが、この 2 つのパラメータを設定しても矢印の頭に原点を設定できないのが問題です。以下に示すように:

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

ここに画像の説明を入力

4

1 に答える 1