Question

原始问题：

就像这张照片一样，但是有一个完整的三角形。而且我需要能够设置行x1，y1，x2，y2。谢谢！

this image (can't post it because I ain't got enogh reputation)

编辑：

我正在使用“ react-native-svg”：这是我的意思：

<Svg
 height="1000"
 width="1000"
 >
  <Line
  x1={this.state.circle1.x}
  y1={this.state.circle1.y}
  x2={this.state.circle2.x}
  y2={this.state.circle2.y}
  stroke="#1abc9c"
  strokeWidth="10"
 />
</Svg>

Answer 1

好的，所以我知道了。这可能是一个非常糟糕的实现，但确实可行。如果有人可以改善此答案，请执行：

<Svg
    height="1000"
    width="1000"
>
    <G
        rotation={(Math.atan2(this.state.point2.y - this.state.point1.y, this.state.point2.x - this.state.point1.x) * 180 / Math.PI)+45}
        origin={`${this.state.point1.x}, ${this.state.point1.y}`}
    >
        <Path d={`M ${this.state.point1.x+8} ${this.state.point1.y+8} L ${this.state.point1.x-10} ${this.state.point1.y+10} L ${this.state.point1.x-8} ${this.state.point1.y-8} z`} fill="#1abc9c" stroke="#1abc9c" />
    </G>
        <G
            rotation={(Math.atan2(this.state.point2.y - this.state.point1.y, this.state.point2.x - this.state.point1.x) * 180 / Math.PI)-135}
            origin={`${this.state.point2.x}, ${this.state.point2.y}`}
        >
        <Path d={`M ${this.state.point2.x+8} ${this.state.point2.y+8} L ${this.state.point2.x-10} ${this.state.point2.y+10} L ${this.state.point2.x-8} ${this.state.point2.y-8} z`} fill="#1abc9c" stroke="#1abc9c" />
    </G>

    <Line
        x1={this.state.point1.x}
        y1={this.state.point1.y}
        x2={this.state.point2.x}
        y2={this.state.point2.y}
        stroke="#1abc9c"
        strokeWidth="10"
    />
</Svg>

如何在React Native中使用SVG绘制箭头线

1 个答案: