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-17 07:52:08 +09:00
parent 7001d879fd
commit 616e2a4623
1 changed files with 29 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -221,10 +221,12 @@ const fillSquare = ref(false);
function onImagePointerdown(ev: PointerEvent) { function onImagePointerdown(ev: PointerEvent) {
const PADDING = 0; // TODO const PADDING = 0; // TODO
const AW = canvasEl.value!.clientWidth; if (canvasEl.value == null || imageBitmap == null || !fillSquare.value) return;
const AH = canvasEl.value!.clientHeight;
const BW = imageBitmap!.width; const AW = canvasEl.value.clientWidth;
const BH = imageBitmap!.height; const AH = canvasEl.value.clientHeight;
const BW = imageBitmap.width;
const BH = imageBitmap.height;
let xOffset = 0; let xOffset = 0;
let yOffset = 0; let yOffset = 0;
@ -264,9 +266,11 @@ function onImagePointerdown(ev: PointerEvent) {
}, },
}); });
canvasEl.value!.onpointermove = (ev) => { _move(ev.offsetX, ev.offsetY);
let x = ev.offsetX - xOffset;
let y = ev.offsetY - yOffset; function _move(pointerX: number, pointerY: number) {
let x = pointerX - xOffset;
let y = pointerY - yOffset;
if (AW / AH < BW / BH) { // 横長 if (AW / AH < BW / BH) { // 横長
x = (x - PADDING) / ((Math.max(AW, AH) / Math.max(BH / BW, 1)) - (PADDING * 2)); x = (x - PADDING) / ((Math.max(AW, AH) / Math.max(BH / BW, 1)) - (PADDING * 2));
@ -282,14 +286,28 @@ function onImagePointerdown(ev: PointerEvent) {
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 + startX) / 2 * 2) - 1; layer.params.offsetX = (x + startX) - 1;
layer.params.offsetY = ((y + startY) / 2 * 2) - 1; layer.params.offsetY = (y + startY) - 1;
layer.params.scaleX = scaleX; layer.params.scaleX = scaleX;
layer.params.scaleY = scaleY; layer.params.scaleY = scaleY;
layers[layerIndex] = layer; layers[layerIndex] = layer;
} }
}; }
canvasEl.value!.setPointerCapture(ev.pointerId);
function move(ev: PointerEvent) {
_move(ev.offsetX, ev.offsetY);
}
function up() {
canvasEl.value?.removeEventListener('pointermove', move);
canvasEl.value?.removeEventListener('pointerup', up);
canvasEl.value?.removeEventListener('pointercancel', up);
canvasEl.value?.releasePointerCapture(ev.pointerId);
}
canvasEl.value.addEventListener('pointermove', move);
canvasEl.value.addEventListener('pointerup', up);
canvasEl.value.setPointerCapture(ev.pointerId);
} }
</script> </script>