在React Native中绘制可拖放矩形

Question

我需要在我的应用程序上创建一张图片，用户可以在其上面使用手指绘制矩形以选择图像的某个区域。然后我需要获取矩形的左上角和右下角坐标。我已经在网上搜索了如何做到这一点，但没有找到答案。有人可以帮忙吗？谢谢。

- shadowphoenixpt

Answer 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;

- Jake Giles-Phillips

Answer 2

希望这对某人有所帮助。干杯。

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


onStart = (event: GestureEvent<PanGestureHandlerEventPayload>) =>{
   const { x, y } = event.nativeEvent;
   this.setState({ startX: y, startY: x });
}

onPress = (event: GestureEvent<PanGestureHandlerEventPayload>) => {
   const { x, y, translationX, translationY } = event.nativeEvent;

   if(this.state.startX > y || this.state.startY > x){
      if(translationX < 0 && translationY < 0){
          this.setState({ startX: y });
          this.setState({ startY: x });
          this.setState({dimensionsW: translationX * -1, dimensionsH: translationY * -1})
   }else{
      if(this.state.startX > y){
          this.setState({ startX: y });
          this.setState({dimensionsH: translationY * -1, dimensionsW:translationX,})
      }
      if(this.state.startY > x){
          this.setState({ startY: x });
          this.setState({dimensionsW: translationX * -1, dimensionsH: translationY})  
      }
    }
  }else{
    if(translationX < 0 || translationY < 0 ){
        if(translationX < 0){
            this.setState({ dimensionsW:translationX * -1, dimensionsH: translationY})
        }
        if(translationY < 0){
            this.setState({ dimensionsW:translationX , dimensionsH: translationY * -1})
        }
    }else{
        this.setState({ dimensionsW:translationX, dimensionsH: translationY})
    }
  }
};

onEnd = (event: GestureEvent<PanGestureHandlerEventPayload>) => {
  const { x, y } = event.nativeEvent;
  this.setState({endX: y, endY: x});
};


<PanGestureHandler onBegan={this.onStart} onGestureEvent={this.onPress} 
onEnded={this.onEnd}>
  <View
   style={{
      position: 'absolute',
      top: this.state.startX ?? this.state.endX,
      left: this.state.startY ?? this.state.endY,
      width: this.state.dimensionsW ?? 0,
      height: this.state.dimensionsH ?? 0,
      borderColor: '#fff',
      borderWidth: 4,
      borderRadius: 15
   }}
 />
</PanGestureHandler>

- Thevin Malaka.