บทความนี้จะแนะนำวิธีแก้ปัญหาการตัดบรรทัดของ 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 API ก่อนหน้านี้ มีฟังก์ชัน 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; // สตริงถูกดักแต่ละครั้งดัชนีของ for(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 }}ดูการเรนเดอร์:
อัลกอริทึม: คำนวณผลรวมของความกว้างและความกว้างของอักขระแต่ละตัวในสตริง str หากมากกว่าความกว้างของผืนผ้าใบ ให้ตัดส่วนนี้เพื่อวาด จากนั้นรีเซ็ตความกว้างของเส้น บันทึกดัชนีสุดท้ายที่การสกัดกั้นเริ่มต้น และ เมื่อตัวแปรลูป i เป็นอักขระตัวสุดท้าย ให้วาดส่วนที่เหลือโดยตรง
ถัดไป: เราสรุปมันไว้ในวิธีการเพื่อให้สามารถเรียกได้โดยตรงในภายหลัง:
/*str: สตริงที่จะวาด canvas: วัตถุแคนวาส initX: เริ่มต้นพิกัด x ของสตริงการวาด initY: เริ่มต้นพิกัด y ของการวาดสตริง lineHeight: ความสูงของบรรทัดคำ คุณสามารถกำหนดค่าได้ด้วยตัวเอง */function canvasTextAutoLine(str, canvas, initX, initY, lineHeight) { var ctx = canvas.getContext (2d); var lineWidth = 0; var canvasWidth = c.width; LastSubStrIndex= 0; for(let i=0;i<str.length;i++){ lineWidth+=ctx.measureText(str[i]).width; if(lineWidth>canvasWidth-initX){//ลบ initX เพื่อป้องกันปัญหา มีขอบเขต ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY); initY+=lineHeight; lineWidth=0; LastSubStrIndex=i; } if(i==str.length-1){ ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY);ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network