如何在滚动上做出反应-konva 缩放答案

【问题标题】：how to react-konva zooming on scroll如何在滚动上做出反应-konva 缩放
【发布时间】：2021-04-21 23:42:26
【问题描述】：

您好，我正在尝试在我的 react 项目中的矩形上实现缩放功能，但找不到以反应方式实现它的方法？请问有什么帮助吗？

这是我找到的 html konva 示例：
https://konvajs.github.io/docs/sandbox/Zooming_Relative_To_Pointer.html

【问题讨论】：

【解决方案1】：

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.02;
    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;


    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/react-konva-zoom-on-scroll-demo-9t7ks

【讨论】：

如何使用钩子实现这一点？
仅供参考：要反转缩放方向，只需将 newScale 条件从 e.evt.deltaY > 0 更改为 e.evt.deltaY < 0。

【解决方案2】：

使用钩子和反向缩放方向更新答案：

import React, { useState } from "react";
import Konva from "konva";
import { render } from "react-dom";
import { Stage, Layer, Circle } from "react-konva";

const App = () => {
  const [stage, setStage] = useState({
    scale: 1,
    x: 0,
    y: 0
  });

  const handleWheel = (e) => {
    e.evt.preventDefault();

    const scaleBy = 1.02;
    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;

    setStage({
      scale: newScale,
      x: (stage.getPointerPosition().x / newScale - mousePointTo.x) * newScale,
      y: (stage.getPointerPosition().y / newScale - mousePointTo.y) * newScale
    });
  };

  return (
    <Stage
      width={window.innerWidth}
      height={window.innerHeight}
      onWheel={handleWheel}
      scaleX={stage.scale}
      scaleY={stage.scale}
      x={stage.x}
      y={stage.y}
    >
      <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/react-konva-zoom-on-scroll-demo-forked-70vsj

【讨论】：