Buat digital etch sketsa

Dalam tutorial ini, kami mengambil mainan gambar mekanis etsa sketsa sebagai inspirasi dan upaya untuk mengimplementasikan fitur-fitur ini untuk perangkat modern, dengan teknologi web. Menggunakan kanvas (bernama), kami pertama kali fokus pada tablet, yang mirip dengan mainan otentik. Kita dapat memanfaatkan peristiwa sentuh untuk mengontrol panggilan, dan peristiwa gerak perangkat untuk menghapus konten. Tidak meninggalkan ponsel, kami juga akan mengeksplorasi cara menggunakan Websockets untuk meningkatkan kemungkinan dengan memecah kontrol dan area gambar.

01. Dapatkan aset

Tutorial ini akan menggunakan node.js. Sebelum kita mulai, pergi ke FileSilo. , Pilih barang gratis dan konten gratis di sebelah tutorial - di sini Anda dapat mengunduh aset yang Anda butuhkan untuk tutorial. Kemudian jalankan perintah di bawah ini, yang akan menginstal dependensi dan meluncurkan server. Kami menggunakan node untuk membuat localhost. , dan itu juga akan melayani kami nanti untuk Websockets.

 NPM Instal
Node Server / Index.js 

02. Gunakan fungsi Draw ()

Di main.js. , itu seri() Fungsi akan menjadi titik pusat dari aplikasi kami. Kami menggunakan kanvas untuk menggambar garis antara dua titik; Asal (x1, y1), berada di mana kita terakhir meninggalkan gambar kita, dan tujuan (x2, y2), titik baru yang ingin kita jangkau. Kita sekarang perlu memicu fungsi ini untuk mengamati segala bentuk gambar.

 Fungsi Draw (X1, Y1, X2, Y2) {
  // konteks diatur secara global dalam init ()
  konteks.beginpath ();
  konteks.moveto (x1, y1);
  konteks.Lineto (x2, y2);
  konteks.stroke ();
} 

03. Menerapkan Acara Keyboard

Sebelum kami menerapkan Panggilan, mari cepat tambahkan pendengar keyboard yang dapat memicu fungsi undian kami. Anda sudah diberi perbedaan Keycodes. dalam contoh, tetapi Anda perlu mengubah pendengar sedikit untuk memicu seri() fungsi yang kami definisikan sebelumnya. Sekarang Refresh browser Anda dan lihat apa yang dapat Anda gambar dengan tombol panah.

 DOCUMEN.ADDEVENTListener ('Keydown', Fungsi (E) {
  / * Switch Keycode Goes Here * /
  menggambar (math.floor (prev_horizontal), math.floor (prev_vertical), math.floor (horizontal), matematika (vertikal));
  prev_vertical = vertikal;
  prev_horizontal = horizontal;
}); 

04. Ubah ukuran kanvas

Anda mungkin telah memperhatikan bahwa elemen kanvas kami belum memiliki ukuran yang ditugaskan untuknya. Untuk papan gambar kami, kami akan menginginkan ruang yang lebih besar, bahkan mungkin seluruh jendela. Kode di bawah ini menangani acara urutkan, tetapi jangan lupa untuk menelepon AdjustFrame () di init () demikian juga.

 Fungsi AdjustFrame () {
  // kanvas didefinisikan secara global dalam init ()
  kanvas.width = window.innerwidth;
  kanvas.height = window.inneright;
}
window.addeventlistener ('Ubah Ukuran', AdjustFrame); 

05. Tambahkan bingkai

Kami ingin aplikasi terlihat seperti mainan asli sebanyak mungkin, jadi kami ingin menambahkan bingkai di sekitar area gambar. Untuk melakukannya, kita dapat mendefinisikan nilai margin dan mengubah CSS untuk #sketsa untuk margin: 20px otomatis; Untuk memusatkan kanvas secara horizontal dan menjaga ruang yang lebih besar di bagian bawah untuk dial.

 var framemarginvertal = 122;
var framemarginhorizontal = 62;
Fungsi AdjustFrame () {
  canvas.width = window.innerwidth - framemarginhorizontal;
  Canvas.height = window.innerHeight - framemarginvertical;
} 

06. Buat Dials

