konvajs 中图像的圆形裁剪
Posted
技术标签:
【中文标题】konvajs 中图像的圆形裁剪【英文标题】:Circular cropping of image in konvajs 【发布时间】: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();
);
【问题讨论】:
【参考方案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>
【讨论】:
我在一个组中添加图像并对其进行剪辑,然后将其添加到另一个组中。以上是关于konvajs 中图像的圆形裁剪的主要内容,如果未能解决你的问题,请参考以下文章