Menggunakan jalur SVG di kanvas untuk memindahkan objek

Jika untuk menghidupkan objek di kanvas (dan tidak hanya), Anda perlu memindahkannya di beberapa jalur yang diinginkan, bahkan mungkin beberapa yang dapat dipilih secara acak atau berurutan, maka ini dapat dilakukan dengan menggunakan jalur svg. Mari kita mulai dengan memulai kotak sederhana namun hijau di sepanjang jalan.



Untuk melakukan ini, kami akan membuat atau meminjam svg, dengan satu jalur atau lebih.

Buat elemen menggunakan fungsi document.createElementNS . MDN memberi tahu kami bahwa metode ini memiliki dukungan dasar di semua browser modern. Kemudian tambahkan path ke elemen yang dibuat.

let path = document.createElementNS("http://www.w3.org/2000/svg", "path"); path.setAttribute('d', 'M148.185,118.975c0,0-92.592,39.507-80.247,79.013,s79.012,143.21,129.629,124.691s64.198-113.856,120.988-100.755s118.518,30.384,116.049,109.397s-82.715,118.519-97.53,201.235,s-92.593,139.505,0,159.259'); 

Di sini, di dalam atribut, lintasan pertama yang menarik dari beberapa file svg diperkenalkan, metode salin-tempel. Tentu saja, ini bukan satu-satunya dan, apalagi, bukan cara yang paling nyaman, tetapi cukup jelas untuk digunakan dalam contoh pertama.

Sekarang dalam loop, kita akan mendapatkan koordinat titik arah dan menetapkannya ke objek kita. Dua metode SVGGeometryElement sudah cukup untuk ini :

 path.getTotalLength() 

mengembalikan nilai terhitung dari panjang jalur total dan

  path.getPointAtLength(index) 

Dibutuhkan argumen float, dan mengembalikan objek SVGPoint yang memiliki koordinat x dan y yang menarik bagi kami. Jika nilai argumen kurang dari nol atau lebih besar dari panjang jalur, masing-masing poin pertama atau terakhir, akan dikembalikan sebagai hasilnya.

Saat memperbarui bingkai, kami mendapatkan titik dan menggunakan koordinatnya untuk pergerakan.

→ Kode contoh lengkap pada codepen

Tapi, Anda bisa menggunakan opsi yang lebih menarik untuk memindahkan objek di sepanjang koordinat beberapa jalur, misalnya ini:



Sekali lagi, ambil file svg dengan beberapa jalur. Yang digunakan dalam contoh dibuat di editor Inscape. Sekarang Anda perlu mendapatkan path ini, ini dimungkinkan melalui parsing objek atau, jika svg diterima sebagai file teks, maka fungsi selanjutnya, menggunakan ekspresi reguler, Anda bisa mendapatkannya sebagai string.

 extractPathsfromSvg: function(svg){ let results = svg.match(/<path\b([\s\S]*?)><\/path>/g); let paths = []; let len = results.length; for(let i = 0; i < len; i++){ let str = results[i]; let data = str.match(/[^\w]d="([\s\S]*?)"/); paths.push(data[1]); } return paths; } 

Setelah membuat larik lintasan, tetap mengekstraknya secara bergantian dan memprosesnya dengan cara yang sama dengan satu-satunya lintasan untuk pergerakan kuadrat. mendapatkan efek yang menarik.
Lihat kode lengkap untuk contoh di bawah ini.

Untuk menambahkan lebih banyak kontrol saat memindahkan objek di sepanjang koordinat jalur, Anda bisa menggunakan kembar. Untuk kasus-kasus uji, saya mengambil perpustakaan GreenSock pertama yang menarik perhatian saya, tetapi ternyata bisa menjadi yang lain.

Dalam kasus pertama, ketika kuadrat bergerak di sepanjang satu-satunya jalur, buat penolong objek perantara, dan meneruskannya untuk membuat tween.

 var helper = {progress: 0} helper.update = function(value){ point = path.getPointAtLength(totalLength * helper.progress); x = point.x; y = point.y; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, x, y ); } var tw = new TweenLite.to(helper, 5, {progress: 0, }); tw.eventCallback("onUpdate", helper.update); 

Anda dapat melihat pergerakan alun-alun di sepanjang jalan menggunakan tween, pada contoh pertama pada codepen, dengan mencentang menggunakan tween.

Saat bergerak di beberapa jalur, kami melanjutkan sebagai berikut. Seperti sebelumnya, buat objek pembantu dengan properti progres. Kami menghitung panjang total semua jalur, dan menugaskannya untuk memprosesnya. Mari kita buat variabel yang dilalui di mana lintasan yang sudah dibahas akan diringkas.

Untuk mendapatkan titik di jalur saat ini, kurangi dari kemajuan helper., yang berubah dalam tween, jalur yang sudah ditempuh dilalui. Kami menggunakan koordinat titik seperti biasa.

 var traversed = 0; helper.progress = totalLenghtAllPath; helper.update = function() { var localPoint = helper.progress - traversed; if(localPoint > curPath.getTotalLength()){ traversed += curPath.getTotalLength(); curPath = paths[next()]; if(curPath){ return false; } localPoint = helper.progress - traversed; } /*       */ } var tw = TweenLite.to( helper, 25, {progress: totalLenghtAllPath, ease: Power2.easeOut } ); tw.eventCallback("onUpdate", helper.update); 

Kode disederhanakan, kode lengkapnya ada di sini: