جاوااسکریپت - تنظیم اندازه جعبه متن fabricjs برای مطابقت با انتخاب متن

من یک تکه کد دارم که به این صورت یک Textbox جدید ایجاد میکند:

new fabric.Textbox('Ajouter du texte')

مشکل این است که جعبه متن نسبت به محتوای خود کوچک است:

اگر عرض ثابتی تعیین کنم، مقداری فاصله اطرافش میگیرم:

new fabric.Textbox('Ajouter du texte', {width: 350})

چطور میتوانم اندازه کادر متن را طوری تنظیم کنم که با اندازه انتخاب متن مطابقت داشته باشد؟ نمیتوانم چیزی درباره چگونگی به دست آوردن ابعاد انتخاب پیدا کنم.

من از نسخه 4.0.0-beta.5 فابریک استفاده میکنم.

پاسخ شماره ۱

راه حلی که فعلاً استفاده میکنم این است که به تدریج عرض را افزایش دهم تا جایی که بیش از یک خط نداشته باشم:

const text = new fabric.Textbox("Ajouter du texte")

while (text.textLines.length > 1) {
  text.set({width: text.getScaledWidth() + 1})
}

احساس راحتی کنید که یک راهحل بهتر پیشنهاد کنید تا من بتوانم پاسخ پذیرفتهشده را بهروزرسانی کنم.

[ویرایش]

برای اینکه در حین ویرایش متن کار کند:

function adjustTextWidth(evt: fabric.IEvent) {
  if (evt.target instanceof fabric.IText) {
    const text = evt.target.text || ""
    while (evt.target.textLines.length > text.split("\n").length) {
      evt.target.set({width: evt.target.getScaledWidth() + 1})
    }
  }
}

canvas.on("text:changed", adjustTextWidth)

[ویرایش۲]

من راه بهتری برای رسیدن به هدفم پیدا کردم:

fabric.Textbox.prototype._wordJoiners = /[]/;

به این ترتیب، فاصله به عنوان اتصالدهنده کلمه در نظر گرفته نمیشود و متن تنها زمانی شکسته میشود که کاربر Enter را تایپ کند. من همچنین این تابع را برای تنظیم عرض کادر متن زمانی که متن حذف میشود اضافه کردم:

function fitTextboxToContent(text: fabric.IText) {
  const textLinesMaxWidth = text.textLines.reduce((max, _, i) => Math.max(max, text.getLineWidth(i)), 0);
  text.set({width: textLinesMaxWidth});
}

پاسخ شماره ۲

من در مستندات TextBox جستجو کردهام، اما چیزی پیدا نکردهام که بهطور خودکار اندازهی ظرف را با اندازهی متن تنظیم کند.

بهترین کاری که میتوانید انجام دهید این است که اندازه هر خط را بدست آورید و اگر مجموع عرضها کمتر از یک مقدار حداکثر مورد نظر بود، سپس عرض را برای کادر متن تنظیم کنید. به دلایلی، شما همچنین نیاز دارید که یک عرض کوچک به آن اضافه کنید.

var canvas = new fabric.Canvas("canvas");
var text = new fabric.Textbox("Ajouter du texte");

var textSize = 0;
for (var i = 0; i < text._textLines.length; i++) {
  textSize += text.measureLine(i).width;
}

var augmentedTextSize = textSize + 25;
if (augmentedTextSize < 500) {
  text.set({ width: augmentedTextSize });
}

canvas.add(text);
canvas.renderAll();

این مثال را بررسی کنید: https://codesandbox.io/s/stackoverflow-60411035-fabric-js-400-beta5-7s7id

خوب میشد اگر نوعی ویژگی روی TextBox وجود داشت، برای مثال «max_width»، که اگر متن کوچکتر از آن باشد، بهطور خودکار اندازه را با اندازه متن تنظیم کند.