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

[ts][widget] Fixed retina handling, scale backbuffer of canvas by device pixel ratio

Browse Source
This commit is contained in:
badlogic 2017-04-18 10:02:03 +02:00
parent 52fc282984
commit 355d80129f
5 changed files with 44 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
spine-ts/build/spine-all.js
View File

@ -9065,10 +9065,13 @@ var spine;
if (element == null) if (element == null)
throw new Error("Element " + elementId + " does not exist"); throw new Error("Element " + elementId + " does not exist");
this.validateConfig(config); this.validateConfig(config);
var canvas = this.canvas = document.createElement("canvas"); var existingCanvas = element.children[0];
var canvas = this.canvas = existingCanvas || document.createElement("canvas");
canvas.style.width = "100%"; canvas.style.width = "100%";
canvas.style.height = "100%"; canvas.style.height = "100%";
element.appendChild(canvas); if (!existingCanvas) {
element.appendChild(canvas);
}
canvas.width = element.clientWidth; canvas.width = element.clientWidth;
canvas.height = element.clientHeight; canvas.height = element.clientHeight;
var webglConfig = { alpha: config.alpha }; var webglConfig = { alpha: config.alpha };
@ -9253,25 +9256,26 @@ var spine;
var w = canvas.clientWidth; var w = canvas.clientWidth;
var h = canvas.clientHeight; var h = canvas.clientHeight;
var bounds = this.bounds; var bounds = this.bounds;
if (canvas.width != w || canvas.height != h) { var devicePixelRatio = window.devicePixelRatio || 1;
canvas.width = w; if (canvas.width != Math.floor(w * devicePixelRatio) || canvas.height != Math.floor(h * devicePixelRatio)) {
canvas.height = h; canvas.width = Math.floor(w * devicePixelRatio);
canvas.height = Math.floor(h * devicePixelRatio);
} }
if (this.config.fitToCanvas) { if (this.config.fitToCanvas) {
var centerX = bounds.offset.x + bounds.size.x / 2; var centerX = bounds.offset.x + bounds.size.x / 2;
var centerY = bounds.offset.y + bounds.size.y / 2; var centerY = bounds.offset.y + bounds.size.y / 2;
var scaleX = bounds.size.x / canvas.width; var scaleX = bounds.size.x / w;
var scaleY = bounds.size.y / canvas.height; var scaleY = bounds.size.y / h;
var scale = Math.max(scaleX, scaleY) * 1.2; var scale = Math.max(scaleX, scaleY) * 1.2;
if (scale < 1) if (scale < 1)
scale = 1; scale = 1;
var width = canvas.width * scale; var width = w * scale;
var height = canvas.height * scale; var height = h * scale;
this.skeleton.x = this.skeleton.y = 0; this.skeleton.x = this.skeleton.y = 0;
this.mvp.ortho2d(centerX - width / 2, centerY - height / 2, width, height); this.mvp.ortho2d(centerX - width / 2, centerY - height / 2, width, height);
} }
else { else {
this.mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1); this.mvp.ortho2d(0, 0, w - 1, h - 1);
} }
this.gl.viewport(0, 0, canvas.width, canvas.height); this.gl.viewport(0, 0, canvas.width, canvas.height);
}; };

2
spine-ts/build/spine-all.js.map
View File

File diff suppressed because one or more lines are too long

24
spine-ts/build/spine-widget.js
View File

