在不丢失原始值的情况下向左移动对象坐标

Question

我试图找到一种在不损失原始值的情况下垂直和水平“移动”对象的方法。

基本上，我需要保持相同的元素位置和原点Left和Top（在我的情况下为0、0），但要基于Center原点进行旋转。

请在下面查看屏幕截图...

具有左上原点的加载方式：

使用中心原点进行加载：

预期：

Link to Fiddler

const canvas = new fabric.Canvas('paper');
const items = ['red', 'green'];

items.forEach((color, i)=>{
	const box = new fabric.Rect({
		id: color,
    left: 0,
    top: 0,
    width: 100,
    height: 100,
    fill: color,
    angle: i * -45,
    originX: 'left',
  	originY: 'top'
	});
  canvas.add(box);
});
        
canvas.renderAll();

canvas.on('selection:created', ({target})=>{
	print(target);
});

canvas.on('selection:updated', ({target})=>{
	print(target);
});

function print(target){
	$("#top").val( target.top );
  $("#left").val( target.left );
  $("#color").val( target.id );
}

#paper {
  border: solid 1px red;
}

label {
  width: 45px;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="paper" width="200" height="200" style="border:1px solid #ccc"></canvas>
<br>
<label>Top:</label>
<input id="top" type="number" disabled/>
<br>
<label>Left:</label>
<input id="left" type="number" disabled/>
<br>
<label>Color:</label>
<input id="color" type="text" disabled/>