как использовать PanGestureHandler в Svg Path, когда рисовать диаграмму в реагировать родной - PullRequest
Новая
       7

как использовать PanGestureHandler в Svg Path, когда рисовать диаграмму в реагировать родной

1 голос
/ 20 января 2020

Я хочу создать диаграмму с помощью Svg, Path и выполнить эту задачу с моим кодом: 

import React from 'react';
import {
  StyleSheet, View, SafeAreaView, Dimensions, Animated, TextInput,
} from 'react-native';
import Svg,{Path, Defs, LinearGradient, Stop} from 'react-native-svg';
import * as path from 'svg-path-properties';
import * as shape from 'd3-shape';
import {scaleTime,scaleLinear,scaleQuantile,} from 'd3-scale';
import {PanGestureHandler,State} from 'react-native-gesture-handler';

const d3 = {
  shape,
};

const height = 200;
const { width } = Dimensions.get('window');
const verticalPadding = 5;
const cursorRadius = 10;

const data = [
  { x: new Date(2018, 9, 1), y: 100 },
  { x: new Date(2018, 9, 16), y: 0 },
  { x: new Date(2018, 9, 17), y: 200 },
  { x: new Date(2018, 10, 1), y: 100 },
  { x: new Date(2018, 10, 2), y: 300 },
  { x: new Date(2018, 10, 5), y: 300 },
];

const scaleX = scaleTime().domain([new Date(2018, 9, 1), new Date(2018, 10, 5)]).range([0, width]);
const scaleY = scaleLinear().domain([0, 300]).range([height - verticalPadding, verticalPadding]);
const line = d3.shape.line()
  .x(d => scaleX(d.x))
  .y(d => scaleY(d.y))
  .curve(d3.shape.curveBasis)(data);

export default class App extends React.Component {
  cursor = React.createRef();

  componentDidMount() {

  }

  render() {

    return (
      <SafeAreaView style={styles.root}>
        <View style={styles.container}>
          <Svg {...{ width, height }}>
            <Defs>
              <LinearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="gradient">
                <Stop stopColor="#CDE3F8" offset="0%" />
                <Stop stopColor="#eef6fd" offset="80%" />
                <Stop stopColor="#FEFFFF" offset="100%" />
              </LinearGradient>
            </Defs>
            <Path d={line} fill="transparent" stroke="#367be2" strokeWidth={5} />
            <Path d={`${line} L ${width} ${height} L 0 ${height}`} fill="url(#gradient)" />
            {/* <View ref={this.cursor} style={styles.cursor} /> */}
          </Svg>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
  },
  container: {
    marginTop: 60,
    height,
    width,
  },
  cursor: {
    width: cursorRadius * 2,
    height: cursorRadius * 2,
    borderRadius: cursorRadius,
    borderColor: '#367be2',
    borderWidth: 3,
    backgroundColor: 'white',
  }
});

Теперь я хочу, чтобы пользователь касался моего графика и двигал пальцем по <View ref={this.cursor} style={styles.cursor} /> Мой курсор появлялся на <Path d={line} fill="transparent" stroke="#367be2" strokeWidth={5} /> и двигался по нему.

, пожалуйста, помогите мне об этом, потому что я не знаю, как это сделать!

...