JCanvas：擦除 Canvas 不会擦除可拖动元素

Question

我想通过允许用户绘制各种形状来增强我用 JS 构建的绘图应用程序。我想通过允许用户拖动这些形状来方便用户。所以我使用了 jCanvas，因为它提供了一种简单的拖动形状的方法：

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

问题是，我需要一个功能来再次擦除它。所以我做了这个脚本：

<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 创建一个图层：

Layers can be made draggable using the draggable property.

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

所以，clearCanvas不适合：

This method is not meant to be used if you are using the jCanvas Layer API, because the API handles redrawing for you in many cases, and so if you try to clear the canvas. you layers will eventually be redrawn by jCanvas when it deems necessary.

您需要删除图层：

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

或

$('canvas').removeLayers();

在文档中查看更多选项：https://projects.calebevans.me/jcanvas/docs/manipulateLayers/

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

JCanvas：擦除 Canvas 不会擦除可拖动元素

JCanvas: Erasing Canvas doesn't erase draggable elements

javascript

jquery

jcanvas

html5-canvas