HTML5Window.handleResize: various "prefer exact integers" fixes for the non-stretch case:

Avoid dividing by zero if we somehow come in with setWidth or setHeight 0 (taking a hint from recent handleTouchEvent changes -- we never witnessed this but it seemed worth a bit of paranoia while we were making changes).

Prefer meeting either element.clientWidth or element.clientHeight exactly if scaleX or scaleY are smaller, respectively.  This avoids introducing float inaccuracies in some cases by recomputing style.width or style.height later.

When multiplying the other dimension, round down. Similarly, when computing margins, round down.  This avoids a half-pixel offset (possible performance implications?) in cases where the difference between the computed dimension is different from the client dimension by an odd amount (could e.g. see "marginLeft: -0.5px" here due to this and the aforementioned recompute).

Also dedupes a bit of code between the "we have a canvas" vs "we have a div" branches.

Reviewed locally by Jon Meschino.
This commit is contained in:
Leander Hasty
2015-11-25 16:18:03 -05:00
parent 9d95964f2f
commit ca2a5cba9a

View File

@@ -389,29 +389,42 @@ class HTML5Window {
} else {
var scaleX = element.clientWidth / setWidth;
var scaleY = element.clientHeight / setHeight;
var scaleX = (setWidth != 0) ? (element.clientWidth / setWidth) : 1;
var scaleY = (setHeight != 0) ? (element.clientHeight / setHeight) : 1;
var currentRatio = scaleX / scaleY;
var targetRatio = Math.min (scaleX, scaleY);
var targetW = element.clientWidth;
var targetH = element.clientHeight;
var marginLeft = 0;
var marginTop = 0;
if (scaleX < scaleY)
{
targetH = Math.floor(setHeight * scaleX);
marginTop = Math.floor((element.clientHeight - targetH) / 2);
}
else
{
targetW = Math.floor(setWidth * scaleY);
marginLeft = Math.floor((element.clientWidth - targetW) / 2);
}
if (canvas != null) {
if (element != cast canvas) {
canvas.style.width = setWidth * targetRatio + "px";
canvas.style.height = setHeight * targetRatio + "px";
canvas.style.marginLeft = ((element.clientWidth - (setWidth * targetRatio)) / 2) + "px";
canvas.style.marginTop = ((element.clientHeight - (setHeight * targetRatio)) / 2) + "px";
canvas.style.width = targetW + "px";
canvas.style.height = targetH + "px";
canvas.style.marginLeft = marginLeft + "px";
canvas.style.marginTop = marginTop + "px";
}
} else {
div.style.width = setWidth * targetRatio + "px";
div.style.height = setHeight * targetRatio + "px";
div.style.marginLeft = ((element.clientWidth - (setWidth * targetRatio)) / 2) + "px";
div.style.marginTop = ((element.clientHeight - (setHeight * targetRatio)) / 2) + "px";
div.style.width = targetW + "px";
div.style.height = targetH + "px";
div.style.marginLeft = marginLeft + "px";
div.style.marginTop = marginTop + "px";
}