[英]How to add border-radius to react-konva Image object?
I have an Image
component in react-konva
and want to add border-radius: 8px
.我在
react-konva
有一个Image
组件,想添加border-radius: 8px
。 Which is the easiest way?哪种方法最简单?
Having this amazing comment as reference the problem can be easily solved:有了这个惊人的评论作为参考,问题可以轻松解决:
...
<Group
clipFunc={ctx => calcClipFunc(ctx, x, y, width, height, radius)}
>
<Image
image={image}
width={width}
height={height}
x={x}
y={y}
/>
</Group>
And the calcClipFunc()
function from the previous comment:以及上
calcClipFunc()
评论中的calcClipFunc()
函数:
function calcClipFunc(ctx, x, y, width, height, radius) {
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
}
Clip your image in Stage:在 Stage 中剪辑您的图像:
// image.width, image.height
<Stage width={200} height={200} style={{borderRadius: '8px', overflow: 'hidden'}}>
<Layer >
<Image image={this.state.image} />
</Layer>
</Stage>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.