โค้ดการใช้งานสำหรับการตัดบรรทัดอัตโนมัติของเนื้อหาข้อความรูปวาดแคนวาส

จำเป็นต้องสร้างหน้าการ์ดเชิญ ซึ่งจำนวนคำในชื่อเป็นแบบไดนามิกและสามารถแสดงได้สูงสุด 2 บรรทัด หากเกิน 2 บรรทัด จะมีการเพิ่มจุดไข่ปลาที่ท้ายเนื้อหาบรรทัดที่สอง ตามบุคลิกของสาวโปรดักต์ มีโอกาสสูงที่เซ็ตติ้ง 4 บรรทัดจะเปลี่ยนไปในอนาคต เลยต้องไม่ฮาร์ดโค้ดตรงนี้ เพราะเมื่อ 2-3 วันที่แล้วผมขอจริงๆ เปลี่ยนให้แสดงได้สูงสุด 4 บรรทัด ส่วนบรรทัดอื่นๆ ยังคงเหมือนเดิม สาวผลิตภัณฑ์ยังเด็กเกินไป :)!

เพื่อเป็นการไม่เสียเวลา ฉันจะโพสต์โค้ดด้านล่างเพื่อแสดงความอับอายของฉัน! ก่อนที่จะโหลดโค้ด โปรดดูพารามิเตอร์ที่ต้องส่งก่อน! -

คำอธิบายพารามิเตอร์พร้อมรูปภาพและข้อความ ขออภัยสำหรับเทคโนโลยีและการออกแบบ PS ที่ใจร้อนของฉัน

• ctx: บริบทของแคนวาส
• content: เนื้อหาข้อความที่จะวาด
• 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); } else { สำหรับ (var i = 0; i <= content.length; i++) { DrawTxt += content[i]; (ctx.measureText(drawTxt).width > lineMaxWidth) { ถ้า (drawLine === lineNum) { // เพิ่มจุดไข่ปลาที่บรรทัดสุดท้าย ctx.fillText(content.substring(drawIndex, i) + '...', DrawX, DrawY); break; } else { // หากไม่ใช่บรรทัดสุดท้าย ctx.fillText( content.substring(drawIndex, i + 1), DrawX, DrawY); DrawIndex = i + 1; // บันทึก idnex ถัดไปของสตริงสุดท้ายของบรรทัดปัจจุบันซึ่งใช้ในการวาดคำแรกของบรรทัดถัดไป += 1; // จำนวนบรรทัด + 1 DrawY += lineHeight; // พิกัด y ของเนื้อหาที่วาดจะเพิ่มความสูงของบรรทัดตามลำดับ DrawTxt = '';

ในขั้นตอนการวาดข้อความ ฉันพบว่าพิกัด y ในการวาดข้อความควรยึดตามด้านบนของข้อความ

สภาพแวดล้อมเบราว์เซอร์: chrome 71.0.3578.98 (เวอร์ชันอย่างเป็นทางการ) (64 บิต)

ขนาดตัวอักษรคือ 40px

เมื่อวาดพิกัด y ที่ 40 คุณจะเห็นว่าข้อความสามารถแสดงได้เต็มที่

นี่เป็นเอฟเฟกต์โค้ดที่ค่อนข้างไม่เป็นที่นิยม แต่ฉันหวังว่ามันจะสามารถช่วยเพื่อน ๆ ที่ต้องการได้ ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network