كود التنفيذ للتغليف التلقائي لمحتوى نص رسم القماش

يلزم إنشاء صفحة بطاقة دعوة، حيث يكون عدد الكلمات في العنوان ديناميكيًا ويمكن أن يعرض ما يصل إلى سطرين، وإذا تجاوز سطرين، فستتم إضافة علامة حذف في نهاية السطر الثاني من المحتوى. وفقًا لشخصية فتاة المنتج، هناك احتمال كبير أن يتم تغيير إعداد الأسطر الأربعة في المستقبل، لذلك لا يجب ترميزها هنا ونتيجة لذلك، قبل بضعة أيام، طلبت ذلك بالفعل قم بتغييره لعرض ما يصل إلى 4 أسطر، وتبقى الخطوط الأخرى كما هي. فتاة المنتج صغيرة جدًا :)!

دون مزيد من اللغط، سأقوم بنشر الكود أدناه لإظهار خجلي! قبل تحميل الكود، قم بإلقاء نظرة على المعلمات التي يجب تمريرها! !

أوصاف المعلمات مع الصور والنصوص، سامحني على تكنولوجيا وتصميم PS الذي نفد صبره

• ctx: سياق القماش
• المحتوى: محتوى النص المراد رسمه
• drawX: ارسم الإحداثي x للنص
• drawY: ارسم الإحداثي y للنص
• lineHeight: ارتفاع السطر بين النصوص
• lineMaxWidth: الحد الأقصى لعرض كل سطر من النص
• lineNum: الحد الأقصى لعدد الخطوط المرسومة

 // وظيفة التفاف الخط التلقائي textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) { var drawTxt = ''; // المحتوى المرسوم حاليًا var drawLine = 1; // أي خط لبدء الرسم var drawIndex = 0 // فهرس محتوى الرسم الحالي // تحديد ما إذا كان يمكن رسم المحتوى في سطر واحد if(ctx.measureText(content).width <=; lineMaxWidth) { ctx.fillText(content.substring(drawIndex, i), drawX, drawY); آخر { for (var i = 0; i <= content.length; i++) { drawTxt += content[i]; (ctx.measureText(drawTxt).width > lineMaxWidth) { if (drawLine === lineNum) { // أضف علامة حذف إلى السطر الأخير ctx.fillText(content.substring(drawIndex, i) + '...', drawX, drawY); فاصل } else { // إذا لم يكن السطر الأخير، ctx.fillText( content.substring(drawIndex, i + 1), drawX, drawY); drawIndex = i + 1; // سجل المعرف التالي للسلسلة الأخيرة من السطر الحالي، والذي يستخدم لرسم الكلمة الأولى من السطر التالي drawLine += 1; // عدد الخطوط + 1 drawY += lineHeight; // يزيد الإحداثي y للمحتوى المرسوم من ارتفاع الخط drawTxt = ''; // إعادة تعيين المحتوى المرسوم } } } }}

في عملية رسم النص، وجدت أن الإحداثيات y لرسم النص يجب أن تعتمد على الجزء العلوي من النص. الصورة تستحق العديد من الكلمات، الصورة أعلاه!

بيئة المتصفح: chrome 71.0.3578.98 (الإصدار الرسمي) (64 بت)

حجم الخط هو 40 بكسل

عندما يتم رسم الإحداثي y عند 40، يمكنك أن ترى أنه يمكن عرض النص بالكامل

هذا تأثير رمز لا يحظى بشعبية نسبيًا، لكنني آمل أن يساعد الأصدقاء المحتاجين، كما آمل أن يدعم الجميع شبكة VeVb Wulin.