Expo React Native: Σχεδίαση γραμμής μεταξύ συντεταγμένων σε δύο τύπους προβολών

ψήφοι
0

Αυτήν τη στιγμή χρησιμοποιώ αυτήν την ενότητα: https://github.com/mxmzb/react-native-gesture-detector . Θέλω να μπορώ να σχεδιάσω μια γραμμή από τα σημεία που δημιουργήθηκαν. Ωστόσο, φαίνεται ότι παράγει μόνο κύκλους.

Έχει προβολή "Δημιουργία χειρονομίας":

<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 ορίζεται ως εξής:

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

Όταν σχεδιάζετε σε αυτήν την προβολή, περιγράφει τη διαδρομή χρησιμοποιώντας τελείες, όπως έτσι:

εισάγετε

Θα ήθελα να είναι μια ομαλή γραμμή και όχι μια σειρά κύκλων από την παραπάνω εικόνα.

Δημοσιεύθηκε 06/05/2020 στις 13:05
πηγή χρήστη
Σε άλλες γλώσσες...                            


1 απαντήσεις

ψήφοι
0

Θα χρειαστείτε κάτι σαν καμβά για να σχεδιάσετε γραμμές αντί για εικονοστοιχεία (με προβολές). Το React Native δεν συνοδεύεται από εφαρμογή Canvas.

Ο ευκολότερος τρόπος για να το κάνετε αυτό στην έκθεση είναι να χρησιμοποιήσετε το react-native-svg βιβλιοθήκη.

Χρησιμοποιώντας αυτό, μπορείτε να σχεδιάσετε μια πολυγραμμή από τα δεδομένα χειρονομίας σας με την ακόλουθη εφαρμογή:

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

Μπορείτε επίσης να εγγράψετε κινήσεις χωρίς το react-native-gesture-detector βιβλιοθήκη χρησιμοποιώντας το ενσωματωμένο React Native PanResponder . Εδώ είναι ένα παράδειγμα:

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

Δείτε αυτό το σνακ για μια λειτουργική εφαρμογή που τα συνδέει όλα: https://snack.expo.io/@mtkopone/draw-gesture-path

Απαντήθηκε 12/05/2020 στις 19:25
πηγή χρήστη

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