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/

如果这对您有帮助，请检查我的答案是否正确或投票！