Question

我正在尝试在本机中实现一个Android绘图应用程序。我正在使用PanResponder，但我不知道如何获取用户触摸的部分的坐标。

我尝试使用react-native-svg，但我不知道将PanResponder对象放在何处。

class App extends React.Component {
  constructor(props){
    super(props);
    this._panResponder={};
    this._previousLeft = 0;
    this._previousTop = 0;
    this._circleStyles = {};
    this.circle = null;
  }
  componentWillMount(){
    this._panResponder = PanResponder.create({
            onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
      onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
      onPanResponderGrant: this._handlePanResponderGrant,
      onPanResponderMove: this._handlePanResponderMove,
      onPanResponderRelease: this._handlePanResponderEnd,
      onPanResponderTerminate: this._handlePanResponderEnd,
    });
    this._previousLeft = 20;
    this._previousTop = 84;
    this._circleStyles = {
      style: {
        left: this._previousLeft,
        top: this._previousTop,
        backgroundColor: 'green',
      }
    };
  }
  componentDidMount() {
    this._updateNativeStyles();
  }


 render() {
    return (
      <View style={styles.container}>
        <View style={styles.circle}
          ref={(circle) => {
            this.circle = circle;
          }}
          { ...this._panResponder.panHandlers }
        />
      </View>
    );
  }

  _highlight = () => {
    this._circleStyles.style.backgroundColor = 'blue';
    this._updateNativeStyles();
  }

  _unHighlight = () => {
    this._circleStyles.style.backgroundColor = 'green';
    this._updateNativeStyles();
  }

  _updateNativeStyles() {
    this.circle && this.circle.setNativeProps(this._circleStyles);
  }

  _handleStartShouldSetPanResponder() {
    return true;
  }

  _handleMoveShouldSetPanResponder() {
    return true;
  }

  _handlePanResponderGrant = (e, gestureState) => {
    this._highlight();
  }

    _handlePanResponderMove = (e, gestureState) => {
    this._circleStyles.style.left = this._previousLeft + gestureState.dx;
    this._circleStyles.style.top = this._previousTop + gestureState.dy;
    this._updateNativeStyles();
  }

  _handlePanResponderEnd = (e, gestureState) => {
    this._unHighlight();
    this._previousLeft += gestureState.dx;
    this._previousTop += gestureState.dy;
  }

}

在这个例子中，圆圈会移动，但我希望它留下痕迹。这可以通过获取圆移动的点的坐标然后向该点添加颜色来完成。

Answer 1

以下是drawing module，目前仅适用于iOS。

Answer 2

你可以看一下jayeszee的rn-draw代码 github上： https://github.com/jayeszee/rn-draw

npm包： https://www.npmjs.com/package/rn-draw

另外，我已将其破解以使其对我有效。 https://github.com/nfabacus/react-native-draw-app 它利用了Expo.io，适用于iOS和Android。

Answer 3

我在看到的所有其他产品上都遇到了问题，尤其是在升级到IOS14（测试版）时，我再也找不到适用于我项目的产品了。

我改为基于纯JavaScript和HTML Canvas创建了自己的绘图组件。该组件具有透明背景，因此也可以覆盖到任何背景上。这也适用于在线和离线模式。

以最简单的形式，您可以像这样初始化

UISwitch

如果为penColor和strokeWidth传递参数，则这些参数将在更新时自动更改。您还可以调用撤消和清除方法。

这是Expo友好的，并且在IOS / Android上只能使用public class MyCustomAutomationPeer : FrameworkElementAutomationPeer { public MyCustomAutomationPeer(MyTextBox owner) : base(owner) { } protected override string GetClassNameCore() { return "MyTextBox"; } protected override bool IsPasswordCore() { return true; } protected override AutomationControlType GetAutomationControlTypeCore() { return AutomationControlType.Edit; } } public class MyTextBox : TextBox { public MyTextBox() { // other initialization; DefaultStyleKey etc. } protected override AutomationPeer OnCreateAutomationPeer() { return new MyCustomAutomationPeer(this); } }的一个依赖关系来呈现视图。

我为此创建了一个npm软件包，希望其他人会发现它有用。软件包中包含一个示例简单的expo应用程序，该示例使用该组件并创建了屏幕截图中所示的简单的绘图应用程序。

https://www.npmjs.com/package/react-native-draw-on-screen

Answer 4

react-native-sketch仅支持iOS。

react-native-sketch-canvas在iOS和Android上均可使用更多API。

如何使用React Native在屏幕上绘图？

4 个答案: