我需要“drawingLayer”层作为“normalLayer”层的蒙版我已经尝试了很多方法,但我不能从“normalLayer”层中减去“drawingLayer”。
也许我没有正确地完成这个任务,但关键是我想得到一个结果,这样我就可以用鼠标左键/右键擦除或显示“normalLayer”层
为了清楚起见,下面是codepen
function initializeKonva() {
let container = document.querySelector('#MagicContainerCanvas');
if (!container) {
console.error('Container #MagicContainerCanvas not found');
return;
}
let containerWidth = container.offsetWidth;
let containerHeight = container.offsetHeight;
let stage = new Konva.Stage({
container: container,
width: containerWidth,
height: containerHeight
});
// Create a layer with a red filter
let redFilterLayer = new Konva.Layer();
stage.add(redFilterLayer);
// Create a normal layer
let normalLayer = new Konva.Layer();
stage.add(normalLayer);
// Loading Images into Layers
loadImage(getLightSkin, redFilterLayer, true);
loadImage(getLightMask, normalLayer, false);
// Create a drawing layer
let drawingLayer = new Konva.Layer();
stage.add(drawingLayer);
// Create a layer to display the brush
let brushLayer = new Konva.Layer();
stage.add(brushLayer);
let isDrawing = false;
let brushSize = 20;
let currentLine;
// Brush
let brush = new Konva.Circle({
x: -50,
y: -50,
radius: brushSize / 2,
stroke: 'black',
strokeWidth: 1,
fill: 'rgba(0,0,0,0.2)'
});
brushLayer.add(brush);
stage.on('mousedown', function(e) {
isDrawing = true;
let pos = stage.getPointerPosition();
currentLine = new Konva.Line({
stroke: 'black',
strokeWidth: brushSize,
globalCompositeOperation: e.evt.button === 2 ? 'destination-out' : 'source-over',
points: [pos.x, pos.y],
tension: 0.5,
lineCap: 'round',
lineJoin: 'round'
});
drawingLayer.add(currentLine);
});
stage.on('mousemove', function(e) {
let pos = stage.getPointerPosition();
brush.position({ x: pos.x, y: pos.y });
brushLayer.batchDraw();
if (isDrawing && currentLine) {
let newPoints = currentLine.points().concat([pos.x, pos.y]);
currentLine.points(newPoints);
drawingLayer.batchDraw();
}
});
stage.on('mouseup', function() {
isDrawing = false;
});
stage.on('contextmenu', function(e) {
e.evt.preventDefault();
});
}
字符串
1条答案
按热度按时间eit6fx6z1#
我建议不要创建太多的层,而是创建一个层,然后使用
Konva.Group
来组织场景。如https://konvajs.org/docs/sandbox/Free_Drawing.html中所述,您可以使用
globalCompositeOperation
属性从一个组中减去另一个组。globalCompositeOperation: 'destination-out'
个