如何在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>