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

Merge pull request #531 from factman/fix-mask-drawing-on-touch-devices

Browse Source 
Fix mask drawing on touch devices
This commit is contained in:
Qing 2024-06-13 09:02:53 +08:00 committed by GitHub
commit ef1f7a5324
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web_app/src/components/Editor.tsx
View File

@ -800,6 +800,9 @@ export default function Editor(props: EditorProps) {
onMouseDown={onMouseDown} onMouseDown={onMouseDown}
onMouseUp={onCanvasMouseUp} onMouseUp={onCanvasMouseUp}
onMouseMove={onMouseDrag} onMouseMove={onMouseDrag}
onTouchStart={onMouseDown}
onTouchEnd={onCanvasMouseUp}
onTouchMove={onMouseDrag}
ref={(r) => { ref={(r) => {
if (r && !context) { if (r && !context) {
const ctx = r.getContext("2d") const ctx = r.getContext("2d")

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

@ -181,6 +181,16 @@ 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
// 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} return {x: mouseEvent.offsetX, y: mouseEvent.offsetY}
} }