[英]How to have rounded corners for stage or layers in React Konva
Hi , 嗨,
I want my stage to look like below image and user will draw on it , my question is how can I do this with React-Konva ? 我希望我的舞台看起来像下面的图像,用户可以在上面绘画,我的问题是如何使用React-Konva做到这一点? I only saw cornerRadius property in rect. 我只在rect中看到了cornerRadius属性。 And also users actions should be with in the stage. 用户的动作也应该在舞台上进行。
thanks in advance 提前致谢
You can do this with CSS styles: 您可以使用CSS样式执行此操作:
<Stage width={window.innerWidth} height={window.innerHeight} style={{
backgroundColor: 'grey',
borderRadius: '15px',
overflow: 'hidden'
}}>
https://codesandbox.io/s/98on17x8xr https://codesandbox.io/s/98on17x8xr
The CSS solution is simpler, but if you want to do it with Konva there is a clipping function you can use. CSS解决方案比较简单,但是如果要使用Konva进行操作,则可以使用剪切功能。
https://konvajs.github.io/docs/clipping/Clipping_Function.html https://konvajs.github.io/docs/clipping/Clipping_Function.html
您可以为Rect对象提供cornerRadius
键属性
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.