3

画像とテキスト オブジェクトでグループ オブジェクトを作成しようとしています。アイコンの後にテキストが続くようなものです。オブジェクトを適切に配置するのに問題があります。左、上を手動で設定して調整できますが、テキスト、フォントなどは実行時に変更される場合があります。

フォント/テキストの長さが変更されると、配置が再び台無しになります。テキストが常に画像の後に開始されるようにする方法はありますか (テキストの長さ、フォントなどに関係なく)。

これを行う方法がファブリックに組み込まれていない場合、問題を解決するための回避策はありますか? これが私が試したコードと以下のjsFiddleリンクです。画像とテキストがどのように重なっているかがわかります。ありがとう。

var canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('http://i.imgur.com/vews5Vd.jpg', function(img) {
    var img1 = img.scale(1).set({ left: 0, top: 0 });
    var text = new fabric.Text('the_text_sample', {
                fontFamily: 'Arial',
                fontSize:30,
                left:img1.width,
                top:10,

            });
    var group = new fabric.Group([ img1,text ], { left: 200, top: 200 });
    canvas.add(group);
});

http://jsfiddle.net/gCpnz/

4

1 に答える 1

4

You're close...just be sure to set the text.top property to equal half-image-height + half-text-height. Ditto with text.left.

After the text object is created, the text width/height can be gotten using text.getBoundingRectWidth() and text.getBoundingRectHeight().

So your code becomes:

var scaleFactor=1.0
var canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('http://i.imgur.com/vews5Vd.jpg', function(img) {
    var img1 = img.scale(scaleFactor).set({ left: 0, top: 0 });
    var text = new fabric.Text('the_text_sample', {
                fontFamily: 'Arial',
                fontSize:30,
            });
            text.set("top",img.height*scaleFactor/2+text.getBoundingRectHeight()/2);
            text.set("left",-img.width*scaleFactor/2+text.getBoundingRectWidth()/2);  

    var group = new fabric.Group([ img1,text ], { left: 200, top: 200 });
    canvas.add(group);
});

Here is a Fiddle:

http://jsfiddle.net/m1erickson/5Wzvg/

于 2013-02-09T19:10:44.417 に答える