UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-21 09:16:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix zoom bug due to screen size remaining the same at different zoom level.

Browse Source
This commit is contained in:
Davide Tantillo 2024-09-26 13:02:48 +02:00
parent e8511ca8b2
commit e9873147c2
1 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
spine-ts/spine-webgl/src/SpineWebComponentWidget.ts
View File

@ -1017,8 +1017,6 @@ class SpineWebComponentOverlay extends HTMLElement {
divBounds.x += this.overflowLeftSize; divBounds.x += this.overflowLeftSize;
divBounds.y += this.overflowTopSize; divBounds.y += this.overflowTopSize;
// TODO: drag does not work while clip is on
let divOriginX = 0; let divOriginX = 0;
let divOriginY = 0; let divOriginY = 0;
if (clip) { if (clip) {
@ -1283,7 +1281,16 @@ class SpineWebComponentOverlay extends HTMLElement {
} }
private resizeCanvas() { private resizeCanvas() {
const { width, height } = this.getScreenSize(); let { width, height } = this.getScreenSize();
// this is needed because screen size is wrong when zoom levels occurs
// zooming out will make the canvas smaller and its known that zoom level
// on browsers is not reliable
// ideally, window.innerWidth/innerHeight would be preferrable. However
// on mobile browsers the dynamic search bar makes the innerHeight smaller
// at the beginning (changing the canvas size at each scroll is not ideal)
width = Math.max(width, window.innerWidth);
height = Math.max(height, window.innerHeight);
if (this.currentCanvasBaseWidth !== width || this.currentCanvasBaseHeight !== height) { if (this.currentCanvasBaseWidth !== width || this.currentCanvasBaseHeight !== height) {
this.currentCanvasBaseWidth = width; this.currentCanvasBaseWidth = width;
@ -1324,13 +1331,9 @@ class SpineWebComponentOverlay extends HTMLElement {
skeleton.scaleX = skeleton.scaleX / widget.currentScaleDpi * scale; skeleton.scaleX = skeleton.scaleX / widget.currentScaleDpi * scale;
skeleton.scaleY = skeleton.scaleY / widget.currentScaleDpi * scale; skeleton.scaleY = skeleton.scaleY / widget.currentScaleDpi * scale;
widget.currentScaleDpi = scale; widget.currentScaleDpi = scale;
});
// TODO: improve this horrible thing this.renderer.resize3(parseFloat(this.canvas.style.width), parseFloat(this.canvas.style.height));
this.renderer.resize3(
+this.canvas.style.width.substring(0, this.canvas.style.width.length - 2),
+this.canvas.style.height.substring(0, this.canvas.style.height.length - 2),
);
})
} }
// we need the bounding client rect otherwise decimals won't be returned // we need the bounding client rect otherwise decimals won't be returned