Artikel ini terutama memperkenalkan:
Nama: Papan Gambar Cerdas
Tumpukan teknologi: HTML5, CSS3, JavaScript, seluler
Deskripsi fungsi:
Alamat pratinjau alamat proyek
Pratinjau
Pratinjau PC:
Pratinjau seluler:
Setelah membaca preview di atas dan mencoba Smart Drawing Pad , menurut saya tidak apa-apa. Ingatlah untuk mengacungkannya. Terlepas dari apakah Anda sangat bersemangat atau tidak, saya cukup bersemangat. Bagaimanapun, saya sangat bangga memilikinya mencapai hasil proyek. Saya telah mengatakannya. Banyak omong kosong, sekarang Anda dapat mulai mengetik kode untuk mencapai efek yang Anda inginkan! ! !
Catatan: Efek proyek berikut ini terutama terkait dengan JavaScript. Berikut ini hanya kode yang memberikan ide implementasi , bukan keseluruhan kode .
3. Mencapai hasil proyek langkah demi langkah(1) Halaman analisis
Melalui use case diagram kita mengetahui fungsi apa saja yang bisa digunakan pengguna untuk masuk ke website kita?
Apa yang dapat dilakukan pengguna:
(2) tata letak HTML
Ketika saya menulis html, saya memperkenalkan file css dan file js
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Konten yang kompatibel=ie=Edge> <title>Bantalan Gambar Cerdas</title> <link rel=shortcut icon href=./image/favicon.png type=image/x-icon> <link rel=stylesheet href=./css/style.css></head><body> <kanvas id=canvas></canvas> <div class=bg-btn></ div> <div class=color-group id=bgGroup> <h3>Pilih warna latar belakang:</h3> <ul class=clearfix> <li class=bgcolor-item style=background-color: biru;></li> <li class=bgcolor-item style=background-color: black;></li> <li class=bgcolor-item style=background-color: #FF3333;></li> <li class=bgcolor-item style=background-color: #0066FF;></li> <li class=bgcolor-item style=background-color: #FFFF33;></li> <li class=bgcolor-item style=background-color: #33CC66;></li> <li class=bgcolor-item style=background-color: grey;></li> <li class=bgcolor-item style=background- color: #F34334;></li> <li class=bgcolor-item style=background-color: #fff;box-shadow: 0 1px 2px 0 rgba(32,33,36,0.28);></li> <li class=bgcolor-item style=background-color: #9B27AC;></li> <li class=bgcolor-item style=background-color: #4CB050;></li> <li class=bgcolor-item style=background-color: #029688;></li> </ul> <i class=closeBtn></i> </div> <div class=tools> <div class=container> <button class=save id=save <button class=brush active id=brush <button class=eraser id=eraser < tombol class=hapus id=hapus <button class=batalkan id=batalkan <button class=redo id=redo </div> </div> <div class=pen-detail id=penDetail> <i class=closeBtn></i> <p>Ukuran pena</p> <span class=circle-box><i id=thickness></i></span> <input type=range id=range1 min=1 max=10 value=1> <p>Warna pena</p> <ul class=pen-color clearfix> <li class=color-item active style=background-color: black;></ li> <li class=item-warna style=background-color: #FF3333;></li> <li class=color-item style=background-color: #99CC00;></li> <li class=color-item style=background -color: #0066FF;></li> <li class=item warna style=warna latar: #FFFF33;></li> <li class=item warna style=warna latar: #33CC66;></li> </ul> <p>Opacity</p> <i class=showOpacity></i> <input type=range id=range2 min=1 max=10 nilai=1> < / div> <skrip src=./js/main.js></script></body></html>
(3) Gunakan CSS untuk mempercantik antarmuka
Kode css dapat mempercantik antarmuka sesuai dengan kebiasaan pribadi, jadi saya tidak akan menulis kode css di sini. Anda dapat langsung melihat kode proyek atau meninjau elemen dari alat pengembang. Jika Anda memiliki pertanyaan, Anda dapat mengobrol dengan saya secara pribadi. Menurut saya itu bukan masalah besar.
(4) Gunakan JS untuk mengimplementasikan fungsi spesifik proyek
1. Persiapan
Pertama, siapkan wadahnya, yaitu papan gambar. Wadah tersebut sudah ditulis di HTML sebelumnya.
<kanvas id=kanvas></kanvas>
Kemudian inisialisasi js
biarkan kanvas = document.getElementById('canvas');biarkan konteks = kanvas.getContext('2d'); Saya berencana membuat artboard full screen, jadi selanjutnya saya akan mengatur lebar dan tinggi canvas
biarkan pageWidth = document.documentElement.clientWidth; biarkan pageHeight = document.documentElement.clientHeight;canvas.width = pageWidth;canvas.height = pageHeight;
Karena beberapa IE tidak mendukung canvas , jika kita ingin kompatibel dengan IE, kita dapat membuat canvas , lalu menginisialisasinya dengan excanvas , dan menambahkan exCanvas.js untuk IE. Kami secara eksplisit tidak mempertimbangkan IE di sini.
Namun ketika saya mengubah jendela browser di komputer saya, papan gambar tidak berskala secara adaptif. Larutan:
// Ingatlah untuk menjalankan fungsi autoSetSize function autoSetSize(){ canvasSetSize(); // Saat menjalankan fungsi ini, lebar dan tinggi kanvas akan disetel terlebih dahulu function canvasSetSize(){ let pageWidth = document.documentElement.clientWidth; pageHeight = dokumen.documentElement.clientHeight; kanvas.lebar = lebar halaman; kanvas.tinggi = tinggi halaman } // Setelah ukuran jendela berubah, event resize akan dipicu untuk mengatur ulang lebar dan tinggi jendela kanvas.onresize = function(){ canvasSetSize();2. Menyadari fungsi menggambar
Ide implementasi: dengarkan kejadian mouse dan gunakan metode drawLine() untuk menggambar data yang direkam.
painting = false .mousedown ), setel painting ke true , menandakan bahwa pengecatan sedang dilakukan dan mouse tidak dilepaskan. Rekam klik mouse.mousemove ). Jika mouse bergerak terlalu cepat, browser tidak dapat mengikuti kecepatan menggambar, dan celah akan muncul di antara titik-titik, jadi kita perlu menghubungkan titik-titik yang digambar dengan garis ( lineTo() ).mouseup ), atur painting ke false . Catatan: Metode drawCircle sebenarnya tidak perlu ditulis. Ini hanya agar semua orang mengerti harus mulai mengklik dari mana?
function listeningToUser() { // Tentukan variabel untuk menginisialisasi status kuas let painting = false; // Catat posisi terakhir kuas let lastPoint = {x: undefinisi, y: undefinisi}; // Peristiwa penekanan mouse canvas.onmousedown = fungsi (e){ lukisan = benar; misalkan x = e.clientX; misalkan y = e.clientY; lastPoint = {'x':x,'y':y}; drawCircle(x,y,5); //Acara pemindahan mouse canvas.onmousemove = function(e){ if(painting){ let x = e.clientX; :x,'y':y}; drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y); Acara pelepasan mouse canvas.onmouseup = function(){ painting = false; }}// Fungsi titik gambar function drawCircle(x,y,radius){ // Membuat jalur baru, perintah menggambar grafis diarahkan ke jalur Menghasilkan jalur. konteks.beginPath(); // Menggambar busur (lingkaran) dengan (x, y) sebagai pusat dan jari-jari sebagai jari-jarinya, // dimulai dari startAngle dan berakhir di endAngle, dengan arah berlawanan arah jarum jam (defaultnya adalah searah jarum jam ) untuk menghasilkan. konteks.arc(x,y,radius,0,Math.PI*2); // Hasilkan grafik yang solid dengan mengisi area konten jalur konteks.fill(); // Setelah menutup jalur, grafik perintah menggambar dialihkan ke tengah. konteks.closePath();}function drawLine(x1,y1,x2,y2){ //Mengatur lebar garis konteks.lineWidth = 10; //Mengatur gaya akhir baris. konteks.lineCap = bulat; // Mengatur gaya sambungan antar garis konteks.lineJoin = bulat; // moveTo(x,y) memindahkan goresan ke koordinat x dan y yang ditentukan konteks.moveTo(x1,y1 ); / lineTo(x, y) menggambar garis lurus dari posisi saat ini ke posisi x dan y yang ditentukan konteks.lineTo(x2,y2); konteks.closePath();}3. Menerapkan fungsi penghapus
Ide implementasi:
eraserEnabled = false .click penghapus, klik penghapus, ubah status penghapus, eraserEnabled = true , dan alihkan kelas untuk mencapai efek yang diaktifkan .eraserEnabled adalah true , gerakkan mouse dan gunakan context.clearRect() untuk mengimplementasikan penghapus. Namun saya menemukan bahwa di API kanvas, metode clearRect dapat menghapus piksel, tetapi metode clearRect menghapus area persegi panjang. Bagaimanapun, penghapus kebanyakan orang terbiasa berbentuk bulat, sehingga fungsi area kliping yang kuat diperkenalkan adalah metode klip. Kode berikut menggunakan context.clearRect() untuk mengimplementasikan penghapus. Silakan lihat bagian langkah demi langkah untuk mempelajari cara menerapkan sassafras karet dengan lebih baik.
let Eraser = document.getElementById(eraser);let EraserEnabled = False;// Ingatlah untuk menjalankan fungsi ListenToUser function ListenToUser() { // ... berarti kode yang ditulis sebelumnya dihilangkan // ... // Tekan mouse Acara berikutnya canvas.onmousedown = function(e){ // ... if(eraserEnabled){//Untuk menggunakan penghapus konteks.clearRect(x-5,y-5,10,10) }else{ lastPoint = {'x':x,'y':y} } } // Acara pemindahan mouse canvas.onmousemove = function(e){ let x = e.clientX; !lukisan){return} if(eraserEnabled){ konteks.clearRect(x-5,y-5,10,10); {'x':x,'y':y}; drawLine(lastPoint.x, lastPoint.y,newPoint.x, newPoint.y); lastPoint = newPoint; penghapus.onclick = fungsi(){ penghapusEnabled = true; penghapus.classList.add('aktif'); sikat.kelasList.hapus('aktif');}4. Menerapkan fungsi pembersihan layar
Ide implementasi:
Dapatkan simpul elemen.
Klik tombol Hapus untuk menghapus kanvas.
let reSetCanvas = document.getElementById(clear);//Realisasikan pembersihan layar reSetCanvas.onclick = function(){ ctx.clearRect(0,0,canvas.width,canvas.height); Setel ulang fungsi warna latar belakang kanvas setCanvasBg(warna) { ctx.fillStyle = warna; 0, kanvas.lebar, kanvas.tinggi);}5. Menerapkan fungsi menabung sebagai gambar
Ide implementasi:
biarkan simpan = document.getElementById(simpan); // Unduh gambar simpan.onclick = function(){ biarkan imgUrl = canvas.toDataURL('image/png'); body.appendChild(saveA); saveA.href = imgUrl; saveA.download = 'mypic'+(Tanggal baru).getTime(); simpanA.target = '_blank'; simpanA.klik();}6. Menerapkan fungsi mengubah warna latar belakang
Ide implementasi:
biarkan selectBg = document.querySelector('.bg-btn');let bgGroup = document.querySelector('.color-group');let bgcolorBtn = document.querySelectorAll('.bgcolor-item');let penDetail = dokumen. getElementById(penDetail);let activeBgColor = '#fff';//menerapkan peralihan warna latar belakang untuk (misalkan i = 0; i < bgcolorBtn.length; i++) { bgcolorBtn[i].onclick = function (e) { // Berhenti menggelegak e.stopPropagation() untuk (misalkan i = 0; i < bgcolorBtn.length ; i++) { bgcolorBtn[i].classList.hapus(aktif); this.classList.add(aktif); this.style.backgroundColor; setCanvasBg(activeBgColor);}selectBg.onclick = function(e){ bgGroup.classList.add(' aktif'); e.stopPropagation();}7. Menerapkan fungsi mengubah ketebalan kuas
Ide implementasi:
biarkan range1 = document.getElementById('range1');let lWidth = 2;let ifPop = false;range1.onchange = function(){ console.log(range1.value console.log(typeof range1.value) ketebalan. style.transform = 'skala('+ (parseInt(range1.value)) +')'; console.log(thickness.style.transform ) lWidth = parseInt(range1.value*2);}// Fungsi menggambar garis function drawLine(x1,y1,x2,y2){ // ...context.lineWidth = lWidth; // ...}// Klik kuas kuas .onclick = fungsi(){ penghapusDiaktifkan = false; sikat.kelasList.tambahkan('aktif'); penghapus.kelasList.hapus('aktif'); Kotak pop-up console.log('pop') penDetail.classList.add('active'); }else{ penDetail.classList.remove('active');8. Menerapkan fungsi mengubah warna kuas
Ide implementasinya mirip dengan mengubah warna latar belakang papan gambar .
biarkan aColorBtn = document.getElementsByClassName(item warna);getColor();function getColor(){ for (biarkan i = 0; i < aColorBtn.length; i++) { aColorBtn[i].onclick = function () { untuk ( misalkan i = 0; i < aColorBtn.panjang; aColorBtn[i].classList.remove(aktif); this.classList.add(aktif); activeColor = this.style.backgroundColor; ctx.fillStyle = activeColor;9. Menerapkan fungsi undo dan redo perubahan
Ide implementasi:
canvasHistory setiap kali operasi menggambar selesai (gunakan metode kanvas toDataURL() untuk menghasilkan snapshot, yang menghasilkan gambar base64);canvasHistory menggunakan metode kanvas drawImage() ; biarkan undo = document.getElementById(undo);let redo = document.getElementById(redo);// ...canvas.onmouseup = function(){ painting = false; canvasDraw();}biarkan canvasHistory = [];biarkan melangkah = -1; // Fungsi metode menggambar canvasDraw(){ langkah++; if(langkah < canvasHistory.length){ canvasHistory.length = langkah; Tambahkan undian baru ke riwayat canvasHistory.push(canvas.toDataURL());}//Batalkan metode function canvasUndo(){ if(step > 0){ step--; .width,canvas.height); biarkan canvasPic = Gambar baru(); canvasPic.src = canvasHistory[langkah]; ctx.drawImage(canvasPic, 0, 0); } undo.classList.add('aktif'); }else{ undo.classList.remove('aktif'); / Ulangi fungsi metode canvasRedo(){ if(langkah < canvasHistory.length - 1){ langkah++; biarkan canvasPic = new Image(); canvasHistory[langkah]; canvasPic.onload = fungsi () { // ctx.clearRect(0,0,canvas.width,canvas.height); 'aktif'); }else { redo.classList.remove('aktif') alert('Sudah ada catatan terbaru'); }}batalkan.onclick = function(){ canvasUndo();}redo.onclick = function(){ canvasRedo();}10. Kompatibel dengan terminal seluler
Ide implementasi:
true , event touch digunakan; false , event mouse digunakan // ...if (document.body.ontouchstart !== tidak terdefinisi) { // Gunakan event sentuh anvas.ontouchstart = function (e) { // Mulai menyentuh} canvas.ontouchmove = function (e) { // Mulai menggeser } canvas.ontouchend = function () { // Akhir dari geser }}else{ // Gunakan event mouse // ... } // ... 4. Menginjak-injak jebakan Masalah 1: Saat Anda mengubah jendela browser di komputer Anda, papan gambar tidak akan beradaptasi.Larutan:
Dalam pemrosesan event respon onresize, parameter ukuran halaman yang diperoleh adalah parameter yang diubah.
Saat ukuran jendela berubah, atur ulang lebar dan tinggi kanvas. Sederhananya, setelah jendela berubah, tetapkan ulang canvas.width dan canvas.height.
// Ingatlah untuk menjalankan fungsi autoSetSize function autoSetSize(){ canvasSetSize(); // Saat menjalankan fungsi ini, lebar dan tinggi kanvas akan disetel terlebih dahulu function canvasSetSize(){ let pageWidth = document.documentElement.clientWidth; pageHeight = dokumen.documentElement.clientHeight; kanvas.lebar = lebar halaman; kanvas.tinggi = tinggi halaman } // Setelah ukuran jendela berubah, event resize akan dipicu untuk mengatur ulang lebar dan tinggi jendela kanvas.onresize = function(){ canvasSetSize(); Pertanyaan 2: Jika lebar garis yang ditarik relatif kecil, tidak masalah, tetapi jika lebih tebal, akan timbul masalah.Solusi: Lihat dokumentasinya dan cari tahu caranya. Anda hanya perlu memodifikasi kode untuk menggambar garis .
// Fungsi menggambar garis function drawLine(x1,y1,x2,y2){ konteks.beginPath(); konteks.lineWidth = lWidth; //-----Tambahkan----- // Mengatur gaya akhir garis. konteks.lineCap = bulat; // Mengatur gaya persimpangan antar baris konteks.lineJoin = bulat; //-----Gabung----- konteks.moveTo(x1,y1); y2); konteks.stroke(); konteks.closePath();} Pertanyaan 3: Bagaimana cara mendapatkan sassafras karet bulat?Larutan:
Di API kanvas, metode clearRect dapat menghapus piksel, tetapi metode clearRect menghapus area persegi panjang, karena kebanyakan penghapus terbiasa berbentuk bulat, sehingga fungsi kuat dari area kliping diperkenalkan, yaitu metode klip. Penggunaannya sangat sederhana:
ctx.save()ctx.beginPath()ctx.arc(x2,y2,a,0,2*Math.PI);ctx.clip()ctx.clearRect(0,0,canvas.width,canvas.height) ;ctx.restore();
Kode di atas merealisasikan penghapusan area melingkar, yaitu pertama mengimplementasikan jalur melingkar, kemudian menggunakan jalur ini sebagai area kliping, dan kemudian menghapus piksel. Satu hal yang perlu diperhatikan adalah Anda perlu menyimpan lingkungan gambar terlebih dahulu, dan mengatur ulang lingkungan gambar setelah menghapus piksel. Jika Anda tidak mengatur ulang, gambar selanjutnya akan terbatas pada area kliping tersebut.
Pertanyaan 4: Bagaimana agar kompatibel dengan terminal seluler?1.Tambahkan tag meta
Karena browser awalnya akan menskalakan halaman ketika ditampilkan di ponsel, kita dapat mengatur atribut meta viewport di tag meta untuk memberi tahu browser agar tidak menskalakan halaman. Lebar halaman = lebar layar perangkat pengguna
<nama meta=area pandang content=width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0/>/*Page width=Mobile width:width=device-width Pengguna tidak dapat menskalakan : dapat diskalakan pengguna=tanpa penskalaan: skala awal=1 penskalaan maksimum: skala maksimum=1,0 penskalaan minimum: skala minimum=1,0*/
2. Hampir semua event sentuh digunakan di sisi seluler, berbeda dengan sisi PC.
Karena sisi seluler menggunakan peristiwa sentuh, atribut H5 touchstart/touchmove/touchend digunakan. Namun, sisi PC hanya mendukung peristiwa mouse, sehingga diperlukan deteksi fitur.
Dalam event touch , koordinat diperoleh melalui .touches[0].clientX dan .touches[0].clientY , yang harus dibedakan dari event mouse .
Yah, itu bukan masalah besar. Hanya saja saya melewatkan menulis konteks.beginPath(); dan saya menghabiskan beberapa waktu untuk memecahkan bug di dalamnya komentar tidak terstandarisasi; pemrogramannya tidak terstandarisasi, dan rekan saya memiliki dua baris. Air mata, lebih baik beroperasi sesuai dengan spesifikasi pengoperasian yang terdokumentasi, baunya enak sekali! ! !
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.