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

【问题标题】：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;

【讨论】：