react-native-svg

Question

简单地尝试使用以下代码绘制箭头线

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Svg, { Defs, Line, Marker, Path } from "react-native-svg";

export default function App() {
  return (
     <Svg>
        <Defs>
          <Marker
            id="arrow"
            refX={0}
            refY={3}
            markerWidth="6"
            markerHeight="6"
            orient="auto"
          >
            <Path d="M 0 0 L 6 3 L 0 6 z" fill={"red"} stroke={"red"} strokeWidth="2" />
          </Marker>
        </Defs>
        <Line
          x1={80}
          y1={80}
          x2={220}
          y2={220}
          stroke={"green"}
          strokeWidth="2"
          markerEnd="url(#arrow)"
        />
      </Svg>
  );
}

上面的代码在 iOS 上绘制了一条带箭头的线，但在 Android 上根本不起作用，它在 Android 上绘制了一条没有标记端的简单线。

这是一个错误，还是我做错了什么？

现场示例 https://snack.expo.dev/@vedexpo/d2ed3c 清楚地表明它不适用于 Android。

谢谢。

Answer 1

在我的项目中遇到了这个问题，经过无数小时的尝试寻找解决方案但失败了。我放弃了，用了Polygon。它适用于 Android 和 IOS

<Polygon
        points="215,225, 225,215, 228,228"
        fill="green"
       
      />

修改了您的零食代码，您可以查看here

Answer 2

谢谢@sandarshnaroju 我一直在寻找的技巧，但是，它仅适用于固定值。这是我动态绘制箭头的解决方案，这可能会帮助任何寻找类似解决方案的人。

import React, { Component } from 'react';
import Svg, { Line, Polygon } from 'react-native-svg';

export default class App extends Component {

drawHead(x0, y0, x1, y1, h, w){
    var L = Math.sqrt(Math.pow((x0 - x1),2)+Math.pow((y0 - y1),2));

    //first base point coordinates
    var base_x0 = x1 + (w/2) * (y1 - y0) / L;
    var base_y0 = y1 + (w/2) * (x0 - x1) / L;

    //second base point coordinates
    var base_x1 = x1 - (w/2) * (y1 - y0) / L;
    var base_y1 = y1 - (w/2) * (x0 - x1) / L;

    var dx=0
    var dy=0;
    var head_x=0;
    var head_y=0;
    
    if (x1 == x0){
        dx = 0;
        dy = h;
      if (y1 < y0){
          dy = -h
      }else{
          dy = h
      }
    }else{
      if (x1 < x0) {
          h = -h
      }
      var slope = (y1 - y0) / (x1 - x0)
      dx = h / Math.sqrt(1 + (slope^2))
      dy = dx * slope
    }

    //head_points
    head_x = x1 + dx;
    head_y = y1 + dy;

    return `${base_x0},${base_y0} ${base_x1},${base_y1} ${head_x},${head_y}`
}

  render(){
      var x1=50
      var y1=80
      var x2=150
      var y2=30

      var arrowPoints = this.drawHead(x1,y1,x2,y2,8,10)

      return (
        <Svg width={300} height={300}>
          <Line
            x1={x1}
            y1={y1}
            x2={x2}
            y2={y2}
            stroke={'green'}
            strokeWidth="2"
            markerEnd="url(#arrow)"
          />
          <Polygon
            points={arrowPoints}
            fill="green"
          />
        </Svg>
      );
  }
}

See here live

希望对大家有所帮助。

干杯。

react-native-svg - Marker / Line markerEnd 不适用于 Android

react-native-svg - Marker / Line markerEnd doesn't work on Android

svg

android

react-native