एक्सपो रिएक्ट नेटिव: दो प्रकार के विचारों पर निर्देशांक के बीच रेखा खींचना

वोट
0

मैं वर्तमान में इस मॉड्यूल का उपयोग कर रहा हूं: https://github.com/mxmzb/react-native-gesture-detector । मैं बनाए गए बिंदुओं से एक रेखा खींचना चाहता हूं। हालाँकि, यह केवल उत्पादन मंडलियों को लगता है।

इसमें "Create Gesture" दृश्य है:

<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-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 इन-बिल्ट रिएक्ट नेटिव पैनस्पेंडर का उपयोग करके पुस्तकालय। यहाँ एक उदाहरण है:

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