Deteksi tabrakan teks kanvas dan metode penipisan

Penipisan teks umumnya digunakan saat membuat kebutuhan terkait peta. Saya hanya menerapkan metode ini saat mengimplementasikan fungsi untuk mesin peta perusahaan. Saya telah menyederhanakannya di sini dan mengoperasikannya di Canvas biasa tidak memperkenalkan konsep peta

Hitung rentang yang ditempati oleh teks di kanvas

 // Hitung lebar yang diperlukan untuk teks var p = { x: 10, y: 10, name: test text}; var ukur = ctx.measureText(p.name); papan gambar koordinat y var maxX = ukuran.lebar + px; // Temukan koordinat y maksimum yang ditempati oleh teks di papan gambar kanvas // Kanvas hanya dapat menghitung lebar teks, tetapi tidak dapat menghitung tinggi teks. Jadi gunakan saja lebar teks dibagi jumlah teks untuk menghitung perkiraan var maxY = size.width / p.name.length + py;var min = { x: px, y: py };var max = { x: maxX, y: maxY }; // batas adalah rentang yang ditempati oleh teks di kanvas. // Saat mengambil koordinat titik sebagai rentang minimum, akan lebih akurat jika menyetel textAlign dan textBaseline dengan cara berikut. // Jika ditampilkan di lokasi berbeda, titik maksimum dan minimum rentang juga perlu disesuaikan // ctx.textAlign = left // ctx.textBaseline = top;varbounds = new Bounds(min, max);

Objek jangkauan batas

 /** * Menentukan objek rentang */function Bounds(min, max) { this.min = min; this.max = max;}/** * Menentukan apakah rentang tersebut berpotongan dengan rentang lain */Bounds.prototype.intersects = fungsi(batas) { var min = ini.min, max = ini.max, min2 = batas.min, max2 = batas.max, xIntersects = max2.x >= min.x && min2.x <= max.x, yIntersects = max2.y >= min.y && min2.y <= max.y; kembalikan xIntersects && yIntersects;};

Deteksi

 // Sebelum setiap gambar, lakukan deteksi perpotongan jarak dengan teks yang digambar // Jika ditemukan perpotongan, hentikan gambar teks saat ini, jika tidak, gambar dan simpan daftar teks yang digambar untuk (indeks var di _textBounds) { // Ulangi semua rentang teks yang digambar diuji untuk melihat apakah berpotongan dengan rentang teks saat ini. Jika ada perpotongan, berarti akan bertabrakan, dan teks dilewati. ) { kembali; }}_textBounds.push(batas);ctx.fillStyle = merah;ctx.textAlign = kiri;ctx.textBaseline = atas;ctx.fillText(p.name, px, py);

Contoh alamat: contoh

Untuk lebih jelasnya, Anda dapat melihat kode lengkapnya: Alamat Github

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.