Laluan SVG

Jika Anda ingin memeriahkan Lightscript, menambah latar belakang boleh menjadi cara yang menarik untuk melakukannya. Terdapat beberapa cara berbeza untuk mencapai ini, tetapi yang paling mudah dan paling cekap adalah menggunakan laluan SVG.

Laluan SVG boleh dicipta dengan agak mudah menggunakan Adobe Illustrator. Adalah terbaik untuk bermula dengan imej PNG biasa yang ingin Anda sederhanakan menjadi laluan SVG. Setelah Anda menemui imej latar belakang, cipta projek Illustrator baru dengan mengklik New dan memilih pratetap Web Large.

Seterusnya, import imej rujukan Anda ke dalam papan seni baru dengan mengklik File -> Place dalam bar alat dan kemudian memilih imej Anda dalam tetingkap timbul yang muncul.

Selalunya, papan seni akan lebih besar daripada imej yang Anda import. Untuk membetulkan ini, klik Object -> Artboards -> Fit to Artwork Bounds.

Seterusnya, pilih bahagian imej yang ingin Anda asingkan menjadi laluan. Imej SVG terdiri daripada poligon yang ditakrifkan oleh laluan garis besarnya. Poligon ini kemudian boleh diisi dengan warna atau kecerunan menggunakan JS Canvas API.

Dalam contoh ini, saya akan menjejaki garis besar kolam dan mengisinya dengan warna pepejal. Untuk memulakan, pilih alat pen dengan menekan P pada papan kekunci Anda. Klik titik di sepanjang garis besar bentuk yang ingin Anda jejaki, kemudian mula menambah lebih banyak titik sehingga Anda membuat laluan berterusan dengan bentuk dan saiz yang sama dengan bentuk yang Anda pilih. Warna bentuk ini tidak penting, kerana Anda akan menetapkan warna secara berasingan dalam kod JavaScript.

Setelah Anda berpuas hati dengan laluan Anda, eksport dengan mengklik File -> Export -> Export As. Pastikan Anda memilih jenis fail SVG.

Dalam tetingkap seterusnya yang terbuka, pastikan Image ditetapkan ke Link, kemudian klik pilihan Show Code.

Dalam tetingkap Notepad yang terbuka, cari tag <polygon> dan salin keseluruhan atribut points. Ini seharusnya merupakan rentetan panjang nombor. Seterusnya, klik Cancel, kerana Anda kini mempunyai semua data yang Anda perlukan.

Untuk melukis imej berasaskan laluan pada kanvas kesan, isytiharkan dua pemalar baru. Pertama, isytiharkan pemalar yang ditetapkan kepada rentetan yang Anda salin sebelumnya.

Tip

Sebagai contoh, 351 396.5 440 435.5 501.84 akan menjadi M351 396.5 440 435.5 501.84.

Sekarang, cipta laluan baru dengan new Path2D(path) di mana path adalah nama pemalar pertama Anda.

Imej ini kini boleh dilukis dengan memanggil ctx.fill(path2d) di mana path2d adalah nama laluan yang Anda isytiharkan dalam langkah sebelumnya.

Untuk menetapkan warna bentuk, panggil ctx.fillStyle(color) sebelum melukis imej. Fungsi ini menerima kod warna heksadesimal, nama warna CSS, fungsi warna CSS, dan kecerunan sebagai argumen.

Anda juga boleh menggunakan susunan penuh kesan transformasi kanvas seperti skala dan terjemah. Untuk memastikan transformasi hanya berlaku pada imej semasa, gunakan ctx.setTransform(1,0,0,1,0,0) selepas setiap lapisan dilukis.

Kod contoh berikut menunjukkan cara melukis imej laluan SVG yang mudah. Teknik ini boleh diulang sebanyak yang Anda mahu untuk melukis 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);

Kod di atas sepatutnya menghasilkan hasil ini: