Expo React Native : Tracer une ligne entre les coordonnées de deux types de vues

voix
0

J'utilise actuellement ce module : https://github.com/mxmzb/react-native-gesture-detector. Je veux être capable de tracer une ligne à partir des points créés. Cependant, il ne semble produire que des cercles

Il dispose d'une vue Créer un geste

<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 est défini comme tel

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

Lorsque vous dessinez sur cette vue, il trace le chemin à l'aide de points, comme ceci

enter

Je voudrais que ce soit une ligne lisse et non une série de cercles que l'image ci-dessus

Créé 06/05/2020 à 13:05
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
0

Vous allez avoir besoin d'une sorte de toile pour dessiner des lignes au lieu de pixels (avec des vues). React Native n'est actuellement pas fourni avec une implémentation Canvas.

La façon la plus simple de faire cela en expo est d'utiliser la react-native-svgbibliothèque

En utilisant cela, vous pouvez dessiner une polyligne à partir de vos données de gestes avec l'implémentation suivante

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

Vous pouvez également enregistrer des gestes sans la react-native-gesture-detectorbibliothèque en utilisant le PanResponder React Native intégré. Voici un exemple

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

Voir ce snack pour une application qui fonctionne et qui relie tout : https://snack.expo.io/@mtkopone/draw-gesture-path

Créé 12/05/2020 à 19:25
source utilisateur

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