Expo + React Native:在两种类型的视图上的坐标之间绘制线 [英] Expo + React Native: Draw line between coordinates on two type of views

问题描述

我当前正在使用此模块:

我希望它是一条平滑的线，而不是上面图像中的一系列圆圈.

解决方案

您将需要像Canvas这样的东西来绘制线条而不是像素(使用Views).目前，React Native尚未随附Canvas实现.

在expo中最简单的方法是使用 react-native-svg 库.

使用以下实现，您可以从手势数据中绘制一条折线:

 从'react-native-svg'导入Svg，{折线}；const GesturePath =({path，color})=>{const {width，height} = Dimensions.get('window');const points = path.map(p =>`$ {p.x}，$ {p.y}`).join('');返回 (< Svg height ="100％" width ="100％" viewBox = {`0 0 $ {width} $ {height}`}><多段线points = {points}fill ="none"笔触= {颜色}strokeWidth ="1"/></Svg>);}; 

您还可以通过使用内置的React Native react-native-gesture-detector 库的情况下记录手势.rel ="noreferrer"> PanResponder .这是一个示例:

  const GestureRecorder =({onPathChanged})=>{const pathRef = useRef([]);const panResponder = useRef(PanResponder.create({onMoveShouldSetPanResponder:()=>真的，onPanResponderGrant:()=>{pathRef.current = [];}，onPanResponderMove :(事件)=>{pathRef.current.push({x:event.nativeEvent.locationX，y:event.nativeEvent.locationY，});//实时更新路径(必须创建一个新数组//，以便setState识别更改并重新呈现该应用):onPathChanged([... pathRef.current]);}，onPanResponderRelease:()=>{onPathChanged(pathRef.current);}})).当前的;返回 (<查看style = {StyleSheet.absoluteFill}{... panResponder.panHandlers}/>);} 

请参阅以下小吃，了解可将所有内容结合在一起的可运行应用程序: https://snack.expo.io/@mtkopone/draw-gesture-path

I am currently using this module: https://github.com/mxmzb/react-native-gesture-detector. I want to be able to draw a line from the points created. however, it only seems to output circles.

It has a "Create Gesture" view:

<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 defined like so:

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

When you draw on that view, it outlines the path using dots, like so:

I would like it to be a smooth line and not a series of circles that the above image.

解决方案

You are going to need something like a Canvas to draw lines instead of pixels (with Views). React Native does not currently come with a Canvas implementation.

The easiest way to do this in expo is to use the react-native-svg library.

Using that, you can draw a polyline from your gesture data with the following implementation:

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

You can also record gestures without the react-native-gesture-detector library by using the in-built React Native PanResponder. Here is an example:

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

See this snack for a working App tying everything together: https://snack.expo.io/@mtkopone/draw-gesture-path

这篇关于Expo + React Native:在两种类型的视图上的坐标之间绘制线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！