kamp/IOPaint
1
0
Fork 0
Code Issues Pull Requests Releases 1 Activity

Enhance mouseXY function to support touch events

Browse Source
This commit is contained in:
factman60@gmail.com 2024-05-26 04:38:40 +01:00
parent c738432de0
commit e6aac849fd
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web_app/src/lib/utils.ts
View File

@ -180,8 +180,18 @@ export function downloadImage(uri: string, name: string) {
} }
export function mouseXY(ev: SyntheticEvent) { export function mouseXY(ev: SyntheticEvent) {
const mouseEvent = ev.nativeEvent as MouseEvent const mouseEvent = ev.nativeEvent as MouseEvent
return { x: mouseEvent.offsetX, y: mouseEvent.offsetY } // Handle mask drawing coordinate on mobile/tablet devices
if ('touches' in ev) {
const rect = (ev.target as HTMLCanvasElement).getBoundingClientRect();
const touches = ev.touches as (Touch & { target: HTMLCanvasElement })[]
const touch = touches[0]
return {
x: (touch.clientX - rect.x) / rect.width * touch.target.offsetWidth,
y: (touch.clientY - rect.y) / rect.height * touch.target.offsetHeight,
}
}
return {x: mouseEvent.offsetX, y: mouseEvent.offsetY}
} }
export function drawLines( export function drawLines(