Expo React Native: Linie zwischen Koordinaten auf zwei Arten von Ansichten zeichnen

Question

Expo React Native: Linie zwischen Koordinaten auf zwei Arten von Ansichten zeichnen

stimmen

0

Ich verwende derzeit dieses Modul: https://github.com/mxmzb/react-native-gesture-detector. Ich möchte in der Lage sein, eine Linie aus den erzeugten Punkten zu zeichnen, aber es scheint nur Kreise auszugeben

Es hat eine Geste erstellen-Ansicht

<View style={{ position: relative, width: 100%, height: 100% }}>
    <GesturePath
        path={gesture.map(coordinate => {
            if (recorderOffset) {
                return {
                    x: coordinate.x + recorderOffset.x,
                    y: coordinate.y + recorderOffset.y,
                };
            }

            return coordinate;
        })}
        color=green
        slopRadius={30}
        center={false}
    />
</View>

GesturePath wird wie folgt definiert

const GesturePath = ({ path, color, slopRadius, center = true }: GesturePathProps) => {
  const baseStyle: ViewStyle = {
    position: absolute,
    top: center ? 50% : 0,
    left: center ? 50% : 0,
    opacity: 1,
  };

  return (
    <>
      {path.map((point, index) => (
        <Animated.View
          style={Object.assign({}, baseStyle, {
            width: slopRadius,
            height: slopRadius,
            borderRadius: slopRadius,
            backgroundColor: color,
            marginLeft: point.x - slopRadius,
            marginTop: point.y - slopRadius,
          })}
          key={index}
        />
      ))}
    </>
  );
};

Wenn Sie in dieser Ansicht zeichnen, umreißt sie den Pfad mit Punkten, etwa so

Ich möchte, dass es eine glatte Linie ist und nicht eine Reihe von Kreisen, die das obige Bild zeigt

javascript react-native expo gesture-recognition

Veröffentlicht am 06/05/2020 um 13:05
quelle vom benutzer JamesG

In anderen Sprachen...

1 antworten

mtkopone · Answer 1 · 2020-05-12 19:25

Sie benötigen etwas wie eine Leinwand, um Linien statt Pixel zu zeichnen (mit Views). React Native wird derzeit nicht mit einer Leinwand-Implementierung geliefert.

Der einfachste Weg, dies in expo zu tun, ist die Verwendung der react-native-svgBibliothek

Damit können Sie mit der folgenden Implementierung eine Polylinie aus Ihren Gestendaten zeichnen

import Svg, { Polyline } from 'react-native-svg';

const GesturePath = ({ path, color }) => {
  const { width, height } = Dimensions.get('window');
  const points = path.map(p => `${p.x},${p.y}`).join(' ');
  return (
    <Svg height="100%" width="100%" viewBox={`0 0 ${width} ${height}`}>
        <Polyline
          points={points}
          fill="none"
          stroke={color}
          strokeWidth="1"
        />
    </Svg>    
  );
};

Sie können auch Gesten ohne die react-native-gesture-detectorBibliothek aufzeichnen, indem Sie den eingebauten PanResponder von React Native verwenden. Hier ist ein Beispiel

const GestureRecorder = ({ onPathChanged }) => {
  const pathRef = useRef([]);

  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        pathRef.current = [];
      },
      onPanResponderMove: (event) => {
        pathRef.current.push({
          x: event.nativeEvent.locationX,
          y: event.nativeEvent.locationY,
        });
        // Update path real-time (A new array must be created
        // so setState recognises the change and re-renders the App):
        onPathChanged([...pathRef.current]);
      },
      onPanResponderRelease: () => {
        onPathChanged(pathRef.current);
      }
    })
  ).current;

  return (
    <View
      style={StyleSheet.absoluteFill}
      {...panResponder.panHandlers}
    />
  );
}

Sehen Sie sich diesen Snack für eine funktionierende App an, die alles miteinander verbindet: https://snack.expo.io/@mtkopone/draw-gesture-path