0

TL;DR，有一种方法可以borderRadius使用以下公式在 React Native 中进行数学生成：

y=ax+q

该设计

我最近在 Dribbble 上看到了这个设计，希望改进我的应用程序的设计。

在 CSS 中，该border-radius属性允许向元素添加圆角。同样，React Native 具有borderRadius属性以及各个角（即borderRadiusTopLeft& borderRadiusTopRight，borderRadiusBottomLeft& borderRadiusBottomRight）。

半径设置为 15的元素borderRadius产生以下结果：

边界半径：15

问题

但是，我想添加一个几乎双曲线的缓和边界半径，例如：

双曲边界半径

经过进一步调查和检查（使用 Adob​​e 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,
    backgroundColor: "red",
    position: "absolute",
    top: -26,
    left: 39,
    borderRadius: 35,
    transform: [{ scaleX: 2 }, { scaleY: 0.5 }],
  },
  tvscreenBottom: {
    width: 73,
    height: 70,
    backgroundColor: "red",
    position: "absolute",
    bottom: -26,
    left: 39,
    borderRadius: 35,
    transform: [{ scaleX: 2 }, { scaleY: 0.5 }],
  },
  tvscreenLeft: {
    width: 20,
    height: 38,
    backgroundColor: "red",
    position: "absolute",
    left: -7,
    top: 18,
    borderRadius: 35,
    transform: [{ scaleX: 0.5 }, { scaleY: 2 }],
  },
  tvscreenRight: {
    width: 20,
    height: 38,
    backgroundColor: "red",
    position: "absolute",
    right: -7,
    top: 18,
    borderRadius: 35,
    transform: [{ scaleX: 0.5 }, { scaleY: 2 }],
  },
});

产生[恶心]：

令人讨厌的角落

这很接近，但使用多个元素来生成 1 个元素（对于卡片或按钮等元素不太理想）。

然后我的问题是，有没有一种方法可以使用以下公式在数学上产生边界半径：

y=ax+q

或者也许使用微软的 React Native SVG库来实现上述功能？

4

0 回答 0