Учет SVG ViewBox в реакции нативной с помощью PanResponder - PullRequest
Новая
       34

Учет SVG ViewBox в реакции нативной с помощью PanResponder

1 голос
/ 05 июня 2019

Я пытаюсь сделать SVG-элемент перетаскиваемым внутри, но PanResponder не учитывает SVG viewBox, в результате чего перетаскиваемый элемент не следует за касанием экрана.

Я пытался использовать значения X и Y события касания, чтобы повлиять на значения X и Y элемента SVG, но получил худший эффект, чем когда я использую PanResponder.Когда я переключился на использование только значений X и Y события касания, я попытался преобразовать событие касания X и Y в координаты SVG, используя уравнение, которое я нашел на svgwg.org.

viewBox: "0 0 960.1 1856.51"

Код, использованный при преобразовании значений XY в 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;

Когда он отображается внутри SVG, которыйВысота устройства 100%, я навязываю альбом на iPad, я позволяю им увеличивать SVG, который используется, чтобы детали были яснее.Если они увеличивают, где SVG занимает весь экран, элемент перемещается с правильной скоростью с помощью PanResponder и почти полностью следует касанию, но если они уменьшены или на экране по умолчанию, мы показываем им, где виден весь SVG,перетаскиваемый элемент движется медленно и плохо отслеживается.

Я не уверен, что я должен делать по-другому, чтобы заставить SVG-элемент хорошо отслеживать, независимо от того, увеличены они или нет в SVG.

...