Expo + React Native:在两种类型的视图上的坐标之间绘制线

本文介绍了Expo + React Native:在两种类型的视图上的坐标之间绘制线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我当前正在使用此模块:

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

解决方案

您将需要像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}/>);}

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

I am currently using this module: github/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: snack.expo.io/@mtkopone/draw-gesture-path