как реагировать - конва зуммирует на свитке - PullRequest
Новая
       6

как реагировать - конва зуммирует на свитке

0 голосов
/ 28 августа 2018

Здравствуйте, я пытаюсь реализовать функцию масштабирования прямоугольника в моем проекте реагирования, но не можете найти способ сделать это способом реагирования? любая помощь, пожалуйста?

Вот пример HTML-конвы, который я нашел:
https://konvajs.github.io/docs/sandbox/Zooming_Relative_To_Pointer.html

1 Ответ

0 голосов
/ 29 августа 2018 
import React, { Component } from 'react';
import Konva from 'konva';
import { render } from 'react-dom';
import { Stage, Layer, Circle } from 'react-konva';

class App extends Component {
  state = {
    stageScale: 1,
    stageX: 0,
    stageY: 0
  };
  handleWheel = e => {
    e.evt.preventDefault();

    const scaleBy = 1.01;
    const stage = e.target.getStage();
    const oldScale = stage.scaleX();
    const mousePointTo = {
      x: stage.getPointerPosition().x / oldScale - stage.x() / oldScale,
      y: stage.getPointerPosition().y / oldScale - stage.y() / oldScale
    };

    const newScale = e.evt.deltaY > 0 ? oldScale * scaleBy : oldScale / scaleBy;

    stage.scale({ x: newScale, y: newScale });

    this.setState({
      stageScale: newScale,
      stageX:
        -(mousePointTo.x - stage.getPointerPosition().x / newScale) * newScale,
      stageY:
        -(mousePointTo.y - stage.getPointerPosition().y / newScale) * newScale
    });
  };
  render() {
    return (
      <Stage
        width={window.innerWidth}
        height={window.innerHeight}
        onWheel={this.handleWheel}
        scaleX={this.state.stageScale}
        scaleY={this.state.stageScale}
        x={this.state.stageX}
        y={this.state.stageY}
      >
        <Layer>
          <Circle
            x={window.innerWidth / 2}
            y={window.innerHeight / 2}
            radius={50}
            fill="green"
            shadowBlur={5}
          />
        </Layer>
      </Stage>
    );
  }
}

render(<App />, document.getElementById('root'));

Демо: https://codesandbox.io/s/zn5n57r0wl

...