Artikel ini terutama memperkenalkan cara untuk mencapai penskalaan kanvas dengan mengatur matriks transformasi kanvas.
Langkah pertama adalah mendengarkan event roda mouse. Pada event roda, berdasarkan pengguliran mouse dan transformasi sebelumnya, zoom dan terjemahan konteksnya diatur ulang.
misalkan delta = ini.deltaInst; delta.bind('zoom', (data) => { delta._transform.scale.forEach((s, i) => { delta._transform.scale[i] *= data.delta > 0?2 : 1/2; }); misalkan offsetX = data.x - delta._transform.translate[0]; delta._transform.translate[1]; delta._transform.translate[0] += -(data.delta > 0? 1 : -1/2)*offsetX; delta._transform.translate[1] -= (data. delta > 0? 1 : -1/2)*offsetY; delta.refreshAll();});Diasumsikan di sini bahwa setiap zoom diperbesar 2 kali, tetapi bisa juga rasio zoom lainnya.
Langkah pertama adalah mengalikan atau membagi rasio zoom saat ini dengan 2 sesuai arah pengguliran;
Langkah kedua adalah menghitung terjemahannya. Ide dasarnya adalah menghitung posisi di mana kanvas dapat diterjemahkan untuk mencapai efek yang sama ketika menskalakan titik pada kanvas ke posisi tengah berdasarkan posisi mouse yang baru.
Mari kita lihat kode refreshAll:
biarkan ctx = ini.konteks; biarkan matriks = ini.getTransformMatrix(); ctx.save(); ctx.transform(...matrix); ctx.scale(...this._transform.scale); if (!Array.isArray(bentuk)) { bentuk = [bentuk]; } bentuk.forEach( (bentuk) => { bentuk.render(ctx }); ctx.restore();Kode pertama-tama memperoleh matriks perubahan berdasarkan skala nilai skala dan nilai terjemahan yang dihitung sebelumnya, dan kemudian meneruskan nilai yang sesuai dalam matriks ke metode transformasi konteks, melakukan transformasi tertentu di kanvas, dan kemudian melakukan penskalaan sebelumnya Operasi menggambar yang sepenuhnya konsisten akan menghasilkan efek yang sama seperti setelah penskalaan~~
Pada kode di atas, ctx.transform() juga dapat diganti seluruhnya dengan metode ctx.translate() dan ctx.scale(). Seperti yang ditunjukkan di bagian komentar kode, parameternya adalah nilai yang dihitung sebelumnya.
Kode lengkapnya dapat ditemukan di alamat github: https://github.com/helloweilei/delta
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.