Question

我在React Native中有一些弧线，我想得到他们的centroid（中间点）用于标记目的。它们是使用d3.shape.arc()生成的。它们是使用由arc生成的数据用SVG绘制的。

我正在尝试关注this example（我也找到了this，但也找不到任何工作）。它在React.js中，所以我必须将它转换为React Native，就像我过去所做的那样但是我被卡住了。

我尝试过这样的事情：

this.middle = this.arc.centroid();
this.middle = this.arc.centroid(this.props.arcData);
this.middle = d3.shape.arc().centroid(this.arc);
this.middle = d3.shape.arc().centroid(this.props.arcData);

下面显示//My attempts here：

export default class Arc extends Component {
    constructor(props) {
        super(props);

        this.arc = d3.shape
            .arc()
            .outerRadius(this.props.outerRadius)
            .innerRadius(this.props.innerRadius)
            .cornerRadius(this.props.cornerRadius)
            (this.props.arcData);

        //My attempts here
    }
    .
    .
    .
    render() {
        return (
            <G>
                <Path d={this.arc} fill={this.props.color} />
                <Polyline ... /> //This is what I'm trying to draw eventually
            </G>
        );
    }
}

它要么告诉我它不是前两次尝试的函数，要么返回一个具有两个NaN值的数组，用于后两次尝试。我之前遇到过这种情况，因为这些变量不是我们可以调用函数的对象，而React Native没有用于select，append，attr和所有jazz的DOM元素。我过去能够解决这个问题，但这次我被困住了。

还有其他方法可以在React Native中成功获得弧的质心吗？

Answer 1

我最终想到第二天你可以用缺少变量的方式替换整个表达式再次创建一个弧。

this.points = [
    d3.shape.arc().outerRadius(this.props.outerRadius).innerRadius(this.props.innerRadius).centroid(this.props.arcData),
    d3.shape.arc().outerRadius(this.props.radius*0.95).innerRadius(this.props.radius*0.95).centroid(this.props.arcData),
    pos
];

第一个元素是原始弧，第二个元素是基于问题中链接的示例的outerArc。

然后我用点绘制折线：

<Polyline points={this.points} />

希望这可以帮助任何想要在React Native中使用质心的人。如果您在使用midAngle或NaN时遇到问题，请在评论中告诉我。

如何在React Native中获得弧心？

1 个答案: