Question

我正在使用react-native-svg库创建一种按字母顺序排列的滑块，用于在应用中查看朋友。

基本上你围绕一个圆形路径移动一个圆圈，每个13.84（360/26）度数沿着字母表的字母移动你，有一个外圆圈我在哪里显示圆圈，这些圆圈代表你的朋友的名字开头选中的信。

我已经与圈子合作了，我现在无法将这个概念转移到与朋友对象的图像一起工作。

这个react-native-svg存储库不包含Pattern SVG元素，这是我最初计划尝试实现此功能，因为发现它不包括我已经尝试过替换Circle元素的元素带有Image元素，但定位和放大图像的大小完全扰乱了为圆圈工作的定位逻辑。

我在下面发布了两个代码段，＆＃39; master＆＃39;包含所有这些SVG功能的render方法，以及在其下方生成所述圆圈（需要是图像）的代码。

我还提供了一些图片，以提供我在问题底部尝试实现的背景 - 我试图转换为图片的黑圈。

＆＃39;主人的渲染方法＆＃39;组件如下：

<Svg onLayout={this.onLayout} width={width} height={height}>

                    <Circle cx={cx} cy={cy} r={r} stroke={outlineStroke} strokeWidth={outlineStrokeWidth} fill="none"/>

                    <Circle cx={cx} cy={cy} r={r*0.75} stroke={outlineStroke} strokeWidth={outlineStrokeWidth} fill="none"/>


                    <Path 
                        id="foo" 
                        stroke={meterColor} 
                        strokeWidth={5} 
                        fill="none"
                        d={`M${startCoord.x} ${startCoord.y} A ${r} ${r} 0 ${value>180?1:0} 1 ${endCoord.x} ${endCoord.y}`}
                    />




                    <Text 
                        x={r/2 + 40} 
                        y={r/2} 
                        fontSize="80"
                        fill="#0f0"
                    >
                        {this.props.text}
                    </Text>

                    <G x={endCoord.x-7.5} y={endCoord.y-7.5}>
                        <Circle cx={7.5} cy={7.5} r={28} fill={meterColor} {...this._panResponder.panHandlers}/>
                    </G>

                    {this.generateAvatars()}


                </Svg>

下面的相关this.generateAvatars（）代码（来自上面的代码段） - 这不是一个完整的代码段，因为我不想用不相关的代码来填充问题。

 ...

 friends_to_display.push({
     x: Math.sin( (i * unit) * Math.PI / 180) * r + center_x,
     y: Math.cos( (i * unit) * Math.PI / 180) * r + center_y
 });

 ...

 return (

        <G>
            {
                friends_to_display.map((p) => {

                    return (
                        <Circle 
                            cx={p.x}
                            cy={p.y}
                            r={15}
                        />


                    );
                })
            }
        </G>
    );

如果有人可以建议使用反应原生替代技术来实现这一目标，那么我全都是耳朵！

React Native SVG填充圆圈，图像没有图案元素

0 个答案: