Konva.js 实现图层擦除与蒙版效果的正确方法-js教程-PHP中文网

Konva.js 实现图层擦除与蒙版效果的正确方法

本文详解如何在 Konva.js 中通过 globalCompositeOperation（如 'destination-out'）在单一层内实现“擦除”或“蒙版”效果，避免多层叠加导致的合成异常，提升性能与可控性。

本文详解如何在 konva.js 中通过 `globalcompositeoperation`（如 `'destination-out'`）在单一层内实现“擦除”或“蒙版”效果，避免多层叠加导致的合成异常，提升性能与可控性。

在 Konva.js 中，直接对多个独立 Layer 进行像素级减法（如“用 drawingLayer 擦除 normalLayer”）是不可行的——因为 Konva 的 Layer 是渲染单元，彼此隔离，globalCompositeOperation 仅在同一 Layer 内部的图形之间生效，无法跨 Layer 作用。你当前代码中将图像、绘制笔迹、画笔预览分置于不同 Layer，虽逻辑清晰，却违背了 Canvas 合成机制的本质限制。

✅ 正确做法：统一使用单个 Layer，通过 Konva.Group 进行逻辑分组，并利用 Canvas 原生合成模式控制绘制行为。

✅ 推荐结构（单层 + 分组）

const layer = new Konva.Layer();
stage.add(layer);

// Group 1: 底图（被擦除对象）
const baseGroup = new Konva.Group();
layer.add(baseGroup);
loadImage(getLightMask, baseGroup, false); // 加载到 group 而非 layer

// Group 2: 绘制遮罩/擦除路径（覆盖在底图上）
const drawGroup = new Konva.Group();
layer.add(drawGroup);

✅ 关键：设置 `globalCompositeOperation`

在创建擦除笔迹时，将其 globalCompositeOperation 设为 'destination-out' —— 此模式表示：新绘制内容不显示自身，而是将底层已有像素“擦除”（变透明）。注意：

cn-json-diff

比较两个 JSON 文件并显示差异。支持嵌套结构、数组及值变更。纯 Python 标准库实现，无需 API 密钥。

下载

必须确保该图形（如 Konva.Line）与底图处于同一 Layer；
底图需为位图（Image）或已渲染的图形（不能是透明占位）；
若底图本身带 alpha 或 CSS 滤镜，需确认其渲染结果支持合成（建议用纯 Canvas 渲染）。

// 擦除模式（右键）：擦除底图
currentLine = new Konva.Line({
  points: [pos.x, pos.y],
  stroke: 'black', // 颜色无关紧要（destination-out 下不显示）
  strokeWidth: brushSize,
  globalCompositeOperation: 'destination-out', // ← 核心！
  lineCap: 'round',
  lineJoin: 'round'
});
drawGroup.add(currentLine); // 添加到与底图同层的 group

⚠️ 注意事项

禁用多层合成幻想：不要试图让 drawingLayer.globalCompositeOperation = 'destination-out' 影响 normalLayer —— 这在 Konva/CSS/Canvas 中均无效。
性能更优：单层减少渲染上下文切换，batchDraw() 更高效。
导出兼容：toDataURL() 和 sceneFunc 导出时，单层保证合成效果完整保留。
鼠标事件适配：contextmenu（右键）默认触发浏览器菜单，务必 e.evt.preventDefault()（你已做到 ✅）。