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}; }

Источник