originXとYにもかかわらずFabricJsの適切な位置に要素を表示するには？

Question

私は2つのほぼ同じ要素を持っています。 私は2つの異なる起源のそれらを同じ左に置く方法を理解していません。ここ が予想される図である。

そして、ここでは、私が得るものです：

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