JCanvas：擦除 Canvas 不會擦除可拖動元素

Question

我想通過允許用戶繪制各種形狀來增強我用 JS 構建的繪圖應用程序。 我想通過允許用戶拖動這些形狀來方便用戶。 所以我使用了 jCanvas，因為它提供了一種簡單的拖動形狀的方法：

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

問題是，我需要一個 function 來再次擦除它。 所以我做了這個腳本：

<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>

但這不起作用。 當我擦除時，它首先清除了所有內容，但是當我嘗試在 Canvas 上繪圖時，形狀再次出現。

我檢查了 jCanvas 的代碼，它似乎只是在拖動時繪制了大量的矩形，並清除它們以創建被拖動形狀的錯覺。 但是當這種情況發生時，被清除的 Canvas 會自行后退，形狀再次可見。

有沒有辦法永久清除形狀？ 還是我必須重新加載頁面才能正常工作？

提前致謝

Answer 1

您沒有明確使用圖層，但是當您設置拖動屬性時，Canvas 創建一個圖層：

可以使用 draggable 屬性使圖層可拖動。

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

所以，clearCanvas 不適合：

如果您使用的是 jCanvas 層 API，則不應使用此方法，因為 API 在許多情況下會為您處理重繪，因此如果您嘗試清除 ZFCC790C72A86190DE1B549D0DDC6F55C。 當它認為有必要時，你的圖層最終會被 jCanvas 重繪。

您需要刪除圖層：

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

或者

$('canvas').removeLayers();

在文檔中查看更多選項： https://projects.calebevans.me/jcanvas/docs/manipulateLayers/

如果這對您有幫助，請檢查我的答案是否正確或投票！