Expo React Native: Tracciare una linea tra le coordinate su due tipi di viste

voti
0

Attualmente sto utilizzando questo modulo: https://github.com/mxmzb/react-native-gesture-detector. Voglio essere in grado di tracciare una linea dai punti creati. tuttavia, sembra solo cerchi di uscita

Ha una vista Crea gesto

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

GestoPercorso è definito in questo modo

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}
        />
      ))}
    </>
  );
};

Quando si disegna su quella vista, delinea il percorso usando dei punti, in questo modo

enter

Vorrei che fosse una linea liscia e non una serie di cerchi che l'immagine di cui sopra

È pubblicato 06/05/2020 alle 13:05
fonte dall'utente
In altre lingue...                            


1 risposte

voti
0

Avrete bisogno di qualcosa come una tela per disegnare linee invece di pixel (con viste). React Native attualmente non viene fornito con un'implementazione Canvas.

Il modo più semplice per farlo in fiera è utilizzare la react-native-svglibreria

Usando questo, è possibile disegnare una polilinea dai dati dei gesti con la seguente implementazione

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>    
  );
};

È anche possibile registrare i gesti senza la react-native-gesture-detectorlibreria utilizzando il React Native PanResponder integrato. Ecco un esempio

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}
    />
  );
}

Vedi questo spuntino per un'App funzionante che unisce tutto: https://snack.expo.io/@mtkopone/percorso di pittura/grafica

Risposto il 12/05/2020 a 19:25
fonte dall'utente

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more