☰

Fabricjs テキストボックスでテキストを縮小してフィットさせる 質問する

tag-icon • tag-icon javascript fabricjs
Fabricjs テキストボックスでテキストを縮小してフィットさせる 質問する

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

デフォルトでは、文字サイズは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);

私が何を望んでいるかを説明する短いビデオ：

ここに画像の説明を入力してください

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

ベストアンサー1

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

この場合、テキストボックスに追加した非標準パラメータに基づいてフォントサイズを縮小します。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>

おすすめ記事