UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-04 14:24:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

dpi to dpr and transform DPR to DevicePixelRatio when needed. Add @internal tag to internal fields.

Browse Source
This commit is contained in:
Davide Tantillo 2025-04-30 12:46:43 +02:00
parent 5bf75239d9
commit dff3b66d26
1 changed files with 25 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -229,7 +229,7 @@ interface WidgetPublicProperties {
// Usage of this properties is discouraged because they can be made private in the future // Usage of this properties is discouraged because they can be made private in the future
interface WidgetInternalProperties { interface WidgetInternalProperties {
pma: boolean pma: boolean
currentScaleDpi: number dprScale: number
dragging: boolean dragging: boolean
dragX: number dragX: number
dragY: number dragY: number
@ -723,30 +723,35 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
public onScreenAtLeastOnce = false; public onScreenAtLeastOnce = false;
/** /**
* Holds the dpi (devicePixelRatio) currently used to calculate the scale for this skeleton * @internal
* Holds the dpr (devicePixelRatio) currently used to calculate the scale for this skeleton
* Do not rely on this properties. It might be made private in the future. * Do not rely on this properties. It might be made private in the future.
*/ */
public currentScaleDpi = 1; public dprScale = 1;
/** /**
* @internal
* The accumulated offset on the x axis due to dragging * The accumulated offset on the x axis due to dragging
* Do not rely on this properties. It might be made private in the future. * Do not rely on this properties. It might be made private in the future.
*/ */
public dragX = 0; public dragX = 0;
/** /**
* @internal
* The accumulated offset on the y axis due to dragging * The accumulated offset on the y axis due to dragging
* Do not rely on this properties. It might be made private in the future. * Do not rely on this properties. It might be made private in the future.
*/ */
public dragY = 0; public dragY = 0;
/** /**
* @internal
* If true, the widget is currently being dragged * If true, the widget is currently being dragged
* Do not rely on this properties. It might be made private in the future. * Do not rely on this properties. It might be made private in the future.
*/ */
public dragging = false; public dragging = false;
/** /**
* @internal
* If true, the widget has texture with premultiplied alpha * If true, the widget has texture with premultiplied alpha
* Do not rely on this properties. It might be made private in the future. * Do not rely on this properties. It might be made private in the future.
*/ */
@ -1055,9 +1060,9 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
// to simplify we just assume that the user wants to load the skeleton at scale 1 // to simplify we just assume that the user wants to load the skeleton at scale 1
// at the current browser zoom level // at the current browser zoom level
// this might be problematic for free-scale modes (origin and inside+none) // this might be problematic for free-scale modes (origin and inside+none)
this.currentScaleDpi = this.overlay.getDPR(); this.dprScale = this.overlay.getDevicePixelRatio();
// skeleton.scaleX = this.currentScaleDpi; // skeleton.scaleX = this.dprScale;
// skeleton.scaleY = this.currentScaleDpi; // skeleton.scaleY = this.dprScale;
// the bounds are calculated the first time, if no custom bound is provided // the bounds are calculated the first time, if no custom bound is provided
this.initWidget(this.bounds.width <= 0 || this.bounds.height <= 0); this.initWidget(this.bounds.width <= 0 || this.bounds.height <= 0);
@ -2194,7 +2199,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
let width = window.innerWidth; let width = window.innerWidth;
let height = window.innerHeight; let height = window.innerHeight;
const dpr = this.getDPR(); const dpr = this.getDevicePixelRatio();
if (dpr !== this.previousDPR) { if (dpr !== this.previousDPR) {
this.previousDPR = dpr; this.previousDPR = dpr;
this.previousWidth = this.previousWidth === 0 ? width : width * SpineWebComponentOverlay.WIDTH_INCREMENT; this.previousWidth = this.previousWidth === 0 ? width : width * SpineWebComponentOverlay.WIDTH_INCREMENT;
@ -2209,7 +2214,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
// if the resulting canvas width/height is too high, scale the DPI // if the resulting canvas width/height is too high, scale the DPI
if (this.previousHeight * (1 + this.overflowTop + this.overflowBottom) * dpr > SpineWebComponentOverlay.MAX_CANVAS_HEIGHT || if (this.previousHeight * (1 + this.overflowTop + this.overflowBottom) * dpr > SpineWebComponentOverlay.MAX_CANVAS_HEIGHT ||
this.previousWidth * (1 + this.overflowLeft + this.overflowRight) * dpr > SpineWebComponentOverlay.MAX_CANVAS_WIDTH) { this.previousWidth * (1 + this.overflowLeft + this.overflowRight) * dpr > SpineWebComponentOverlay.MAX_CANVAS_WIDTH) {
this.scaleDPR += .5; this.dprScale += .5;
return this.getScreenSize(); return this.getScreenSize();
} }
@ -2219,10 +2224,13 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
} }
} }
private scaleDPR = 1; /**
public getDPR () { * @internal
return window.devicePixelRatio / this.scaleDPR; */
public getDevicePixelRatio () {
return window.devicePixelRatio / this.dprScale;
} }
private dprScale = 1;
private scaleSkeletonDPR () { private scaleSkeletonDPR () {
this.skeletonList.forEach((widget) => { this.skeletonList.forEach((widget) => {
@ -2235,10 +2243,10 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
// I'm not sure about this. With mode origin and fit none: // I'm not sure about this. With mode origin and fit none:
// case 1) If I comment this scale code, the skeleton is never scaled and will be always at the same size and won't change size while zooming // case 1) If I comment this scale code, the skeleton is never scaled and will be always at the same size and won't change size while zooming
// case 2) Otherwise, the skeleton is loaded always at the same size, but changes size while zooming // case 2) Otherwise, the skeleton is loaded always at the same size, but changes size while zooming
const scale = this.getDPR(); const scale = this.getDevicePixelRatio();
skeleton.scaleX = skeleton.scaleX / widget.currentScaleDpi * scale; skeleton.scaleX = skeleton.scaleX / widget.dprScale * scale;
skeleton.scaleY = skeleton.scaleY / widget.currentScaleDpi * scale; skeleton.scaleY = skeleton.scaleY / widget.dprScale * scale;
widget.currentScaleDpi = scale; widget.dprScale = scale;
}); });
} }
@ -2299,10 +2307,10 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
this.renderer.camera.worldToScreen(vec, this.worldToScreenLength(this.renderer.camera.viewportWidth), this.worldToScreenLength(this.renderer.camera.viewportHeight)); this.renderer.camera.worldToScreen(vec, this.worldToScreenLength(this.renderer.camera.viewportWidth), this.worldToScreenLength(this.renderer.camera.viewportHeight));
} }
public screenToWorldLength (length: number) { public screenToWorldLength (length: number) {
return length * this.getDPR(); return length * this.getDevicePixelRatio();
} }
public worldToScreenLength (length: number) { public worldToScreenLength (length: number) {
return length / this.getDPR(); return length / this.getDevicePixelRatio();
} }
} }