如何解决双曲线边界半径 - React Native
TL;DR,是一种在 React Native 中使用公式以数学方式生成 borderRadius
的方法:
y=ax+q
设计
我最近在 Dribbble 上遇到了 this 设计,希望改进我的应用程序的设计。
在 CSS 中,border-radius
属性允许为元素添加圆角。同样,React Native 具有 borderRadius
属性,以及各个角(即 borderRadiusTopLeft
& borderRadiusTopRight
、borderRadiusBottomLeft
& borderRadiusBottomright
)。
borderRadius
半径设置为 15 的元素产生以下结果:
问题
经过进一步调查和检查(使用 Adobe Illustrator),我能够确定角的边界半径不是完美的半径,如下所示:
我已经尝试了下面的“电视形状”来制作我想要的东西,但是,它覆盖了几个元素。
const TvScreen = () => {
return (
<View style={styles.tvscreen}>
<View style={styles.tvscreenMain} />
<View style={styles.tvscreenTop} />
<View style={styles.tvscreenBottom} />
<View style={styles.tvscreenLeft} />
<View style={styles.tvscreenRight} />
</View>
);
};
StyleSheet.create({
tvscreen: {},tvscreenMain: {
width: 150,height: 75,backgroundColor: "red",borderTopLefTradius: 15,borderTopRighTradius: 15,borderBottomrighTradius: 15,borderBottomLefTradius: 15,},tvscreenTop: {
width: 73,height: 70,position: "absolute",top: -26,left: 39,borderRadius: 35,transform: [{ scaleX: 2 },{ scaleY: 0.5 }],tvscreenBottom: {
width: 73,bottom: -26,tvscreenLeft: {
width: 20,height: 38,left: -7,top: 18,transform: [{ scaleX: 0.5 },{ scaleY: 2 }],tvscreenRight: {
width: 20,right: -7,});
产生[糟糕]:
这很接近,但使用多个元素来生成 1 个元素(对于卡片或按钮等元素不太理想)。
我的问题是,有没有办法使用以下公式在数学上产生边界半径:
y=ax+q
或者使用 Microsoft's React Native SVG 库来实现上述目的?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。