Javascript 使用不带模式元素的图像填充圆形
我正在使用该库创建一种按字母顺序排列的滑块，用于在应用程序中查看好友 基本上，你围绕一条圆形路径移动一个圆圈，每个13.84（360/26）度沿着字母表中的一个字母移动，有一个外圆，我在其中显示圆圈，这些圆圈代表你的朋友，他们的名字以所选字母开头 我在处理圆时遇到了问题，我现在很难将这个概念转移到处理朋友对象的图像上 这个react原生svg存储库不包含Pattern svg元素，这是我最初计划尝试实现此功能的元素，因为我发现它不包含我尝试过用图像元素替换圆形元素的元素，但是图像的定位和大小完全打乱了用于圆的定位逻辑 我在下面发布了两个代码片段，一个是包含所有SVG功能的“master”呈现方法，另一个是在下面生成上述圆圈（需要是图像）的代码 我还包括了一些图片，为我在问题的底部试图实现的目标提供了一些背景信息——我试图将黑色圆圈转换为图片 以下“主”组件的渲染方法：Javascript 使用不带模式元素的图像填充圆形,javascript,svg,react-native,Javascript,Svg,React Native,我正在使用该库创建一种按字母顺序排列的滑块，用于在应用程序中查看好友 基本上，你围绕一条圆形路径移动一个圆圈，每个13.84（360/26）度沿着字母表中的一个字母移动，有一个外圆，我在其中显示圆圈，这些圆圈代表你的朋友，他们的名字以所选字母开头 我在处理圆时遇到了问题，我现在很难将这个概念转移到处理朋友对象的图像上 这个react原生svg存储库不包含Pattern svg元素，这是我最初计划尝试实现此功能的元素，因为我发现它不包含我尝试过用图像元素替换圆形元素的元素，但是图像的定位和大小完全
<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>
180？1:0}1${endCoord.x}${endCoord.y}}
/>
{this.props.text}
{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>
);
。。。
friends\u to\u display.push({
x:Math.sin（（i*单位）*Math.PI/180）*r+center_x，
y:Math.cos（（i*单位）*Math.PI/180）*r+center\u y
});
...
返回(
{
朋友到显示地图（（p）=>{
返回(
);
})
}
);