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 ?
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'));
Demo: https://codesandbox.io/s/react-konva-zoom-on-scroll-demo-9t7ks
Updated answer using hooks and reversed zoom direction:
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"));
Demo: https://codesandbox.io/s/react-konva-zoom-on-scroll-demo-forked-70vsj
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With