對準fabric.js對象的iText的元素

Question

http://jsfiddle.net/541ev5nh/15/

我試圖紅色文本對象對齊到黑的iText對象的左上角的內部文本的左上角。當Itext對象未旋轉（角度爲0）時，您可以看到文本正確對齊。但是，旋轉IText會關閉對齊。

調整大小或更改IText的文本也會導致對齊，但現在不用擔心。輪換是現在唯一需要解決的問題。

這個問題顯然來自於我使用幻數來對齊兩個項目的事實。我需要一個公式化的方式來派生這些數字，以便在IText旋轉時保持對齊一致。有任何想法嗎？

HTML：

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

的Javascript：

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); 
} 

Answer 1

您可以通過使對象羣實現這一目標。 Fabric對對象組有很好的支持。
在這裏看到：

// 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(); 

See in Fiddler