konvajs中图像的圆形裁剪
Circular cropping of image in konvajs
我想在我的 canvas 中显示圆形裁剪图像,我正在使用 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, 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>
我想在我的 canvas 中显示圆形裁剪图像,我正在使用 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, 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>