Metode aplikasi menggambar garis karet gelang kanvas

Gambar jari bisa meregang seperti karet gelang. .

Contohnya seperti berikut: point_down:

Idenya sangat sederhana, Anda hanya perlu memperhatikan fungsi menggambar karet gelang. Berikut rangkuman ide dari tiga tahapan yaitu mousedown, mousemove, dan mouseup.

mousedown: rekam posisi awal, drag (catat apakah dalam keadaan menyeret) disetel ke true, getImageData ( 橡皮筋效果关键1 )

mousemove: Dapatkan posisi pos saat menyeret, putImageData ( 对应getImageData，橡皮筋效果关键2 ), gambar garis lurus sesuai pos dan mulai

mouseup: drag kembali ke false

关键terletak pada dua metode kanvas putImageData() dan getImageData(). putImageData() mencatat gambar saat mouse diklik, dan getImageData() mengembalikannya sesuai kebutuhan. Jika kedua cara ini tidak dijalankan maka akan terjadi dampak sebagai berikut:

putImageData() sama dengan menghapus semua baris yang dipindai

kode

 <id kanvas=lebar kanvas=600 tinggi=400 gaya=batas: 1 piksel hitam pekat;> </kanvas> <tipe skrip=teks/javascript> biarkan kanvas = document.getElementById('kanvas'), ctx = kanvas.getContext( '2d'), canvasLeft = canvas.getBoundingClientRect().left, //getBoundingClientRect() mendapatkan posisi elemen canvasTop = canvas.getBoundingClientRect().top; let imageData; //Rekam data gambar let start = new Map([['x',null],['y',null]]); Dalam keadaan menyeret canvas.onmousedown = function (e) { let pos = positionInCanvas(e, canvasLeft, canvasTop); start.set('x', pos.x); pos.y); drag = true; //Rekam imageData imageData = ctx.getImageData(0,0,canvas.width,canvas.height } canvas.onmousemove = function (e) { if(drag === true) { let pos = positionInCanvas(e, canvasLeft, canvasTop); //Setara dengan menghapus semua garis yang dipindai dan menggambar ulang ctx.putImageData(imageData, 0, 0); ctx.beginPath(); ctx.moveTo(mulai.get('x'), mulai.get('y')); ctx.lineTo(pos.x, pos.y()); ; } } canvas.onmouseup = function (e) { drag = false; } function positionInCanvas (e, canvasLeft, canvasTop) {//Dapatkan posisi klik mouse di canvas return { x:e.clientX - canvasLeft, y:e.clientY - canvasTop } } </script>

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