在本机反应中绘制拖放矩形

Posted 2023-05-07

【中文标题】在本机反应中绘制拖放矩形

【英文标题】：Drawing a drag and drop rectangle in react native

【发布时间】：2022-01-17 17:54:29

【问题描述】：

我需要在我的应用程序上创建一个图像，用户可以在该图像上绘制一个矩形以用手指选择图像的一个区域。然后我需要获取矩形的左上角和右下角坐标。

我已经在网上搜索了如何执行此操作，但无济于事。有人可以帮忙吗？

谢谢。

【参考方案1】：

我建议查看react-native PanResponder 或react-native-gesture-handler PanGestureHandler. 它是一个响应触摸输入的组件，并在您拖动手指时计算 x 和 y 值，它还会告诉您从手指开始移动的距离。

您可以使用此数据并将 x 和 y 移动距离传递回 View 组件的宽度和高度值，以使其用手指拖出一个框。

编辑：

这是我刚刚使用 react-native-gesture-handler 进行的一些实验。

import  View  from 'react-native';
import  GestureEvent, PanGestureHandler, PanGestureHandlerEventPayload  from 'react-native-gesture-handler';

const Test = () => 
  const [start, setStart] = useState< x: number; y: number >(null);
  const [end, setEnd] = useState< x: number; y: number >( x: 0, y: 0 );
  const [dimensions, setDimensions] = useState< w: number; h: number >( w: 0, h: 0 );

  const onPress = (event: GestureEvent<PanGestureHandlerEventPayload>) => 
    const  x, y, translationX, translationY  = event.nativeEvent;
    if (!start) setStart( x: y, y: x );
    setDimensions( w: translationX, h: translationY );
  ;

  const onEnd = () => 
    if (!start) return;

    setEnd(start);
    setStart(null);
  ;

  return (
    <View style= flex: 1 >
      <PanGestureHandler onGestureEvent=onPress onEnded=onEnd>
        <View style= width: '100%', height: '100%', backgroundColor: 'red' >
          <View
            style=
              position: 'absolute',
              backgroundColor: 'blue',
              top: start?.x ?? end?.x,
              left: start?.y ?? end?.y,
              width: dimensions?.w ?? 0,
              height: dimensions?.h ?? 0,
            
          />
        </View>
      </PanGestureHandler>
    </View>
  );
;

export default Test;