From ca2a5cba9a7c1e1d298b7afcbcfa58ec32f43964 Mon Sep 17 00:00:00 2001 From: Leander Hasty Date: Wed, 25 Nov 2015 16:18:03 -0500 Subject: [PATCH] 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. --- lime/_backend/html5/HTML5Window.hx | 37 ++++++++++++++++++++---------- 1 file changed, 25 insertions(+), 12 deletions(-) diff --git a/lime/_backend/html5/HTML5Window.hx b/lime/_backend/html5/HTML5Window.hx index 23bcca422..46e8f71cd 100644 --- a/lime/_backend/html5/HTML5Window.hx +++ b/lime/_backend/html5/HTML5Window.hx @@ -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"; }