JCanvas: Menghapus Canvas tidak menghapus elemen yang dapat diseret

Saya ingin menyempurnakan aplikasi menggambar yang saya buat dengan JS dengan memungkinkan pengguna menggambar berbagai bentuk. Saya ingin memudahkan pengguna dengan mengizinkan mereka menyeret bentuk-bentuk ini. Jadi saya menggunakan jCanvas, karena ia menawarkan cara sederhana untuk menyeret bentuk:

$("#can").drawRect({
   draggable: true,
   fillStyle: "#000",
   width: 100, height: 100,
   x: 100,
   y: 100,
});

Masalahnya, saya memerlukan fungsi untuk menghapusnya lagi. Jadi saya membuat skrip ini:

<script>
   $("#can").drawRect({
      draggable: true,
      fillStyle: "#000",
      width: 100, height: 100,
      x: 100,
      y: 100,
   });

   $("#erase").click(function () {
      $("#can").clearCanvas();
   });
</script>
<canvas id="can" width="200px" height="150px"></canvas>
<button id="erase">Clear Canvas</button>

Tapi ini tidak berhasil. Ketika saya menghapus, semuanya terhapus pada awalnya, tetapi ketika saya mencoba menggambar di Kanvas, bentuknya muncul lagi.

Saya memeriksa kode jCanvas, dan tampaknya ia hanya menggambar banyak persegi panjang saat diseret, dan membersihkannya untuk menciptakan ilusi bentuk yang sedang diseret. Namun ketika ini terjadi, Kanvas yang telah dibersihkan akan menyusut kembali dan bentuknya terlihat kembali.

Apakah ada cara untuk menghapus bentuk itu selamanya? Atau apakah saya harus memuat ulang halaman agar bisa berfungsi?

Terima kasih sebelumnya


person nicom    schedule 22.02.2021    source sumber
comment
Ini semua kodemu? Apakah Anda menggunakan Lapisan?   -  person Luis Gustavo Araujo    schedule 22.02.2021
comment
Ya, itulah keseluruhan kode saya. Saya tidak menggunakan lapisan karena saya tidak tahu cara kerjanya.   -  person nicom    schedule 22.02.2021


Jawaban (1)


Anda tidak menggunakan Layer secara eksplisit, namun saat Anda mengatur properti drag, Canvas akan membuat layer:

Lapisan dapat dibuat dapat diseret menggunakan properti yang dapat diseret.

https://projects.calebevans.me/jcanvas/docs/draggableLayers/

Jadi, clearCanvas tidak cocok:

Metode ini tidak dimaksudkan untuk digunakan jika Anda menggunakan jCanvas Layer API, karena API menangani penggambaran ulang untuk Anda dalam banyak kasus, dan juga jika Anda mencoba menghapus kanvas. lapisan Anda pada akhirnya akan digambar ulang oleh jCanvas jika dianggap perlu.

Anda perlu menghapus lapisan:

$('canvas').removeLayer(0);

or

$('canvas').removeLayers();

Lihat opsi lainnya di Dokumen: https://projects.calebevans.me/jcanvas/docs/manipulateLayers/

Jika ini membantu Anda, periksa jawaban saya sebagai benar atau pilih!

person Luis Gustavo Araujo    schedule 22.02.2021