尽管在originX和Y上，如何在FabricJs中显示元素的正确位置？

Question

我有两个几乎相同的元素，除了它们的顶部和原点。 我不明白如何将它们放在同一个左侧，有两个不同的起源。 以下是预期观点：

这就是我得到的：

- ＆GT; Here is the link to jsFiddler＆lt; -

注意：他们的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>