您好,我正在尝试在我的 react 项目中的矩形上实现缩放功能,但找不到以 react 方式实现的方法?有什么帮助吗?
这是我找到的 html konva 示例:
https://konvajs.github.io/docs/sandbox/Zooming_Relative_To_Pointer.html
最佳答案
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
关于reactjs - 如何在滚动上 react konva 缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52054848/