I have a Konva image. How do I set radius or border-radius?
In the docs the Image class has width and height, but I want to set the Radius (border-radius). There is a circle class that can have an image as a background. However, when I use this you need to specify the dimensions for each image to make it zoom into and crop the correct location.
<v-image
:config="{
x: 50,
y: 50,
image: image,
shadowBlur: 5
}"
/>
In the Image class there should be a property Radius. Just like in the circle class. Is their an alternative way to do this that I am missing?
If you want rounded corners, or even a complete circle, you need to use a clipping function applied to your group or shape.
The important part if that in the creation of your group or shape you include the definition of the clip func. The example below creates 2 overlapping circles - see the Konva docs for the working code.
var group = new Konva.Group({
clipFunc: function(ctx) {
ctx.arc(250, 120, 50, 0, Math.PI * 2, false);
ctx.arc(150, 120, 60, 0, Math.PI * 2, false);
}
});
For rounded corners see the answer to a similar question with a working code snippet here.