Expo Reacciona Nativo: Dibujar la línea entre las coordenadas en dos tipos de vistas

votos
0

Actualmente estoy usando este módulo: https://github.com/mxmzb/react-native-gesture-detector. Quiero ser capaz de dibujar una línea a partir de los puntos creados. Sin embargo, parece que sólo produce círculos

Tiene una vista de Crear 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>

GesturePath se define así

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

Cuando se dibuja en esa vista, se traza el camino usando puntos, así

enter

Me gustaría que fuera una línea lisa y no una serie de círculos como la imagen de arriba

Publicado el 06/05/2020 a las 13:05
fuente por usuario
En otros idiomas...                            


1 respuestas

votos
0

Vas a necesitar algo como un Lienzo para dibujar líneas en lugar de píxeles (con Vistas). React Native no viene actualmente con una implementación de Canvas.

La forma más fácil de hacer esto en la exposición es usar la react-native-svgbiblioteca

Usando eso, puedes dibujar una polilínea de tus datos de gestos con la siguiente implementación

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

También puedes grabar gestos sin la react-native-gesture-detectorbiblioteca usando el PanRespondedor nativo de Reacción incorporado. Aquí hay un ejemplo

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

Mira este aperitivo para una aplicación que funciona y que lo une todo: https://snack.expo.io/@mtkopone/draw-gesture-path

Respondida el 12/05/2020 a las 19:25
fuente por usuario

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