Как нарисовать линию стрелки с svg в реагировать родной - PullRequest
Новая
       17

Как нарисовать линию стрелки с svg в реагировать родной

2 голосов
/ 28 июня 2019

Оригинальный вопрос:

Как на этой картинке, но с полным треугольником. И мне нужно иметь возможность установить строку x1, y1, x2, y2. Спасибо!

это изображение (не могу опубликовать его, потому что у меня нет хорошей репутации)

EDIT:

Я использую «response-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>

1 Ответ

0 голосов
/ 29 июня 2019

ОК, так что я понял это. Вероятно, это действительно плохая реализация, но она работает. Если кто-то может улучшить этот ответ, пожалуйста: 

<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>
...