JCanvas:擦除画布不会擦除可拖动元素

Posted

技术标签:

【中文标题】JCanvas:擦除画布不会擦除可拖动元素【英文标题】:JCanvas: Erasing Canvas doesn't erase draggable elements 【发布时间】:2021-05-24 13:30:18 【问题描述】:

我想通过允许用户绘制各种形状来增强我用 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"  ></canvas>
<button id="erase">Clear Canvas</button>

但这不起作用。当我擦除时,它首先会清除所有内容,但是当我尝试在 Canvas 上绘制时,形状又出现了。

我检查了 jCanvas 的代码,它似乎只是在拖动时绘制了大量的矩形,并清除它们以创建被拖动形状的错觉。但是当这种情况发生时,被清除的 Canvas 会自行撤退,并且形状再次可见。

有没有办法永久清除形状?还是我必须重新加载页面才能正常工作?

提前致谢

【问题讨论】:

这就是你的全部代码?你在使用图层吗? 是的,这就是我的全部代码。我不使用图层,因为我无法真正弄清楚它们是如何工作的。 【参考方案1】:

您没有明确使用图层,但是当您设置拖动属性时,画布会创建一个图层:

可以使用 draggable 属性使图层可拖动。

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

所以,clearCanvas 不适合:

如果您正在使用 jCanvas Layer API,则不应使用此方法,因为该 API 在许多情况下会为您处理重绘,因此如果您尝试清除画布。 jCanvas 认为必要时最终会重绘您的图层

你需要移除图层:

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

$('canvas').removeLayers();

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

如果这对你有帮助,请检查我的答案是否正确或投票!

【讨论】:

以上是关于JCanvas:擦除画布不会擦除可拖动元素的主要内容,如果未能解决你的问题,请参考以下文章

我怎样才能让我在 Canvas 中的两个图像不会相互擦除?

画布中的文本被下面的视频画布擦除

在画布上绘制视图被拖动的任何位置

当 VoiceOver 运行时,如何实现像 Podcast 应用程序这样的可拖动擦除器?

unity擦除原理

在fabric js中擦除iText时显示光标线代替擦除的字符