konvajs 中图像的圆形裁剪答案

【问题标题】：Circular cropping of image in konvajskonvajs 中图像的圆形裁剪
【发布时间】：2021-06-12 09:43:24
【问题描述】：

我想在我的画布中显示圆形裁剪图像，我正在使用 konvajs。有没有办法在 konva 本身中做到这一点，或者 JS/CSS 有什么解决方法？

这是我用于加载图像的代码。

var src = 'https://konvajs.github.io/assets/yoda.jpg';
    Konva.Image.fromURL(src, function(yoda) {
        console.log(yoda);
        yoda.setAttrs({
            x: 10,
            y: 10,
            width: 180,
            height: 180
        });
        group.add(yoda);
        layer.batchDraw();
    });

【问题讨论】：

标签： javascript html5-canvas crop konvajs konva

【解决方案1】：

其实konva自己提供了一种方式。为此，您必须为 konva 图层或组定义 剪辑区域。此剪切区域可以是简单的矩形，也可以是更高级的圆形。

使用图层或组的clipFunc 属性设置形状。此属性需要一个包含一组绘图操作的函数来定义您的实际形状。因此，如果是圆形，您将使用context.arc() 操作。

这是一个例子：

var src = 'https://picsum.photos/id/237/200/300';

var stage = new Konva.Stage({
  container: 'container',
  width: 400,
  height: 300,
});

var layer = new Konva.Layer({
  clipFunc: function(ctx) {
    ctx.arc(130, 140, 70, 0, Math.PI * 2, false);
  }
});
stage.add(layer);

Konva.Image.fromURL('https://picsum.photos/id/237/200/300', function(theDog) {
  theDog.setAttrs({
    x: 0,
    y: 0,
    scaleX: 1,
    scaleY: 1,
  });
  layer.add(theDog);
  layer.batchDraw();
});

<script src="https://unpkg.com/konva@7.2.5/konva.min.js"></script>
<div id="container"></div>

【讨论】：

我在一个组中添加图像并对其进行剪辑，然后将其添加到另一个组中。