From 456504cf8281c972fded04e1496498d494891707 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Fri, 24 Oct 2025 11:14:12 +0900
Subject: [PATCH] Fix touch position offset in image masking on iOS devices
 (#16702)

* Initial plan

* Fix iOS touch position offset in image masking feature

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
---
 .../src/components/MkImageEffectorDialog.vue     | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/components/MkImageEffectorDialog.vue b/packages/frontend/src/components/MkImageEffectorDialog.vue
index 19ddb81919..0fc8fa9dcc 100644
--- a/packages/frontend/src/components/MkImageEffectorDialog.vue
+++ b/packages/frontend/src/components/MkImageEffectorDialog.vue
@@ -257,8 +257,12 @@ function onImagePointerdown(ev: PointerEvent) {
 	xOffset /= 2;
 	yOffset /= 2;
 
-	let startX = ev.offsetX - xOffset;
-	let startY = ev.offsetY - yOffset;
+	const rect = canvasEl.value.getBoundingClientRect();
+	const pointerOffsetX = ev.clientX - rect.left;
+	const pointerOffsetY = ev.clientY - rect.top;
+
+	let startX = pointerOffsetX - xOffset;
+	let startY = pointerOffsetY - yOffset;
 
 	if (AW / AH < BW / BH) { // 横長
 		startX = startX / (Math.max(AW, AH) / Math.max(BH / BW, 1));
@@ -311,9 +315,11 @@ function onImagePointerdown(ev: PointerEvent) {
 		});
 	}
 
-	_move(ev.offsetX, ev.offsetY);
+	_move(ev.clientX, ev.clientY);
 
-	function _move(pointerX: number, pointerY: number) {
+	function _move(pointerClientX: number, pointerClientY: number) {
+		const pointerX = pointerClientX - rect.left;
+		const pointerY = pointerClientY - rect.top;
 		let x = pointerX - xOffset;
 		let y = pointerY - yOffset;
 
@@ -340,7 +346,7 @@ function onImagePointerdown(ev: PointerEvent) {
 	}
 
 	function move(ev: PointerEvent) {
-		_move(ev.offsetX, ev.offsetY);
+		_move(ev.clientX, ev.clientY);
 	}
 
 	function up() {