UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-06 15:24:55 +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)
throw new Error("Element " + elementId + " does not exist");
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.height = "100%";
element.appendChild(canvas);
if (!existingCanvas) {
element.appendChild(canvas);
}
canvas.width = element.clientWidth;
canvas.height = element.clientHeight;
var webglConfig = { alpha: config.alpha };
@ -9253,25 +9256,26 @@ var spine;
var w = canvas.clientWidth;
var h = canvas.clientHeight;
var bounds = this.bounds;
if (canvas.width != w || canvas.height != h) {
canvas.width = w;
canvas.height = h;
var devicePixelRatio = window.devicePixelRatio || 1;
if (canvas.width != Math.floor(w * devicePixelRatio) || canvas.height != Math.floor(h * devicePixelRatio)) {
canvas.width = Math.floor(w * devicePixelRatio);
canvas.height = Math.floor(h * devicePixelRatio);
}
if (this.config.fitToCanvas) {
var centerX = bounds.offset.x + bounds.size.x / 2;
var centerY = bounds.offset.y + bounds.size.y / 2;
var scaleX = bounds.size.x / canvas.width;
var scaleY = bounds.size.y / canvas.height;
var scaleX = bounds.size.x / w;
var scaleY = bounds.size.y / h;
var scale = Math.max(scaleX, scaleY) * 1.2;
if (scale < 1)
scale = 1;
var width = canvas.width * scale;
var height = canvas.height * scale;
var width = w * scale;
var height = h * scale;
this.skeleton.x = this.skeleton.y = 0;
this.mvp.ortho2d(centerX - width / 2, centerY - height / 2, width, height);
}
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);
};

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)
throw new Error("Element " + elementId + " does not exist");
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.height = "100%";
element.appendChild(canvas);
if (!existingCanvas) {
element.appendChild(canvas);
}
canvas.width = element.clientWidth;
canvas.height = element.clientHeight;
var webglConfig = { alpha: config.alpha };
@ -8735,25 +8738,26 @@ var spine;
var w = canvas.clientWidth;
var h = canvas.clientHeight;
var bounds = this.bounds;
if (canvas.width != w || canvas.height != h) {
canvas.width = w;
canvas.height = h;
var devicePixelRatio = window.devicePixelRatio || 1;
if (canvas.width != Math.floor(w * devicePixelRatio) || canvas.height != Math.floor(h * devicePixelRatio)) {
canvas.width = Math.floor(w * devicePixelRatio);
canvas.height = Math.floor(h * devicePixelRatio);
}
if (this.config.fitToCanvas) {
var centerX = bounds.offset.x + bounds.size.x / 2;
var centerY = bounds.offset.y + bounds.size.y / 2;
var scaleX = bounds.size.x / canvas.width;
var scaleY = bounds.size.y / canvas.height;
var scaleX = bounds.size.x / w;
var scaleY = bounds.size.y / h;
var scale = Math.max(scaleX, scaleY) * 1.2;
if (scale < 1)
scale = 1;
var width = canvas.width * scale;
var height = canvas.height * scale;
var width = w * scale;
var height = h * scale;
this.skeleton.x = this.skeleton.y = 0;
this.mvp.ortho2d(centerX - width / 2, centerY - height / 2, width, height);
}
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);
};

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