我有一个 HTML5 Canvas。我正在使用KineticJS(KonvaJS) http://konvajs.github.io/画布库。在空白画布上,我绘制了如下图所示的图像。现在我想创建一个圆形形状,可用于擦除图像的某些部分。图中的红色圆圈就是橡皮擦。
如何删除 HTML5 Canvas 上图像的部分内容?
您可以使用合成来“擦除”像素。
具体你用destination-out
合成。
KineticJS 不支持合成,但您仍然有几个选择:
(注:KineticJS已经变成了KonvaJS,我还没有检查KonvaJs是否支持合成。如果现在支持,只需使用destination-out
在 KonvaJS 内合成)
选项#1:使用原生画布元素作为 Kinetic.Image 源
使用以下命令创建内存中的 html5 画布var c=document.createElement
,
将画布大小调整为图像大小,
drawImage
你的图像到画布上,
-
创建一个Kinetic.Image
并将其图像属性设置为对本机画布的引用。 Kinetic.Image 将显示在本机画布上绘制的任何内容。
var kImage=new Kinetic.Image({
...
image:c,
...
-
设置画布合成以使新绘图“擦除”现有像素:
c.globalCompositeOperation='destination-out';
监听圆形橡皮擦上的拖动事件。使用这些事件在画布上绘制一个圆圈,该圆圈的移动方式与动力学圆圈橡皮擦的移动方式相同。由于画布的合成设置为“擦除”,因此画布上新绘制的圆圈将擦除画布上的图像。
您的 Kinetic.Image 准确反映了其画布源 (var c),因此您的 Kinetic.Image 还将显示响应于 Kinetic 圆圈橡皮擦运动而被擦除的图像。
选项#2:使用 Kinetic.Shape
您可以通过在单独的图层上创建 Kinetic.Shape 并使用以下命令获取对本机画布上下文的引用来执行与选项 1 相同的操作:
var ctx = myShapeLayer.getContext()._context;
这是一个较弱的选项,因为 KineticJS 会重新绘制形状 - 导致您的擦除被撤消。因此,您必须执行额外的步骤来保存所有圆形橡皮擦的动作并重播这些动作(在drawFunc
)重新进行擦除。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)