Expo React Native: Trek een lijn tussen de coördinaten op twee soorten aanzichten

stemmen
0

Ik gebruik momenteel deze module: https://github.com/mxmzb/react-native-gesture-detector. Ik wil een lijn kunnen trekken uit de gecreëerde punten, maar het lijkt alleen maar cirkels te geven

Het heeft een Creëer gebaar-aanzicht

<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 is zo gedefinieerd

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

Als je op dat beeld tekent, schetst het het pad met behulp van stippen, zoals zo

enter

Ik wil dat het een vloeiende lijn is en niet een reeks cirkels die de bovenstaande afbeelding

De vraag is gesteld op 06/05/2020 om 13:05
bron van user
In andere talen...                            


1 antwoorden

stemmen
0

U zult zoiets als een Canvas nodig hebben om lijnen te tekenen in plaats van pixels (met Views). React Native komt momenteel niet met een Canvas-implementatie.

De eenvoudigste manier om dit in expo te doen is door gebruik te maken van de react-native-svgbibliotheek

Met behulp daarvan kunt u een polylijn tekenen van uw gebaargegevens met de volgende implementatie

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

U kunt ook gebaren opnemen zonder de react-native-gesture-detectorbibliotheek door gebruik te maken van de ingebouwde React Native PanResponder. Hier is een voorbeeld

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

Zie deze snack voor een werkende App die alles aan elkaar koppelt: https://snack.expo.io/@mtkopone/teken-zwemparcours

antwoordde op 12/05/2020 om 19:25
bron van user

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