تشرح هذه المقالة كيفية حل مشكلة التفاف الخط في drawText أثناء عملية الرسم على القماش، دعونا نلقي نظرة أولاً على المشكلة التي يواجهها الجميع عادةً عند رسم النص على القماش:
لوحة مقاس 150*100 بحدود واضحة
<canvas id=canvas style=border:solid 1px darkgoldenrod width=200px height=100px></canvas>
دعونا نلقي نظرة على طريقة fillText() أولاً. تعمل طريقةStrokeText() بنفس الطريقة.
var c=document.getElementById(canvas); var ctx=c.getContext(2d); ctx.fillStyle=#E992B9;ctx.lineWidth=1;var str = إذا خدعتك الحياة، فلا تحزن! شكرا لك!ctx.fillText(str,0,20);
يمكنك أن ترى أن fillText() لن يلتف تلقائيًا عندما يكون هناك عدد كبير جدًا من الكلمات في لوحة قماشية ذات عرض ثابت. يمكننا زيادة عرض اللوحة القماشية نفسها، لكن هذه ليست الطريقة الأساسية لحل المشكلة. ما زلت أتذكر أنه عندما قدمت واجهة برمجة تطبيقات Canvas الأساسية من قبل، كانت هناك وظيفة، context.measureText(text) يمكن لهذه الوظيفة قياس عرض الخط وارتفاعه، وهو أمر يسهل التعامل معه وإضافة عرض تقريبي، يمكن حل مشكلة التفاف الخط هذه بشكل أساسي.
دعونا نلقي نظرة على طريقة التنفيذ المحددة:
var c=document.getElementById(canvas); var ctx=c.getContext(2d); ctx.fillStyle=#E992B9;ctx.lineWidth=1; var str = إذا خدعتك الحياة، فلا تحزن! شكرًا لك!var lineWidth = 0;var CanvasWidth = c.width;// احسب عرض اللوحة القماشية var initHeight=15;// الارتفاع الأولي لخط الرسم من أعلى اللوحة القماشية var lastSubStrIndex= 0 // يتم اعتراض السلسلة في كل مرة Index of(let i=0;i<str.length;i++){ lineWidth+=ctx.measureText(str[i]).width; if(lineWidth>canvasWidth){ ctx.fillText(str.substring(lastSubStrIndex,i),0,initHeight);// ارسم الجزء المعترض initHeight+=20;//20 هو ارتفاع الخط lineWidth=0; أنا؛ } if(i==str.length-1){// ارسم الجزء المتبقي ctx.fillText(str.substring(lastSubStrIndex,i+1),0,initHeight }});انظر الاداءات:
الخوارزمية: احسب مجموع العرض وعرض الخط لكل حرف في سلسلة السلسلة إذا كان أكبر من عرض اللوحة القماشية، فاعترض هذا الجزء للرسم، ثم أعد تعيين عرض الخط، واحفظ الفهرس الأخير حيث بدأ الاعتراض، و عندما يكون متغير الحلقة i هو الحرف الأخير، ارسم الأجزاء المتبقية مباشرة.
التالي: نقوم بتغليفها في طريقة بحيث يمكن استدعاؤها مباشرة لاحقًا:
/*str: سلسلة سيتم رسمها قماش: كائن قماش initX: بدء إحداثي x لسلسلة الرسم initY: بدء إحداثي y لرسم خط سلسلة الارتفاع: ارتفاع سطر الكلمة، يمكنك تحديد قيمة بنفسك */function CanvasTextAutoLine(str, Canvas, initX,initY,lineHeight){ var ctx = Canvas.getContext(2d); var lineWidth = 0; lastSubStrIndex= 0; for(let i=0;i<str.length;i++){ lineWidth+=ctx.measureText(str[i]).width; بحدود ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY); initY+=lineHeight;ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.