Kami sudah memberi Anda CSS untuk panggilan masuk publik / css / styles.css , Jadi jangan ragu untuk melihatnya. Selanjutnya, tambahkan dua & lt; div & gt; Tag di bawah & lt; kanvas & gt; Dalam file HTML, seperti yang dijelaskan di bawah ini. Sebagai konvensi, kami akan menggunakan dial kiri untuk gambar horizontal, dan hak untuk vertikal. Kami juga menambahkan variabel baru ke init () berfungsi untuk mempersiapkan acara sentuhan.

 & lt; div id = "Dialhorizontal" Class = "Dial" & gt; & lt; / div & gt;
& lt; div id = "Dialvertical" Class = "Dial" & gt; & lt; / div & gt; 

 var targetleft = document.getelementbyid ('dialhorizontal');
var regionleft = baru zingtouch.region (targetleft);
var targetright = document.getelementbyid ('dialvertical');
var regionright = new zingtouch.region (targetright); 

07. Gunakan Zingtouch.

ZingTouch adalah perpustakaan JavaScript yang mampu mendeteksi berbagai gerakan sentuh, dan juga akan menangani acara mouse. Ini disediakan untuk Anda di / publik / lib / folder, saat kami menggunakannya untuk mengontrol panggilan kami. Di bawah ini adalah implementasi untuk kontrol kiri; Anda harus mereplikasi dan mengubahnya untuk sisi lain.

 Regionleft.bind (TargetLeft, 'Rotate', Function (e) {
  if (e.detail.distanceFromLast & lt; 0) {
  --horisontal;
  } lain {
  horizontal;
  }
  anglehorizontal + = e.detail.DistanceFromLast;
  targetleft.style.transform = 'Putar (' + anglehorizontal + 'deg)';
  menggambar (math.floor (prev_horizontal), math.floor (prev_vertical), math.floor (horizontal), math.flox (prev_vertical));
  prev_horizontal = horizontal;
}); 

08. Menerapkan Batas Dial

Untuk memblokir garis-garis keluar dari layar, kami menggunakan bisa menggambar() fungsi, yang mengembalikan boolean. Kami meneruskannya ke arah, baik 'horizontal' atau 'vertikal', dan nilai variabel horizontal atau vertikal. Kami menyebut fungsi ini dalam pendengar 'putar' dari kedua panggilan, dan hanya jika 'benar' apakah kita menambah sudut dan menelepon seri() fungsi.

 Fungsi Candraw (Arah, Nilai) {
  var max = (arah === 'horizontal')? (kanvas.width) :( kanvas.height);
  Jika (nilai & lt; 2 || nilai & gt; max - 2) {
  kembali salah;
  }
  kembali benar;
} 

09. Hindari masalah dial

Dengan batas yang baru saja kita laksanakan, ada kemungkinan dial mungkin terjebak pada satu ujung jika nilainya melebihi batas, bahkan dengan titik desimal. Untuk menghindari situasi ini, kita harus menangani kasus di mana bisa menggambar() salah dan mengatur ulang nilai ke yang sebelumnya valid, seperti yang ditunjukkan di sini untuk pengontrol horizontal:

 Jika (candraw ('horizontal', horizontal)) {
  anglehorizontal + = e.detail.DistanceFromLast;
  targetleft.style.transform = 'Putar (' + anglehorizontal + 'deg)';
  menggambar (math.floor (prev_horizontal), math.floor (prev_vertical), math.floor (horizontal), math.flox (prev_vertical));
  prev_horizontal = horizontal;
} lain {
  horizontal = prev_horizontal;
} 

10. Dapatkan papan gambar di tablet Anda

Itu selalu disarankan untuk menguji pada perangkat bertarget Anda sedini mungkin. Aplikasi kami sekarang dalam kondisi yang baik, dan dapat menanggapi peristiwa sentuh. Ikuti langkah-langkah untuk mengakses localhost dari jarak jauh untuk mendapatkan papan gambar di tablet Anda.

Selanjutnya, kami akan menggunakan Safari dan menu pengembangan untuk memeriksa aplikasi pada iPad. Untuk perangkat Android, gunakan Chrome: // Periksa .

11. Uji accelerometer

Hubungkan tablet Anda ke komputer Anda melalui USB dan periksa aplikasi menggunakan alat pengembang.

