1

我正在尝试设计一个 React Native UI，它的中心有一个图像，周围有一堆以圆周运动排列的按钮。

示例设计

我正在使用以下公式来计算圆形按钮的位置

cx: cx={Math.cos(2 * Math.PI / numberOfPoints * i) * circleRadius}

cy: cy={Math.sin(2 * Math.PI / numberOfPoints * i) * circleRadius}

我的 SVG 渲染 const circleRadius = Dimensions.get('window').width / 2; 常量 numberOfPoints = 8;

<Svg style={{flex: 1}}>
  <G>
    <Circle key={0} r="6" cx={Math.cos(2 * Math.PI / numberOfPoints * 0) * circleRadius} cy={Math.sin(2 * Math.PI / numberOfPoints * 0) * circleRadius} fill="green"/>
    <Circle key={1} r="6" cx={Math.cos(2 * Math.PI / numberOfPoints * 1) * circleRadius} cy={Math.sin(2 * Math.PI / numberOfPoints * 1) * circleRadius} fill="purple"/>
    <Circle key={2} r="6" cx={Math.cos(2 * Math.PI / numberOfPoints * 2) * circleRadius} cy={Math.sin(2 * Math.PI / numberOfPoints * 2) * circleRadius} fill="black"/>
    <Circle key={3} r="6" cx={Math.cos(2 * Math.PI / numberOfPoints * 3) * circleRadius} cy={Math.sin(2 * Math.PI / numberOfPoints * 3) * circleRadius} fill="green"/>
    <Circle key={4} r="6" cx={Math.cos(2 * Math.PI / numberOfPoints * 4) * circleRadius} cy={Math.sin(2 * Math.PI / numberOfPoints * 4) * circleRadius} fill="purple"/>
    <Circle key={5} r="6" cx={Math.cos(2 * Math.PI / numberOfPoints * 5) * circleRadius} cy={Math.sin(2 * Math.PI / numberOfPoints * 5) * circleRadius} fill="black"/>
    <Circle key={6} r="6" cx={Math.cos(2 * Math.PI / numberOfPoints * 6) * circleRadius} cy={Math.sin(2 * Math.PI / numberOfPoints * 6) * circleRadius} fill="green"/>
    <Circle key={7} r="6" cx={Math.cos(2 * Math.PI / numberOfPoints * 7) * circleRadius} cy={Math.sin(2 * Math.PI / numberOfPoints * 7) * circleRadius} fill="purple"/>

结果在圆圈的右下部分而不是模型中的左上部分中出现 3 个圆圈

iOS 模拟器屏幕截图

如设计中所示，我将如何以圆形方式渲染圆圈？有没有更简单/更好的方法可以在不使用的情况下完成此任务react-native-svg？

4

0 回答 0