2016-12-22 37 views
7

に合わせて縮小させる16テキストがより大きくなるとFabricjsテキストボックスは、テキストがの文字サイズで、私は、テキストボックス(シングルライン)デフォルトで</p> <p>を定義し

(例えば)テキストボックス、私はそれをラップするか、テキストボックスが大きくなることを望んでいない、私はテキストボックスの最大サイズに合わせて、テキストサイズをします。テキスト。テキストが小さいサイズに戻ると、初期サイズを再開できます(例16)。おそらくあなたのアイデアを持っている場合、私は事前に:)

感謝を取る最小サイズに

を管理

テストケース:http://jsfiddle.net/Da7SP/273/

// initialize fabric canvas and assign to global windows object for debug 
var canvas = window._canvas = new fabric.Canvas('c'); 

// ADD YOUR CODE HERE 
var canvas = window._canvas = new fabric.Canvas('c'); 
var t1 = new fabric.Textbox('My Text', { 
    width: 200, 
    top: 5, 
    left: 5, 
    fontSize: 16, 
    textAlign: 'center' 
}); 

var t2 = new fabric.Textbox('My text is longer, but I do not want the box to grow, or the text to wrap. I only want the text to fit the available size', { 
    width: 200, 
    height: 200, 
    top: 250, 
    left: 5, 
    fontSize: 16, 
    textAlign: 'center' 
}); 



canvas.add(t1); 
canvas.add(t2); 

小さなビデオは、私が欲しいものを説明します:

enter image description here

テキストがテキストボックスより大きくなると、テキストボックスの最大サイズに合わせてテキストサイズを設定します。

答えて

9

これはあなたのアイデアを再現できる基本的なフィドルです。 重要なことは、すべてのテキスト変更に対して発生するイベントがあり、それがテキストボックスがレンダリングされる前に何かを行うために使用できることです。私は、テキストボックスに追加非標準のパラメータに基づいて、フォントサイズを縮小し、この場合イムで

fixedWidth

// ADD YOUR CODE HERE 
 
var canvas = new fabric.Canvas('c'); 
 
var t1 = new fabric.Textbox('MyText', { 
 
    width: 150, 
 
    top: 5, 
 
    left: 5, 
 
    fontSize: 16, 
 
    textAlign: 'center', 
 
    fixedWidth: 150 
 
}); 
 

 
canvas.on('text:changed', function(opt) { 
 
    var t1 = opt.target; 
 
    if (t1.width > t1.fixedWidth) { 
 
    t1.fontSize *= t1.fixedWidth/(t1.width + 1); 
 
    t1.width = t1.fixedWidth; 
 
    } 
 
}); 
 

 
canvas.add(t1);
canvas { 
 
    border: 1px solid #999; 
 
}
<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script> 
 
<canvas id="c" width="600" height="600"></canvas>

+0

と呼ばありがとう@AndreaBogazzi;) – neopheus

+0

しかし、あなたはテキストボックスに自動ラップを無効に知っています? ありがとうございます。あなたがItextにオートラップスイッチを必要としない場合は – neopheus

+0

です。理由のテキストボックスだけが作成されたので、無効にする方法はありません。 – AndreaBogazzi

0

neopheus、

は、私は生地のテキストを定義し、そこにあなたの長いテキストを入れて、この更新fiddle

を確認してください。その後、そのテキストの幅を取得し、その幅をTextBoxに割り当てます。

var someText = 'My text is longer, but I do not want the box to grow, or the text to wrap. I only want the text to fit the available size'; 
var textSize = new fabric.Text(someText,{ 
        fontSize: 16 
       }); 
var textBoxWidth = textSize.getWidth(); 

if (canvas.width < textBoxWidth){ 
textBoxWidth = canvas.width - 10; 
} 
var t2 = new fabric.Textbox(someText, { 
    width: textBoxWidth, 
    height: 200, 
    top: 250, 
    left: 5, 
    fontSize: 16, 
    textAlign: 'center' 
}); 
関連する問題