Dengan kode di bawah ini, Anda harus dapat melihat berbagai nilai akselerasi, saat Anda memindahkan perangkat Anda. Untuk mengatur ulang kanvas, kami telah memutuskan untuk mempertimbangkan akselerasi pada sumbu X selama 5, dan secara perlahan mengurangi opacity ( Eraserate. ).

 var menghapus = 1; / * Definisikan sebagai variabel global * /
window.addeventlistener ('deviceMotion', fungsi (acara) {
  konsol.log ('akselerasi ::', event.acceleration);
  if (event.acceleration.x & gt; 5) {
  menghapus - = math.abs (event.acceleration.x / 100);
  konsol.log ('hapus ::', menghapus);
  }
}); 

12. Kocok untuk menghapus

Kami telah melihat pada langkah sebelumnya cara memeriksa gerakan dan akselerasi. Kita sekarang perlu menelepon fadadrawing () ketika kondisi kami terpenuhi. Dalam hal ini, kami menggambar ulang salinan kanvas yang tepat dengan opacity yang berbeda.

Setel ulang globalalpha ke 1 in seri() dan mengatur globalcompositeoperation. kembali ke sumber.

 Fungsi fadadrawing () {
  Jika (menghapus & lt; 0) {
  konteks.clearrek (0, 0, kanvas.width, kanvas.height);
  menghapus = 1;
  kembali;
  }
  konteks.globalalpha = menghapus;
  konteks.globalcompositoperation = 'salinan';
  konteks.drawimage (kanvas, 0, 0);
} 

13. membuatnya terlihat seperti kesepakatan nyata

Sejauh ini, aplikasi kami terlihat cukup hambar dan rata. Untuk memberikan kedalaman, kami akan menambahkan warna bingkai, bayangan di dalam bingkai dan sedikit volume pada dial. CSS untuk Shadows Dial sudah disediakan, tetapi Anda harus menambahkan dua elemen di ujung tubuh.

Lengkapi CSS untuk elemen yang disarankan di sini:

 & lt; div id = "dialshadowhorizontal" class = "shadow" & gt; & lt; / div & gt;
& lt; div id = "dialshadowvertical" class = "shadow" & gt; & lt; / div & gt; 

 Tubuh {
  latar belakang: # 09cbf7;
}
#sketch {
  box-shadow: 2px 2px 10px rgba (0, 0, 0, .25) inset;
} 

14. Gunakan WebSockets.

Pada awal tutorial ini, kami menyebutkan secara singkat menggunakan Websocket melalui server simpul kami. Sekarang Anda memiliki papan gambar mandiri untuk tablet, kami akan melihat membuatnya tersedia untuk ponsel Anda juga. Namun, ponsel mungkin terlalu kecil untuk menampilkan layar dan kontrol. Karena itu kami menggunakan soket untuk berkomunikasi antara layar ponsel dan komputer.

15. Mendeteksi ukuran perangkat

Dalam file HTML utama, ganti main.js. dengan ekstra.js. . Yang terakhir berisi semua yang telah kami lakukan sejauh ini, dengan modifikasi untuk menangani perangkat dan soket, yang akan kami periksa dalam langkah-langkah berikut. Memandang DetectDevice () - Metode ini sekarang dipanggil untuk memuat alih-alih init () dan akan memutuskan 'mode' mana yang harus ditangani untuk aplikasi.

Di bawah ini adalah kasus tertentu dari telepon yang terdeteksi:

 if (window.innerwidth & lt; 768) {
  soket = io.connect ();
  document.queryselector ('# sketsa'). Hapus ();
  var dials = document.queryselectoread ('. Panggil, .shadow');
  [] .Foreach.call (Dial, Function (item) {
  item.classlist.add ('besar');
  });
  iscontrols = true;
  framemarginvertical = 62;
  socket.emit ('siap', {'siap': 'kontrol'});
} 

16. Dari telepon ke komputer

Sepanjang ekstra.js. Anda akan melihat bit kode seperti socket.emit () atau socket.on () . Ini adalah emitor dan pendengar untuk kontrol (telepon) dan layar (komputer) kontrol kami. Setiap peristiwa yang dipancarkan perlu melalui server untuk didistribusikan kembali ke semua soket yang terhubung. Di Server \ index.js. Tambahkan beberapa pendengar lagi dalam fungsi 'koneksi' dan restart server simpul.

 socket.on ('Draw', Fungsi (Data) {
  io.sockets.emit ('Draw', data);
});
socket.on ('hapus', fungsi (data) {
  io.sockets.emit ('hapus', data);
});
socket.on ('AdjustFrame', fungsi (data) {
  screenwidth = data.screenwidth;
  ScreenHeight = data.ScreenHeight;
  io.sockets.emit ('AdjustFrame', data);
}); 

