shithub: puzzles

Info  •  Files  •  Log  •  Branches

js: Correct co-ordinate-mapping function for what CSS actually does

By default, CSS uses "object-fit: fill", which means that an object is
independently scaled in both dimensions to fit its containing box.
This is simpler than what I'd assumed (which was "object-fill:
contain").  Obviously, the HTML could be changed to use a different
object-fit, in which case this code would have to detect it, but for
now following the CSS default is more correct than not.

--- a/emccpre.js

+++ b/emccpre.js

@@ -173,14 +173,10 @@

 // This depends on the details of how a canvas gets scaled by CSS.

 function canvas_mouse_coords(event, element) {

     var rcoords = relative_mouse_coords(event, element);

-    // Assume that the canvas is as large as possible within its CSS

-    // box without changing its aspect ratio.

-    var scale = Math.max(element.width / element.offsetWidth,

-			 element.height / element.offsetHeight);

-    var xoffset = (element.offsetWidth - element.width / scale) / 2;

-    var yoffset = (element.offsetHeight - element.height / scale) / 2;

-    return {x: (rcoords.x - xoffset) * scale,

-	    y: (rcoords.y - yoffset) * scale}

+    // Assume that the CSS object-fit property is "fill" (the default).

+    var xscale = element.width / element.offsetWidth;

+    var yscale = element.height / element.offsetHeight;

+    return {x: rcoords.x * xscale, y: rcoords.y * yscale}

 }

 // Enable and disable items in the CSS menus.