Compensating the shift with the delta due to the zoom.

This commit is contained in:
Eric van der Vlist 2022-09-09 23:49:17 +02:00
parent e7ba10d221
commit 6a0193e2f1
4 changed files with 20 additions and 7 deletions

View File

@ -1,5 +1,5 @@
{
"name": "empty-ionic-react",
"name": "background move",
"integrations": {
"capacitor": {}
},

View File

@ -5,7 +5,7 @@ import _ from 'lodash';
import { Point } from './viewport';
interface DoubleTouchHandlerProps {
updateZoom: (zoomFactor: number) => void;
updateZoom: (zoomFactor: number, center: Point) => void;
children: any;
}
@ -88,7 +88,10 @@ const DoubleTouchHandler: react.FC<DoubleTouchHandlerProps> = (
distance: touchState.distance,
initialZoom: 1,
});
props.updateZoom(factor);
props.updateZoom(factor, {
x: (event.touches[0].pageX + event.touches[1].pageX) / 2,
y: (event.touches[0].pageY + event.touches[1].pageY) / 2,
});
}
}
};

View File

@ -17,7 +17,7 @@ export interface Point {
const Viewport: react.FC<{}> = (props: {}) => {
console.log(`--- Rendering viewport, props: ${JSON.stringify(props)} ---`);
const initialShitf: Point = { x: 1000, y: 1000 };
const initialShitf: Point = { x: 0, y: 0 };
const [shift, setShift] = useState(initialShitf);
@ -35,9 +35,18 @@ const Viewport: react.FC<{}> = (props: {}) => {
setShift({ x: shift.x + shiftDelta.x, y: shift.y + shiftDelta.y });
};
const updateZoom = (zoomFactor: number) => {
setZoom(zoom * zoomFactor);
};
const updateZoom = (zoomFactor: number, center: Point) => {
const newZoom = zoom * zoomFactor;
setZoom(newZoom);
setShift({
x: shift.x + center.x / zoom - center.x / newZoom,
y: shift.y + center.y / zoom - center.y / newZoom,
});
// setShift({
// x: shift.x + 1440 / 2 / zoom - window.innerWidth / 2 / newZoom,
// y: shift.y + 2904 / 2 / zoom - window.innerHeight / 2 / newZoom,
// });
};
return (
<div className='viewport'>

View File

@ -3,5 +3,6 @@
width: 4032px;
height: 2268px;
z-index: -1;
transform-origin: top left;
}