问题描述
我想在我的画布中显示圆形裁剪的图像,我正在使用 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();
});
解决方法
其实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,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>