17. Perbaiki orientasi telepon

Kunjungi localhost di komputer Anda, sambil mengaksesnya dari jarak jauh dengan ponsel Anda (seperti yang Anda lakukan sebelumnya dari tablet Anda). Anda sekarang harus melihat garis yang ditarik di layar Anda saat memutar panggilan di ponsel Anda. Anda akan melihat, bagaimanapun, bahwa panggilan tidak pas dengan benar jika ponsel dalam mode potret.

Kami dapat memperbaikinya dengan beberapa CSS:

 @Media layar dan (orientasi: potret) {
  .dial.big # dialvertical, .shadow.big # dialshadowvertical {
  Kanan: Calc (50% - 75px);
  Bawah: 20px;
  TOP: AUTO;
  }
  .dial.big # dialhorizontal, .shadow.big # dialshadowhorizontal {
  Kiri: Calc (50% - 75px);
  TOP: 20px;
  }
} 

18. Buat mainan lebih realistis

Mari kita kembali ke versi tablet kami. Sayangnya, API getaran tidak tersedia di iOS, jadi kami tidak dapat menerapkan umpan balik haptic ketika panggilan diputar. Namun, dalam mainan asli, Anda dapat meninggalkan tanda sidik jari hitam sementara di layar jika Anda mendorongnya. Kami dapat menambahkan acara sentuh pada perangkat untuk mereplikasi fitur ini.

Tetapkan pendengar ini init () dan jelajahi fungsi yang mereka sebut:

 If (Type === 'All') {
  kanvas.addeventlistener ('touchstart', fungsi (e) {
  E.PreventDefault ();
  DrawFingerCrint (E.Layerx, E.Layery, Benar);
  });
  kanvas.addeventlistener ('touchend', fungsi (e) {
  hidefingerprint (e.layerx, e.layery);
  });
} 

19. Simpan salinan kanvas

Dalam drawfingerprint () Metode, sebelum kami melakukan hal lain, kami menyimpan salinan dari keadaan kanvas saat ini ke elemen tersembunyi yang kami gunakan untuk memulihkan gambar kami saat membersihkan cetak. Itu hanya terjadi pada sentuhan pertama, dan bukan pada panggilan selanjutnya yang meningkatkan ukuran cetak setiap 100ms.

 Fungsi DrawFingerCrint (XPO, YPO, Savecanvas) {
  / * Fungsi parsial, lihat ekstra.js * /
  If (Savecanvas) {
  hiddencanvas = dokumen.createtement ('kanvas');
  var hiddencontext = hiddencanvas.getcontext ('2d');
  hiddencanvas.width = kanvas.width;
  hiddencanvas.height = Canvas.height;
  hiddencontext.drawimage (kanvas, 0, 0);
  }
} 

20. Jalankan aplikasi offline

Anda sekarang dapat membuat aplikasi benar-benar mandiri dengan menyimpannya ke tablet Anda sebagai aplikasi layar beranda. Kami tidak akan dapat melakukan hal yang sama untuk telepon, karena memerlukan koneksi ke server. Di /publik , temukan file bernama sketsa.AppCache. dan ganti semua contoh 'localhost' oleh alamat IP Anda.

Sekarang, ubah HTML untuk dibaca sebagai berikut:

 & lt; html lang = "id" manifest = "sketsa.appcache" & gt; 

21. Simpan aplikasi

Sekarang kunjungi aplikasi lagi di tablet Anda dan pilih opsi Add to Home Screen. Ikon baru harus muncul di desktop Anda. Buka sekali sambil tetap terhubung ke localhost Anda dari jarak jauh. Cache manifes yang kami atur sebelumnya akan mengunduh semua file yang diperlukan untuk penggunaan offline di latar belakang. Putar Wi-fi dan buka aplikasi lagi. !

Artikel ini awalnya muncul di Majalah Desainer Web. masalah 263. Beli sini .

Baca lebih lajut:

• 15 API web yang belum pernah Anda dengar
• Panduan pemula untuk merancang animasi antarmuka
• Panduan untuk menulis CSS yang lebih baik