zakarya/puzzles
1
0
Fork 0
mirror of git://git.tartarus.org/simon/puzzles.git synced 2025-04-22 00:15:46 -07:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Ben Harris
2022-11-25 18:42:44 +00:00
parent d90c0a9edb
commit a6a799720f
1 changed files with 4 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
emccpre.js
View File

@ -173,14 +173,10 @@ function relative_mouse_coords(event, element) {
// This depends on the details of how a canvas gets scaled by CSS. // This depends on the details of how a canvas gets scaled by CSS.
function canvas_mouse_coords(event, element) { function canvas_mouse_coords(event, element) {
var rcoords = relative_mouse_coords(event, element); var rcoords = relative_mouse_coords(event, element);
// Assume that the canvas is as large as possible within its CSS // Assume that the CSS object-fit property is "fill" (the default).
// box without changing its aspect ratio. var xscale = element.width / element.offsetWidth;
var scale = Math.max(element.width / element.offsetWidth, var yscale = element.height / element.offsetHeight;
element.height / element.offsetHeight); return {x: rcoords.x * xscale, y: rcoords.y * yscale}
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}
} }
// Enable and disable items in the CSS menus. // Enable and disable items in the CSS menus.