konvajs图像的圆形裁剪
konvajs图像的圆形裁剪
提问于 2021-03-15 05:11:05
我想在我的画布上显示圆形裁剪的图像，我用的是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
Stack Overflow用户
回答已采纳
发布于 2021-03-15 11:40:44
事实上，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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66632666
复制相关文章
相似问题
腾讯云开发者
