web-dev-qa-db-ja.com

Fabricjs Textboxはテキストを収まるように縮小します

テキストボックスを定義します（単一行）

デフォルトでは、文字サイズは16（たとえば）

テキストがテキストボックスより大きくなった場合、折り返さないようにするか、テキストボックスが大きくなった場合、テキストサイズをテキストボックスの最大サイズに合わせます。テキスト。テキストが小さいサイズに戻ると、最初のサイズに戻ることができます（この例では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

テキストがテキストボックスより大きくなった場合、テキストサイズをテキストボックスの最大サイズに合わせます。

javascriptfabricjs
15
neopheus

これは、アイデアを再現できる基本的なフィドルです。重要なのは、テキストが変更されるたびに発生するイベントがあり、テキストボックスがレンダリングされる前に何かを行うために使用できるということです。

この場合、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>
18
AndreaBogazzi

ネオフィウス、

これを更新してください 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'
});
0
Observer