SVG Paths

Jika Anda ingin memperindah Lightscript, menambahkan latar belakang bisa menjadi cara yang menarik untuk melakukannya. Ada beberapa cara berbeda untuk mencapai ini, tetapi yang paling mudah dan paling efisien adalah menggunakan SVG path.

SVG path dapat dibuat dengan relatif mudah menggunakan Adobe Illustrator. Sebaiknya mulai dengan gambar PNG biasa yang ingin Anda sederhanakan menjadi SVG path. Setelah menemukan gambar latar belakang, buat proyek Illustrator baru dengan mengklik New dan memilih preset Web Large.

Selanjutnya, impor gambar referensi Anda ke artboard baru dengan mengklik File -> Place di toolbar dan kemudian memilih gambar Anda di popup yang muncul.

Seringkali, artboard akan jauh lebih besar dari gambar yang Anda impor. Untuk memperbaikinya, klik Object -> Artboards -> Fit to Artwork Bounds.

Selanjutnya, pilih bagian gambar yang ingin Anda isolasi menjadi path. Gambar SVG terdiri dari poligon yang didefinisikan oleh outline path mereka. Poligon-poligon ini kemudian dapat diisi dengan warna atau gradien menggunakan JS Canvas API.

Dalam contoh ini, saya akan menelusuri outline kolam dan mengisinya dengan warna solid. Untuk memulai, pilih pen tool dengan menekan P pada keyboard Anda. Klik titik di sepanjang outline bentuk yang ingin Anda telusuri, kemudian mulai tambahkan lebih banyak titik hingga Anda membuat path yang kontinu dengan bentuk dan ukuran yang sama dengan bentuk yang Anda pilih. Warna bentuk ini tidak penting, karena Anda akan menetapkan warna secara terpisah dalam kode JavaScript.

Setelah Anda puas dengan path Anda, ekspor dengan mengklik File -> Export -> Export As. Pastikan Anda memilih tipe file SVG.

Di jendela berikutnya yang terbuka, pastikan Image diatur ke Link, lalu klik opsi Show Code.

Di jendela Notepad yang terbuka, temukan tag <polygon> dan salin seluruh atribut points. Ini harus berupa string angka yang panjang. Selanjutnya, klik Cancel, karena Anda sekarang memiliki semua data yang Anda butuhkan.

Untuk menggambar gambar berbasis path di canvas efek, deklarasikan dua konstanta baru. Pertama, deklarasikan konstanta yang diatur ke string yang Anda salin sebelumnya.

Tips

Misalnya, 351 396.5 440 435.5 501.84 akan menjadi M351 396.5 440 435.5 501.84.

Sekarang, buat path baru dengan new Path2D(path) di mana path adalah nama konstanta pertama Anda.

Gambar ini sekarang dapat digambar dengan memanggil ctx.fill(path2d) di mana path2d adalah nama path yang Anda deklarasikan di langkah sebelumnya.

Untuk menetapkan warna bentuk, panggil ctx.fillStyle(color) sebelum menggambar gambar. Fungsi ini menerima kode warna hex, nama warna CSS, fungsi warna CSS, dan gradien sebagai argumen.

Anda juga dapat menggunakan array lengkap efek transformasi canvas seperti scale dan translate. Untuk memastikan transformasi hanya berlaku pada gambar saat ini, gunakan ctx.setTransform(1,0,0,1,0,0) setelah setiap layer digambar.

Contoh kode berikut menunjukkan cara menggambar gambar SVG path sederhana. Teknik ini dapat diulang sebanyak yang Anda inginkan untuk menggambar latar belakang yang kompleks.

var c = document.getElementById("exCanvas");
var ctx = c.getContext("2d");

// Data copied from Illustrator. Make sure the first character is M.
const pondData = "M351 396.5 440 435.5 501.84 435.5 539.37 435.5 584.5 415.5 581.5 396.5 570 385.5 581.5 383.13 546 370.5 502 365.5 480.5 384.66 457.42 365.5 443.63 365.5 432.14 365.5 413 380.5 408 390.5 371 387.5 351 396.5";
// Create a new Path2D from the data.
const pondPath = new Path2D(pondData);

function update() {

  ctx.scale(0.3,0.3); // Optional canvas transformation. You can also use ctx.translate(x,y) to move the location of the new path.
  ctx.fillStyle = "blue"; // Set color of path. You can also use gradients here.
  ctx.fill(pondPath); // Draw the path.
  ctx.setTransform(1, 0, 0, 1, 0, 0); // Reset transformation so it only affects this path.

  window.requestAnimationFrame(update);
}

window.requestAnimationFrame(update);

Kode di atas seharusnya menghasilkan hasil ini: