angular - როგორ ავიცილოთ ტექსტის გაზრდა textbox-ის ზომის შეცვლისას 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);