如何对konva放大滚动做出反应 [英] how to react-konva zooming on scroll
本文介绍了如何对konva放大滚动做出反应的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
您好,我想在我的react项目中的rect上实现缩放功能,但是找不到找到它的方法吗?有什么帮助吗?
Hello im trying to implement a zoom feature on a rect in my react project but can't find a way to do it the react way? any help please ?
这是我发现的html konva示例:
https://konvajs.github.io/docs/sandbox/Zooming_Relative_To_Pointer.html
this is the html konva example i've found :
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
这篇关于如何对konva放大滚动做出反应的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文