How I Fixed Canvas Click Coordinates in Limn Engine

说明与用途

该补丁通过将客户端坐标转换为画布坐标并按画布内部分辨率缩放，修复了 Limn Engine 在缩放画布上的点击坐标错误。

问题

Buttons on scaled canvases in Limn Engine were unclickable because mouse and touch coordinates were taken from page space instead of canvas space, causing mismatched positions on mobile and resized desktops.

结果

After applying the patch, button clicks on the Limn Arcade demo work correctly on phones, tablets, and resized desktop windows, with coordinates matching the canvas’s internal resolution.

工作流

• 1. Wrap the patch in an IIFE that checks for Display existence.
• 2. Define toCanvasCoords(clientX, clientY) to compute scaleX/Y from canvas.width/height and rect.width/height, then translate client coordinates to canvas space.
• 3. Replace the original mousedown listener with one that calls toCanvasCoords, adds camera offsets, and updates self.x/self.y.
• 4. Add continuous mousemove and touchmove listeners for consistent tracking.
• 5. Deploy the patch by including the script in the Limn Arcade demo or any Limn Engine project.

证据

The patch does three things the original didn’t do: scales mouse and touch coordinates, tracks mouse movement continuously, and unifies mouse and touch handling.

来源

toCanvasCoords(clientX, clientY) { var rect = self.canvas.getBoundingClientRect(); var scaleX = self.canvas.width / rect.width; var scaleY = self.canvas.height / rect.height; return {x: (clientX - rect.left) * scaleX, y: (clientY - rect.top) * scaleY}; }

来源