โดยทั่วไปแล้ว การทำให้ข้อความบางลงมักใช้เมื่อสร้างความต้องการที่เกี่ยวข้องกับแผนที่ ฉันยังใช้วิธีนี้เมื่อใช้งานฟังก์ชันสำหรับกลไกแผนที่ของบริษัท ฉันได้ทำให้ง่ายขึ้นที่นี่และใช้งานบน Canvas ทั่วไปไม่ได้แนะนำแนวคิดของแผนที่
ผล การตรวจจับการชนกันคำนวณช่วงที่ข้อความอยู่ในผืนผ้าใบ
// คำนวณความกว้างที่จำเป็นสำหรับข้อความ var p = { x: 10, y: 10, name: test text}; var Measure = ctx.measureText(p.name); // ค้นหาพื้นที่สูงสุดที่ข้อความครอบครอง กระดานวาดภาพ พิกัด y var maxX = Measure.width + px; // ค้นหาพิกัด y สูงสุดที่ข้อความครอบครองในกระดานวาดภาพ // Canvas สามารถคำนวณได้เฉพาะความกว้างของข้อความ แต่ไม่ใช่ความสูงของข้อความ ดังนั้นเพียงใช้ความกว้างของข้อความหารด้วยจำนวนข้อความเพื่อคำนวณ var maxY = Measure.width / p.name.length + py; var min = { x: px, y: py }; x: maxX, y: maxY }; // ขอบเขตคือช่วงที่ข้อความครอบครอง // เมื่อพิจารณาพิกัดจุดเป็นช่วงต่ำสุด การตั้งค่า textAlign และ textBaseline ด้วยวิธีต่อไปนี้จะแม่นยำกว่า // หากแสดงในตำแหน่งที่แตกต่างกัน จะต้องปรับจุดสูงสุดและต่ำสุดของช่วงด้วย // ctx.textAlign = left; // ctx.textBaseline = top;var bounds = new Bounds(min, max);วัตถุขอบเขตขอบเขต
/** * กำหนดวัตถุช่วง */function Bounds(min, max) { this.min = min; this.max = max;}/** * กำหนดว่าช่วงตัดกับช่วงอื่นหรือไม่ */Bounds.prototype.intersects = ฟังก์ชั่น (ขอบเขต) { var min = this.min, max = this.max, min2 = bounds.min, max2 = bounds.max, xIntersects = max2.x >= min.x && min2.x <= max.x, yIntersects = max2.y >= min.y && min2.y <= max.y; กลับ xIntersects && yIntersects;};การตรวจจับ
// ก่อนการวาดภาพแต่ละครั้ง ให้ดำเนินการตรวจจับช่วงจุดตัดด้วยข้อความที่วาด // หากพบจุดตัด ให้เลิกวาดข้อความปัจจุบัน ไม่เช่นนั้นให้วาดและเก็บรายการข้อความที่วาดไว้สำหรับ (ดัชนี var ใน _textBounds) { // วนรอบทั้งหมด ช่วงข้อความที่วาดจะถูกทดสอบเพื่อดูว่ามีจุดตัดกับช่วงข้อความปัจจุบันหรือไม่ แสดงว่าข้อความนั้นชนกัน และข้อความถูกข้ามไป var pointBounds = _textBounds[index]; ) { กลับ; }`textBounds.push(bounds);ctx.fillStyle = red;ctx.textAlign = left;ctx.textBaseline = top;ctx.fillText(p.name, px, py); ตัวอย่างที่อยู่รหัสที่อยู่ตัวอย่าง: ตัวอย่าง
สำหรับรายละเอียด คุณสามารถดูโค้ดทั้งหมดได้: ที่อยู่ Github
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network