usbharu
/
misskey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix iOS touch position offset in image masking 

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot] 2025-10-25 06:22:35 +00:00
parent 3ab64ac688
commit 263d476ffe
1 changed files with 19 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
packages/frontend/src/components/MkImageEffectorDialog.vue
View File

@ -242,35 +242,27 @@ function onImagePointerdown(ev: PointerEvent) {
const AW = canvasEl.value.clientWidth; const AW = canvasEl.value.clientWidth;
const AH = canvasEl.value.clientHeight; const AH = canvasEl.value.clientHeight;
const BW = imageBitmap.width; const BW = canvasEl.value.width; // Canvas intrinsic width (render width)
const BH = imageBitmap.height; const BH = canvasEl.value.height; // Canvas intrinsic height (render height)
let xOffset = 0; // Calculate the scale factor for object-fit: contain
let yOffset = 0; const scale = Math.min(AW / BW, AH / BH);
if (AW / AH < BW / BH) { // 横長 // Calculate the actual rendered size of the canvas content
yOffset = AH - BH * (AW / BW); const renderW = BW * scale;
} else { // 縦長 const renderH = BH * scale;
xOffset = AW - BW * (AH / BH);
} // Calculate the offset to center the image
const xOffset = (AW - renderW) / 2;
xOffset /= 2; const yOffset = (AH - renderH) / 2;
yOffset /= 2;
const rect = canvasEl.value.getBoundingClientRect(); const rect = canvasEl.value.getBoundingClientRect();
const pointerOffsetX = ev.clientX - rect.left; const pointerOffsetX = ev.clientX - rect.left;
const pointerOffsetY = ev.clientY - rect.top; const pointerOffsetY = ev.clientY - rect.top;
let startX = pointerOffsetX - xOffset; // Convert from client coordinates to canvas coordinates
let startY = pointerOffsetY - yOffset; let startX = (pointerOffsetX - xOffset) / scale;
let startY = (pointerOffsetY - yOffset) / scale;
if (AW / AH < BW / BH) { // 横長
startX = startX / (Math.max(AW, AH) / Math.max(BH / BW, 1));
startY = startY / (Math.max(AW, AH) / Math.max(BW / BH, 1));
} else { // 縦長
startX = startX / (Math.min(AW, AH) / Math.max(BH / BW, 1));
startY = startY / (Math.min(AW, AH) / Math.max(BW / BH, 1));
}
const id = genId(); const id = genId();
if (penMode.value === 'fill') { if (penMode.value === 'fill') {
@ -320,16 +312,10 @@ function onImagePointerdown(ev: PointerEvent) {
function _move(pointerClientX: number, pointerClientY: number) { function _move(pointerClientX: number, pointerClientY: number) {
const pointerX = pointerClientX - rect.left; const pointerX = pointerClientX - rect.left;
const pointerY = pointerClientY - rect.top; const pointerY = pointerClientY - rect.top;
let x = pointerX - xOffset;
let y = pointerY - yOffset; // Convert from client coordinates to canvas coordinates
let x = (pointerX - xOffset) / scale;
if (AW / AH < BW / BH) { // 横長 let y = (pointerY - yOffset) / scale;
x = x / (Math.max(AW, AH) / Math.max(BH / BW, 1));
y = y / (Math.max(AW, AH) / Math.max(BW / BH, 1));
} else { // 縦長
x = x / (Math.min(AW, AH) / Math.max(BH / BW, 1));
y = y / (Math.min(AW, AH) / Math.max(BW / BH, 1));
}
const scaleX = Math.abs(x - startX); const scaleX = Math.abs(x - startX);
const scaleY = Math.abs(y - startY); const scaleY = Math.abs(y - startY);