@ -8547,10 +8547,13 @@ var spine;
if (element == null) if (element == null)
throw new Error("Element " + elementId + " does not exist"); throw new Error("Element " + elementId + " does not exist");
this.validateConfig(config); this.validateConfig(config);
var canvas = this.canvas = document.createElement("canvas"); var existingCanvas = element.children[0];
var canvas = this.canvas = existingCanvas || document.createElement("canvas");
canvas.style.width = "100%"; canvas.style.width = "100%";
canvas.style.height = "100%"; canvas.style.height = "100%";
element.appendChild(canvas); if (!existingCanvas) {
element.appendChild(canvas);
}
canvas.width = element.clientWidth; canvas.width = element.clientWidth;
canvas.height = element.clientHeight; canvas.height = element.clientHeight;
var webglConfig = { alpha: config.alpha }; var webglConfig = { alpha: config.alpha };
@ -8735,25 +8738,26 @@ var spine;
var w = canvas.clientWidth; var w = canvas.clientWidth;
var h = canvas.clientHeight; var h = canvas.clientHeight;
var bounds = this.bounds; var bounds = this.bounds;
if (canvas.width != w || canvas.height != h) { var devicePixelRatio = window.devicePixelRatio || 1;
canvas.width = w; if (canvas.width != Math.floor(w * devicePixelRatio) || canvas.height != Math.floor(h * devicePixelRatio)) {
canvas.height = h; canvas.width = Math.floor(w * devicePixelRatio);
canvas.height = Math.floor(h * devicePixelRatio);
} }
if (this.config.fitToCanvas) { if (this.config.fitToCanvas) {
var centerX = bounds.offset.x + bounds.size.x / 2; var centerX = bounds.offset.x + bounds.size.x / 2;
var centerY = bounds.offset.y + bounds.size.y / 2; var centerY = bounds.offset.y + bounds.size.y / 2;
var scaleX = bounds.size.x / canvas.width; var scaleX = bounds.size.x / w;
var scaleY = bounds.size.y / canvas.height; var scaleY = bounds.size.y / h;
var scale = Math.max(scaleX, scaleY) * 1.2; var scale = Math.max(scaleX, scaleY) * 1.2;
if (scale < 1) if (scale < 1)
scale = 1; scale = 1;
var width = canvas.width * scale; var width = w * scale;
var height = canvas.height * scale; var height = h * scale;
this.skeleton.x = this.skeleton.y = 0; this.skeleton.x = this.skeleton.y = 0;
this.mvp.ortho2d(centerX - width / 2, centerY - height / 2, width, height); this.mvp.ortho2d(centerX - width / 2, centerY - height / 2, width, height);
} }
else { else {
this.mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1); this.mvp.ortho2d(0, 0, w - 1, h - 1);
} }
this.gl.viewport(0, 0, canvas.width, canvas.height); this.gl.viewport(0, 0, canvas.width, canvas.height);
}; };

2
spine-ts/build/spine-widget.js.map
View File

File diff suppressed because one or more lines are too long

24
spine-ts/widget/src/Widget.ts
View File

@ -60,10 +60,13 @@ module spine {
this.validateConfig(config); this.validateConfig(config);
let canvas = this.canvas = document.createElement("canvas"); let existingCanvas = <HTMLCanvasElement>element.children[0];
let canvas = this.canvas = existingCanvas || document.createElement("canvas");
canvas.style.width = "100%"; canvas.style.width = "100%";
canvas.style.height = "100%"; canvas.style.height = "100%";
(<HTMLElement> element).appendChild(canvas); if (!existingCanvas) {
(<HTMLElement> element).appendChild(canvas);
}
canvas.width = (<HTMLElement>element).clientWidth; canvas.width = (<HTMLElement>element).clientWidth;
canvas.height = (<HTMLElement>element).clientHeight; canvas.height = (<HTMLElement>element).clientHeight;
var webglConfig = { alpha: config.alpha }; var webglConfig = { alpha: config.alpha };
@ -242,25 +245,26 @@ module spine {
let w = canvas.clientWidth; let w = canvas.clientWidth;
let h = canvas.clientHeight; let h = canvas.clientHeight;
let bounds = this.bounds; let bounds = this.bounds;
if (canvas.width != w || canvas.height != h) { var devicePixelRatio = window.devicePixelRatio || 1;
canvas.width = w; if (canvas.width != Math.floor(w * devicePixelRatio) || canvas.height != Math.floor(h * devicePixelRatio)) {
canvas.height = h; canvas.width = Math.floor(w * devicePixelRatio);
canvas.height = Math.floor(h * devicePixelRatio);
} }
// magic // magic
if (this.config.fitToCanvas) { if (this.config.fitToCanvas) {
var centerX = bounds.offset.x + bounds.size.x / 2; var centerX = bounds.offset.x + bounds.size.x / 2;
var centerY = bounds.offset.y + bounds.size.y / 2; var centerY = bounds.offset.y + bounds.size.y / 2;
var scaleX = bounds.size.x / canvas.width; var scaleX = bounds.size.x / w;
var scaleY = bounds.size.y / canvas.height; var scaleY = bounds.size.y / h;
var scale = Math.max(scaleX, scaleY) * 1.2; var scale = Math.max(scaleX, scaleY) * 1.2;
if (scale < 1) scale = 1; if (scale < 1) scale = 1;
var width = canvas.width * scale; var width = w * scale;
var height = canvas.height * scale; var height = h * scale;
this.skeleton.x = this.skeleton.y = 0; this.skeleton.x = this.skeleton.y = 0;
this.mvp.ortho2d(centerX - width / 2, centerY - height / 2, width, height); this.mvp.ortho2d(centerX - width / 2, centerY - height / 2, width, height);
} else { } else {
this.mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1); this.mvp.ortho2d(0, 0, w - 1, h - 1);
} }
this.gl.viewport(0, 0, canvas.width, canvas.height); this.gl.viewport(0, 0, canvas.width, canvas.height);