如何在FabricJs中的適當位置顯示元素，儘管它在originX和Y上？

Question

我有兩個幾乎相同的元素，除了它們的頂部和原點。 我不明白如何把它們放在同一個左邊，有兩個不同的起源。 這裏是預期的觀點：

，這裏是我所得到的：

- >Here is the link to jsFiddler < -

注：他們的LEFT是一樣的！這是我從後端得到的。

TNX

var canvas = new fabric.Canvas('paper'); 
 

 
const red = new fabric.Rect({ 
 
    left: 100, 
 
    top: 50, 
 
    fill: 'red', 
 
    width: 200, 
 
    height: 100, 
 
    originX: 'center', 
 
    originY: 'center' 
 
}); 
 

 
const yellow = new fabric.Rect({ 
 
    left: 100, 
 
    top: 150, 
 
    fill: 'yellow', 
 
    width: 200, 
 
    height: 100, 
 
    originX: 'left', 
 
    originY: 'top' 
 
}); 
 

 
canvas.add(red); 
 
canvas.add(yellow);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.0/fabric.min.js"></script> 
 
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>

Answer 1

這是你想要的嗎？這裏left和top attrs是相同的。

var canvas = new fabric.Canvas('paper'); 
 

 
const red = new fabric.Rect({ 
 
    left: 100, 
 
    top: 150, 
 
    fill: 'red', 
 
    width: 200, 
 
    height: 100, 
 
    originX: 'left', 
 
    originY: 'bottom' 
 
}); 
 

 
const yellow = new fabric.Rect({ 
 
    left: 100, 
 
    top: 150, 
 
    fill: 'yellow', 
 
    width: 200, 
 
    height: 100, 
 
    originX: 'left', 
 
    originY: 'top' 
 
}); 
 

 
canvas.add(red); 
 
canvas.add(yellow);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.0/fabric.min.js"></script> 
 
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>