javascript - JCanvas:擦除画布不会擦除可拖动元素
问题描述
我想通过允许用户绘制各种形状来增强我用 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>
但这不起作用。当我擦除时,它首先会清除所有内容,但是当我尝试在画布上绘图时,形状又出现了。
我检查了 jCanvas 的代码,它似乎只是在拖动时绘制了大量的矩形,并清除它们以创建被拖动形状的错觉。但是当这种情况发生时,清除的 Canvas 会自行撤退,并且形状再次可见。
有没有办法永久清除形状?还是我必须重新加载页面才能正常工作?
提前致谢
解决方案
您没有明确使用图层,但是当您设置拖动属性时,画布会创建一个图层:
可以使用 draggable 属性使图层可拖动。
https://projects.calebevans.me/jcanvas/docs/draggableLayers/
所以,clearCanvas 不适合:
如果您使用的是 jCanvas Layer API,则不应使用此方法,因为该 API 在许多情况下会为您处理重绘,因此如果您尝试清除画布。当它认为有必要时,你的图层最终会被 jCanvas 重绘。
您需要删除图层:
$('canvas').removeLayer(0);
或者
$('canvas').removeLayers();
在 Doc 中查看更多选项:https ://projects.calebevans.me/jcanvas/docs/manipulateLayers/
如果这对您有帮助,请检查我的答案是否正确或投票!
推荐阅读
- c# - 如何在 asp.net mvc 中按浏览器类型显示视图?
- python - Gimp python-fu:选择两层
- angular - WebStorm 中的 Auth0 'Unresolved Type WebAuth'
- python - 在 Python 中计算大分数?
- git - 使用 git 推送新版本而不丢失旧版本
- android - 如何启用在 TabBarView 父级中禁用的 Listview 滚动
- sql - 从 VBA 执行存储过程时出现错误“过程或函数需要未传递的参数 @empid”
- design-patterns - 如何消除代码中的 switch-case?
- angularjs - 使用 ASP.NET MVC 在 AngularJS 应用程序中缩小 javascript 文件时无法实例化模块
- python-3.x - Pygame:用颜色填充文本的透明区域