pabloid
/
tsgames
1
0
Fork 0
Code

Nice zoom

This commit is contained in:
Pabloader 2024-06-25 22:25:55 +00:00
parent e5a1f361ed
commit 0f7304851e
2 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/game.ts
View File

@ -33,12 +33,15 @@ export default class Game {
private onScroll = (event: WheelEvent) => { private onScroll = (event: WheelEvent) => {
const direction = event.deltaY / Math.abs(event.deltaY); const direction = event.deltaY / Math.abs(event.deltaY);
let scale = 1;
if (direction < 0) { if (direction < 0) {
this.graphics.scale /= 1.1; scale = 1.1;
} else if (direction > 0) { } else if (direction > 0) {
this.graphics.scale *= 1.1; scale = 1/ 1.1;
} }
this.graphics.applyScale(scale, [event.clientX, event.clientY]);
event.preventDefault(); event.preventDefault();
} }

16
src/graphics.ts
View File

@ -21,16 +21,16 @@ export default class Graphics {
return [this.canvas.width, this.canvas.height]; return [this.canvas.width, this.canvas.height];
} }
get scale() { applyScale(scale: number, point: Point) {
return 1.0 / this.tileSize; const newTileSize = Math.min(Math.max(this.tileSize * scale, 2), this.width / 2, this.height / 2);
} const realScale = newTileSize / this.tileSize;
this.tileSize = newTileSize;
set scale(value) { this.offset = exp`((${this.offset} - ${point}) * ${realScale}) + ${point}`;
this.tileSize = Math.min(Math.max(1.0 / value, 2), this.width / 2, this.height / 2);
} }
pan(amount: Point) { pan(amount: Point) {
this.offset = exp`${this.offset} + ${amount} / ${this.tileSize}`; this.offset = exp`${this.offset} + ${amount}`;
} }
clear() { clear() {
@ -71,10 +71,10 @@ export default class Graphics {
} }
worldToScreen(point: Point): Point { worldToScreen(point: Point): Point {
return exp`(${point} + ${this.offset}) * ${this.tileSize} + ${this.size} / ${2}`; return exp`${point} * ${this.tileSize} + ${this.offset}`;
} }
screenToWorld(point: Point): Point { screenToWorld(point: Point): Point {
return exp`(${point} - ${this.size} / ${2}) / ${this.tileSize} - ${this.offset}`; return exp`(${point} - ${this.offset}) / ${this.tileSize}`;
} }
} }