使用PanResponder在React Native中解决SVG viewBox的问题

Question

我正在尝试使SVG元素在内部可拖动，但是PanResponder无法解决SVG viewBox导致拖动的元素不跟随屏幕周围的触摸的问题。

我曾尝试利用touch事件的X和Y值来影响SVG元素的X和Y值，但效果要比使用PanResponder时差。当我切换为仅使用触摸事件的X和Y值时，我尝试使用在svgwg.org上找到的方程式将触摸事件X和Y转换为SVG坐标。

viewBox: "0 0 960.1 1856.51"

我将X Y值转换为SVG坐标时使用的代码

svgXYConvert = (eX, eY) =>{
    let eW = this.props.width; 
    let eH = this.props.height;
    let [vbX, vbY, vbW, vbH] = this.props.viewBox.split(" ");

    // Calculate the scale of elements and vb
    let scaleX = eW/vbW;
    let scaleY = eH/vbH;

    // translation points
    let translateX = eX - (vbX * scaleX);
    let translateY = eY - (vbY * scaleY);
    return [translateX, translateY];
}

PanResponder组件

import React from 'react';
import {PanResponder, Animated} from 'react-native';
import {Image, G, Rect} from 'react-native-svg';

const AnimatedG = Animated.createAnimatedComponent(G);

class DragImg extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
          pan: new Animated.ValueXY({x: this.props.x, y: this.props.y}),
          x: this.props.x,
          y: this.props.y,
        }
      }
    componentWillMount() {
      this._panResponder = PanResponder.create({
            onPanResponderTerminationRequest: () => false,
            onStartShouldSetPanResponder: (e, gesture) => true,
            onPanResponderGrant: (e, gesture) => {
              this.state.pan.setOffset(this.state.pan.__getValue());
            },
            onPanResponderMove: Animated.event([
                null, { dx: this.state.pan.x, dy: this.state.pan.y}
              ])
            },
            onPanResponderRelease: (e) => {
              this.state.pan.flattenOffset();
            }
        })
    }
    render(){        
        let imgStyle = {transform: this.state.pan.getTranslateTransform()};
        return <AnimatedG style={imgStyle} {...this._panResponder.panHandlers} x={this.state.x} y={this.state.y}>
            <Image href={this.props.href} height={this.props.height} width={this.props.width} />
            <Rect fill="transparent" height={this.props.height} width={this.props.width}/>
          </AnimatedG>
    }
}
export default DragImg;

[将其呈现在设备高度100％的SVG内部时，我在iPad上施加横向压力，允许他们缩放正在使用的SVG，以便更清晰地查看细节。如果他们放大了SVG占据整个屏幕的位置，则元素会通过PanResponder以正确的速度移动并几乎完美地跟随触摸，但是如果将它们缩小或在默认屏幕上显示，则可以向他们展示整个SVG的位置。拖动的元素移动缓慢且跟踪效果不佳。

我不确定无论SVG元素在SVG上放大还是缩小，我都应该做些不同的事情来使SVG元素很好地跟踪。

Answer 1

如果要在SVG上保留比例，则需要使用相同的比例因子来转换X轴和Y轴的坐标。