Javascript 将fabric.js对象与IText元素内部文本的左上角对齐

我试图将红色文本对象与黑色IText对象的左上角对齐。当Itext对象未旋转（角度为0）时，可以看到文本已正确对齐。但是，旋转IText会使对齐失效

调整或更改IText文本的大小也会导致对齐错误，但暂时不要担心这一点。旋转是现在唯一需要做的事情

问题显然来自于我使用幻数来对齐这两个项目。我需要一个公式化的方法来推导这些数字，当IText旋转时，这些数字将保持对齐一致。有什么想法吗

HTML:

---

您可以通过将对象分组来实现这一点。Fabric对对象组有很好的支持。
请参见此处：

<canvas id="canvas" width="800" height="600" style=""></canvas>

var w = 800;
var h = 600;
var cx = w/2;
var cy = h/2;

var auto = false; // auto/manual rotation

// Main "Text"
var txt = "Text";
var canvas = new fabric.Canvas('canvas');
var text = new fabric.IText(txt, { 
    left: 20, 
    top: 30, 
    fontFamily: 'sans-serif',
    fontSize: 80
});
canvas.add(text);
var pt = new fabric.Point(cx,cy);
text.setPositionByOrigin(pt, 'center', 'center');
canvas.setActiveObject(text);


// decorator
var txt = "Top left";
var deco = new fabric.Text(txt, { 
    left: 20, 
    top: 30, 
    fontFamily: 'sans-serif',
    fontSize: 14,
    stroke: '#DD0000',
    fill: '#DD0000'
});
canvas.add(deco);


canvas.on('object:modified', onModified);

function onModified(data){
    var rotatedPoint = data.target.getPointByOrigin("left", "top");
    deco.rotate(data.target.angle);
    deco.setPositionByOrigin(new fabric.Point(rotatedPoint.x + 1, rotatedPoint.y + 11), 'left', 'top');
    canvas.renderAll();
}

var angle = -2;

if (auto){
    setInterval(onInterval, 30);
}
else{
    onInterval();
    text.setCoords();
}

function onInterval(){
    angle += 2;
    text.rotate(angle);
    var data = {
        target: text
    };
    onModified (data);
}

// Main "Text"
    var txt = "Text";
    var canvas = new fabric.Canvas('canvas');
    canvas.clear();
    var text = new fabric.IText(txt, {     
        fontFamily: 'sans-serif',
        fontSize: 80
    });
    // decorator
    var txt = "Top left";
    var deco = new fabric.Text(txt, {  
        top:10,
        fontFamily: 'sans-serif',
        fontSize: 14,
        stroke: '#DD0000',
        fill: '#DD0000'
    });

    var group = new fabric.Group([ text, deco ], {  
      angle: 0
    });

    var lefts=canvas.getWidth()/2-group.getWidth()/2;
    var tops=canvas.getHeight()/2-group.getHeight()/2;
      group.set({
        'left':lefts,
        'top':tops
      });
    canvas.add(group);
    canvas.renderAll();