javascript 如何在Konva.js中将几个复杂的图像裁剪为形状，我在stackoverflow中只找到一个复杂的图像解决方案

798qvoo8 于 2023-04-19 发布在 Java

关注(0)|答案(1)|浏览(278)

hello@lavrton，我在stackoverflow Link中发现了一个类似的问题，你提到的解决方案是一个形状，但它不能同时渲染多个形状。因为sceneFunc和hitFunc都使用整个canvas上下文，当我绘制新的canvas上下文时，旧的canvas不会显示在正确的位置，而是显示在上下文的对应部分。如何处理？
多次使用下面的代码片段来构建包含mask的多个节点，但它会遇到上面的问题

const mask = new Konva.Shape({
      id: KONVA_NODE_ID.MASK,
      x: 0.5 * width * (1 - range),
      y: 0.5 * height * (1 - range),
      width: width * range,
      height: height * range,
      sceneFunc: function (context, shape) {
        context.drawImage(imageObj, 0, 0, shape.width(), shape.height())
        context.globalCompositeOperation = 'source-in'
        context.drawImage(backObj, 0, 0, shape.width(), shape.height())
      },
      hitFunc: function (context, shape) {
        context.fillStrokeShape(shape)
      },
    })
group.add(mask)

JavaScript

来源：https://stackoverflow.com/questions/76034644/how-to-clip-several-complex-images-as-shapes-in-konva-js-i-just-found-only-one

1条答案

按热度按时间

qacovj5a1#

如果你想进行遮罩，最好在Konva外部使用外部canvas元素进行遮罩，然后将该canvas用于Konva.Image：

const canvas = document.createElement('canvas');
canvas.width = imageObj.width;
canvas.height = imageObj.height;
const ctx = canvas.getContext('2d');

ctx.drawImage(imageObj, 0, 0)
ctx.globalCompositeOperation = 'source-in'
ctx.drawImage(backObj, 0, 0);

const image = new Konva.Image({
  image: canvas
});

赞(0）回复(0）举报 2023-04-19

我来回答

javascript 如何在Konva.js中将几个复杂的图像裁剪为形状，我在stackoverflow中只找到一个复杂的图像解决方案

1条答案

相关问题

热门标签

最新问答