Question

我目前正在研究react-native-circular-slider的修改版本，我正在寻找替换用于拨号轮的LinearGradient，我可以只应用平面颜色和透明度。

我对SVG并不熟悉，我已经尝试过使用Line和Circle，但似乎无法使用它。

运行方向盘的代码片段：

<Defs>
        {   
          range(segments).map(i => {
            const { fromX, fromY, toX, toY } = calculateArcCircle(i, segments, radius, startAngle, angleLength);
            const { fromColor, toColor } = calculateArcColor(i, segments, gradientColorFrom, gradientColorTo)
            return (
              <LinearGradient key={i} id={getGradientId(i)} x1={fromX.toFixed(2)} y1={fromY.toFixed(2)} x2={toX.toFixed(2)} y2={toY.toFixed(2)}>
                <Stop offset="0%" stopColor={toColor} />
                <Stop offset="1" stopColor={toColor} />
              </LinearGradient>
            )
          })   
        }
</Defs>

段只是一个数字，如5或10，我试过插入X - ＆gt; toY成一条线，它对我没有用（可能只是做错了）任何帮助将不胜感激。

Answer 1

我找到了解决方案，很简单。我使用了一条路径并以与线性渐变相同的方式迭代它。

代码示例（调整不透明度和颜色）：

range(segments).map(i => {
            const { fromX, fromY, toX, toY } = calculateArcCircle(i, segments, radius, startAngle, angleLength);
            const d = `M ${fromX.toFixed(2)} ${fromY.toFixed(2)} A ${radius} ${radius} 0 0 1 ${toX.toFixed(2)} ${toY.toFixed(2)}`;

            return (
              <Path
                d={d}
                key={i}
                strokeWidth={strokeWidth}
                stroke={"#133954"} // used to be `url(#${getGradientId(i)})`
                strokeOpacity={.7}
                fill="transparent"
              />
            )
          })

我可以使用什么SVG元素来替换LinearGradient并保留所有相同的绘制区域。

1 个答案: