ウェブサイト検索

angular - fabricjsでテキストボックスのサイズ変更時にテキストの拡大縮小を防ぐ方法


私は FabricJs に初めて触れるもので、私の関心はテキストボックスのサイズ変更に関するものです。私はテキストボックスを縦方向と横方向にサイズ変更できる次の解決策を持っていますが、同時にはできません。テキストがリサイズされることなく、同時に両方を行う解決策を見つけようとしています。助けていただけますか?

私のjsfiddleの例へのリンクはこちらです: http://jsfiddle.net/vstefani/s7yfu93w/27/

var canvas = new fabric.Canvas('canvas');
canvas.setWidth(500);
canvas.setHeight(500);

var myText = new fabric.Textbox("Some text", {
  width: 100,
  height: 100,
  top: 100,
  left: 100,
  fontSize: 20,
  textAlign: 'center',
  fontFamily: 'Arial',
  padding: 2,
});
canvas.add(myText);

let lastHeight: number;
const updateTextSize = () => {
  const controlPoint = myText.__corner;

  if (controlPoint && controlPoint !== 'mr' && controlPoint !== 'ml') {
    lastHeight = myText.height * myText.scaleY;
  }

  myText.set({
    height: lastHeight || myText.height,
    scaleY: 1,
  });
};

myText.on('scaling', updateTextSize);
myText.on('editing:entered', updateTextSize);
myText.on('text:changed', updateTextSize);

回答 #1

controlPoint 'mr' と 'ml' は 'scaling' イベントではなく 'resizing' によってトリガーされるようです。

私の場合でうまくいく解決策は、次のものを追加することです:

textbox.on('resizing', updateTextSize);