usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update MkImageEffectorDialog.vue

This commit is contained in:
syuilo 2025-09-16 21:21:15 +09:00
parent 54f0e7eaf7
commit 7c840c2fc4
1 changed files with 42 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -219,16 +219,38 @@ watch(enabled, () => {
const fillSquare = ref(false); const fillSquare = ref(false);
function onImagePointerdown(ev: PointerEvent) { function onImagePointerdown(ev: PointerEvent) {
const PADDING = 20; const PADDING = 0; // TODO
let startX = ev.offsetX; const AW = canvasEl.value!.clientWidth;
let startY = ev.offsetY; const AH = canvasEl.value!.clientHeight;
const BW = imageBitmap!.width;
const BH = imageBitmap!.height;
const xRatio = Math.max(imageBitmap!.width / imageBitmap!.height, 1); let xOffset = 0;
const yRatio = Math.max(imageBitmap!.height / imageBitmap!.width, 1); let yOffset = 0;
startX = (startX - PADDING) / ((canvasEl.value!.clientWidth / yRatio) - (PADDING * 2)); if (AW / AH < BW / BH) { // 横長
startY = (startY - PADDING) / ((canvasEl.value!.clientHeight / xRatio) - (PADDING * 2)); yOffset = AH - BH * (AW / BW);
} else { // 縦長
xOffset = AW - BW * (AH / BH);
}
const imageXRatio = xOffset === 0 ? Math.max(BH / BW, 1) : Math.max(BW / BH, 1);
const imageYRatio = xOffset === 0 ? Math.max(BW / BH, 1) : Math.max(BH / BW, 1);
xOffset /= 2;
yOffset /= 2;
let startX = ev.offsetX - xOffset;
let startY = ev.offsetY - yOffset;
if (AW / AH < BW / BH) { // 横長
startX = (startX - PADDING) / ((Math.max(AW, AH) / imageXRatio) - (PADDING * 2));
startY = (startY - PADDING) / ((Math.max(AW, AH) / imageYRatio) - (PADDING * 2));
} else { // 縦長
startX = (startX - PADDING) / ((Math.min(AW, AH) / imageYRatio) - (PADDING * 2));
startY = (startY - PADDING) / ((Math.min(AW, AH) / imageXRatio) - (PADDING * 2));
}
const id = genId(); const id = genId();
layers.push({ layers.push({
@ -246,21 +268,25 @@ function onImagePointerdown(ev: PointerEvent) {
}); });
canvasEl.value!.onpointermove = (ev) => { canvasEl.value!.onpointermove = (ev) => {
let x = ev.offsetX; let x = ev.offsetX - xOffset;
let y = ev.offsetY; let y = ev.offsetY - yOffset;
x = (x - PADDING) / ((canvasEl.value!.clientWidth / yRatio) - (PADDING * 2));
y = (y - PADDING) / ((canvasEl.value!.clientHeight / xRatio) - (PADDING * 2)); if (AW / AH < BW / BH) { // 横長
x = (x - PADDING) / ((Math.max(AW, AH) / imageXRatio) - (PADDING * 2));
y = (y - PADDING) / ((Math.max(AW, AH) / imageYRatio) - (PADDING * 2));
} else { // 縦長
x = (x - PADDING) / ((Math.min(AW, AH) / imageYRatio) - (PADDING * 2));
y = (y - PADDING) / ((Math.min(AW, AH) / imageXRatio) - (PADDING * 2));
}
const scaleX = Math.abs(x - startX); const scaleX = Math.abs(x - startX);
const scaleY = Math.abs(y - startY); const scaleY = Math.abs(y - startY);
x = (x + startX) / 2;
y = (y + startY) / 2;
const layerIndex = layers.findIndex((l) => l.id === id); const layerIndex = layers.findIndex((l) => l.id === id);
const layer = layerIndex !== -1 ? layers[layerIndex] : null; const layer = layerIndex !== -1 ? layers[layerIndex] : null;
if (layer != null) { if (layer != null) {
layer.params.offsetX = (x * 2) - 1; layer.params.offsetX = ((x + startX) / 2 * 2) - 1;
layer.params.offsetY = (y * 2) - 1; layer.params.offsetY = ((y + startY) / 2 * 2) - 1;
layer.params.scaleX = scaleX; layer.params.scaleX = scaleX;
layer.params.scaleY = scaleY; layer.params.scaleY = scaleY;
layers[layerIndex] = layer; layers[layerIndex] = layer;
@ -353,7 +379,7 @@ function onImagePointerdown(ev: PointerEvent) {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 20px; padding: 0px; /* TODO */
box-sizing: border-box; box-sizing: border-box;
object-fit: contain; object-fit: contain;
} }