如何在React Native中使用SVG制作圆形图?

jaql4c8m  于 2023-05-18  发布在  React
关注(0)|答案(1)|浏览(126)

我正在尝试在React Native中使用SVG绘制一个圆形图。我想在图表上加一笔。我该怎么做?
是我干的

这就是我想做的。

验证码:

return (
    <View style={{ height: 250, width: 250, backgroundColor: "green" }}>

        <Svg viewBox="0 0 120 120">
            <Circle
                cx="60"
                cy="60"
                r="30"
                fill="transparent"
                stroke="red"
                strokeWidth="60"
                strokeDasharray={(2 * Math.PI * 30 * 75) / 100}
            />
        </Svg>

    </View>
);
46qrfjad

46qrfjad1#

对于添加笔划,我建议使用另一个圆圈。

<View style={{ height: 250, width: 250, backgroundColor: "green" }}>
                    <Svg viewBox="0 0 120 120">
                        <Circle
                            cx="60"
                            cy="60"
                            r="30"
                            fill="transparent"
                            stroke="red"
                            strokeWidth="60"
                            strokeDasharray={(2 * Math.PI * 30 * 75) / 100}
                        />
                        <Circle
                            cx="60"
                            cy="60"
                            r="60"
                            fill="transparent"
                            stroke="black"
                            strokeDasharray={(2 * Math.PI * 60 * 75) / 100}
                            strokeWidth="2"
                        />
                    </Svg>
                </View>

请让我知道,如果这个Answear帮助你。:—)

相关问题