在 KonvaJS 上使用带有 globalCompositeOperation 的图像掩码？

Posted 2023-03-23

【中文标题】在 KonvaJS 上使用带有 globalCompositeOperation 的图像掩码？

【英文标题】：Using image mask with globalCompositeOperation on KonvaJS?

【发布时间】：2018-03-15 09:57:01

【问题描述】：

我正在使用 Konva.js 框架并尝试在另一个框架上应用图像蒙版。 代码完全从此post复制而来。 在这个jsfiddle example 中添加了一个背景（矩形）。

问题是背景没有正确绘制。要在代码中查看它的实际效果，有一行注释/取消注释（查看实际问题）。 有人有任何想法来实现这一目标吗？

最好的

let stage = new Konva.Stage(
    container: 'container',
    width: window.innerWidth,
    height: window.innerHeight
);

let layer = new Konva.Layer();
let rect = new Konva.Rect(
    x: 0,
    y: 0,
    width: 900,
    height: 900,
    draggable: true,
    fill: '#ff8619',
);

// -------------------------------------
// Line to comment or uncomment
//layer.add(rect);
// -------------------------------------

stage.add(layer);

let mask = new Image();
mask.onload = () => 
    let img = new Image();
    img.onload = () => 
        let image = new Konva.Shape(
            sceneFunc: (ctx) => 
                ctx.save();
                ctx.drawImage(mask, -image.x(), -image.y(),  200, 200);
                ctx.globalCompositeOperation = 'source-in';
                ctx.drawImage(img, 0, 0, 200, 200);
                ctx.globalCompositeOperation = 'source-over';
                ctx.restore();
            ,
            // (!) important
            // for this case you need to define custom hit function
            hitFunc: (ctx) => 
                ctx.rect(0, 0, 200, 200);
                ctx.fillStrokeShape(image);
            ,
            draggable: true
        );
        layer.add(image);
        layer.draw();
    ;
            img.src = "http://i.imgur.com/kKjW3U4.png";

;
        mask.src = "http://i.imgur.com/fQX2P8S.png";

【问题讨论】：

我在 Konva.js 聊天中阅读了您的帖子并查看了您的小提琴。可能你想要的东西真的很明显，但是虽然我看过你的小提琴有 & 没有评论线，但我不明白你真正想要实现什么。也许你可以提供一个图片模型？

感谢您的关注。如果您取消注释我认为结果将如下所示的代码：image1。但这种情况并非如此。 globalCompositeOperation 似乎也适用于背景中的橙色 Rect。希望足够清楚 征服。

您知道您可以将图像直接插入到您的问题中。编辑问题时查看工具栏。看着那张图片，我看到一个橙色填充的前景矩形，带有一条动物形状的剪切路径，通过剪切区域，我看到了另一个图像。关于您链接到@lavrton 的另一个问题，在他的答案末尾提供了 3 个链接，显示了潜在的解决方案 - 您看到了吗？

是的，我看到了。但是他们都没有使用节点作为背景。这些独立原型避免了我遇到的问题。我的 Jsfiddle 正是@lavtron 发布的第三个 + 背景中的橙色矩形（我想用我在之前评论中给出的图像来说明结果）。事实上，我也尝试使用 save() 和 restore() 上下文和 globalCompositeOperation 来恢复默认行为。但这不起作用。我的 jsfiddle 的目的是让结果（参见图像）在图像上保持相同的交互（可拖动）

【参考方案1】：

问题是您需要： 1.添加新图层：let layer2 = new Konva.Layer(); 2.按正确顺序添加到舞台：stage.add(layer2, layer);

这里是更新的：jsfiddle example

【讨论】：

您好，感谢您的回答。但我想在同一个画布上进行操作。因此我不想使用第二层。