html2canvas adalah perpustakaan yang menghasilkan kanvas dari elemen html. Sebagian besar gaya kanvas yang digambar konsisten dengan CSS. Misalnya, pada versi 1.0.0-alpha.12, batas titik-titik masih digambarkan sebagai garis padat, dan masih ada masalah dengan keruntuhan batas.
Di sini, berdasarkan ide dalam masalah github, efek batas putus-putus disimulasikan.
Situasi yang berlaku: Ada banyak perbatasan yang terpisah, artinya, ini bukan perbatasan yang lengkap, dan radius perbatasan tidak dipertimbangkan.
1. Pertama, sebelum menggambar html2canvas, cari tahu arah dan posisi semua batas titik pada elemen yang perlu digambar di kanvas. findDashedBorders = (halaman) => { const tds = page.querySelectorAll(td); const border = []; .borderStyle.split(' ') : []; const dashedIndex = findAll(borderStyle, 'dashedIndex'); if (dashedIndex.length) { const persegi = td.getBoundingClientRect(); dashedIndex.map(index => { const border = { persegi, perbatasan: dashedBorder[index] } border.push( border); td.style[`border${dashedBorder[index]}Warna`] = 'transparan' }); }); batas kembali; }Halaman adalah elemen yang perlu menggambar kanvas. Semua elemen td dengan batas putus-putus di sini adalah elemen td, jadi temukan semua elemen td dan gunakan metode getComputedStyle() untuk menemukan borderStyle-nya Atribut ini berbentuk garis putus-putus tidak ada, jadi cari semua arah putus-putus sesuai dengan metode khusus findAll() (misalnya, garis putus-putus tidak ada, tidak ada yang akan mengembalikan [0, 1]), dengan array garis putus-putus adalah sebagai berikut :
const dashedBorder = [Atas, Kanan, Bawah, Kiri];
Setelah menemukan arah, dapatkan posisinya secara bersamaan, simpan informasi arah dan posisi ke dalam array perbatasan, dan atur batas ini menjadi transparan sehingga html2canvas tidak menggambar kotak ini. Kami akan menanganinya secara terpisah nanti. (Catatan: Batas titik-titik pada halaman ini semuanya akan menjadi transparan. Kami tidak mempertimbangkan untuk mengubah batas transparan kembali ke warna aslinya setelah gambar selesai)
2. Gunakan html2canvas untuk mendapatkan kanvas yang digambar halaman.forEach((halaman, idx) => { const perbatasan = this.findDashedBorders(halaman); const parentRect = halaman.getBoundingClientRect(); html2canvas(halaman, {skala: 2, logging: false, useCORS: true}). lalu((kanvas) => { this.drawDashedBorder(kanvas, batas, parentRect); ... })})Halaman adalah semua elemen yang perlu digambar di atas kanvas. Saat kita mendapatkan batas putus-putus setiap halaman, kita juga memperoleh posisi halaman tersebut, sehingga saat kita menggambar batas putus-putus, kita bisa mendapatkan posisi batas relatif terhadapnya. halaman ini. Setelah html2canvas menggambar kanvas, selanjutnya kita menggambar batas putus-putus melalui metode drawDashedBorder(). Metode ini diterapkan di bawah.
3. drawDashedBorder() selanjutnya menggambar garis putus-putus setelah mendapatkan kanvas. drawDashedBorder = (kanvas, batas, parentRect) => { var ctx = canvas.getContext(2d); ctx.setLineDash([6, 3]); globalAlpha = 1; perbatasan.forEach(perbatasan => { var kiri = (perbatasan.persegi.kiri + 0,5 - parentRect.left)*2; var right = (border.rect.right - 0,5 - parentRect.left)*2; var top = (border.rect.top + 0,5 - parentRect.top)*2; = (border.rect.bottom - 0.5 - parentRect.top)*2; switch (border.border) { case 'Atas': ctx.beginPath(); ctx.moveTo(kiri, atas); ctx.lineTo(kanan, atas); ctx.stroke(); break; kasus 'Kanan': ctx.beginPath(); ); ctx.lineTo(kanan, bawah); ctx.stroke(); break; huruf 'Bawah': ctx.beginPath(); ctx.moveTo(kiri, bawah); ctx.lineTo(kanan, bawah); ctx.stroke(); break; case 'Kiri': ctx.beginPath(); kiri, bawah); ctx.stroke(); istirahat; default: istirahat;Artinya, berdasarkan informasi arah dan posisi batas putus-putus pada batas, dapatkan konteks 2D di kanvas dan gunakan metode setLineDash untuk menggambar garis putus-putus. Posisinya *2 karena sebelumnya kita menggunakan 2 kali ukuran kanvas.
4. Metode ini saat ini hanya tersedia untuk pengujian chrome dan tidak valid untuk firefox karena informasi yang dikembalikan oleh getComputedStyle di bawah firefox berbeda dengan informasi di chrome.
Karena saya tidak memiliki pemahaman mendalam tentang kanvas dan tidak bisa melakukan PR, saya hanya bisa menantikan implementasi resmi html2canvas.
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.