ethonion10/v86
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Canvas screen: Fix scaling height, unblur non-fractional scales, handle fractional css-to-device pixel ratios

Browse source
This commit is contained in:
copy 2017-06-14 13:19:28 -05:00
parent 1669fa93bb
commit 49b6fecdba
2 changed files with 35 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/browser/screen.js
View file

@ -346,6 +346,13 @@ function ScreenAdapter(screen_container, bus)
elem.style.width = "";
elem.style.height = "";
if(use_scale)
{
elem.style.transform = elem.style.webkitTransform = elem.style.MozTransform = "";
}
var rectangle = elem.getBoundingClientRect();
if(use_scale)
{
var scale_str = "";
@ -355,14 +362,40 @@ function ScreenAdapter(screen_container, bus)
elem.style.transform = elem.style.webkitTransform = elem.style.MozTransform = scale_str;
}
else
{
// unblur non-fractional scales
if(scale_x % 1 === 0 && scale_y % 1 === 0)
{
graphic_screen.style.imageRendering = "-moz-crisp-edges";
graphic_screen.style.imageRendering = "moz-crisp-edges";
graphic_screen.style.imageRendering = "webkit-optimize-contrast";
graphic_screen.style.imageRendering = "o-crisp-edges";
graphic_screen.style.imageRendering = "pixelated";
graphic_screen.style["-ms-interpolation-mode"] = "nearest-neighbor";
}
else
{
graphic_screen.style.imageRendering = "";
graphic_screen.style["-ms-interpolation-mode"] = "";
}
// undo fractional css-to-device pixel ratios
var device_pixel_ratio = window.devicePixelRatio || 1;
if(device_pixel_ratio % 1 !== 0)
{
scale_x /= device_pixel_ratio;
scale_y /= device_pixel_ratio;
}
}
if(scale_x !== 1)
{
elem.style.width = Math.ceil(elem.offsetWidth * scale_x) + "px";
elem.style.width = rectangle.width * scale_x + "px";
}
if(scale_y !== 1)
{
elem.style.height = Math.ceil(elem.offsetHeight * scale_y) + "px";
elem.style.height = rectangle.height * scale_y + "px";
}
}

7
v86.css
View file

@ -41,13 +41,6 @@
transform-origin: top left;
}
#vga {
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: -o-crisp-edges;
image-rendering: optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;
background-color: #000;
}
body {