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

wip

This commit is contained in:
syuilo 2025-09-16 19:15:18 +09:00
parent 01aa95aaf9
commit 54f0e7eaf7
1 changed files with 69 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,9 +19,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.root">
<div :class="$style.container">
<div :class="$style.preview">
<canvas ref="canvasEl" :class="$style.previewCanvas"></canvas>
<canvas ref="canvasEl" :class="$style.previewCanvas" @pointerdown="onImagePointerdown"></canvas>
<div :class="$style.previewContainer">
<div class="_acrylic" :class="$style.previewTitle">{{ i18n.ts.preview }}</div>
<div class="_acrylic" :class="$style.editControls">
<button class="_button" :class="[$style.previewControlsButton, fillSquare ? $style.active : null]" @click="fillSquare = true">fillSquare</button>
</div>
<div class="_acrylic" :class="$style.previewControls">
<button class="_button" :class="[$style.previewControlsButton, !enabled ? $style.active : null]" @click="enabled = false">Before</button>
<button class="_button" :class="[$style.previewControlsButton, enabled ? $style.active : null]" @click="enabled = true">After</button>
@ -212,6 +215,59 @@ watch(enabled, () => {
renderer.render();
}
});
const fillSquare = ref(false);
function onImagePointerdown(ev: PointerEvent) {
const PADDING = 20;
let startX = ev.offsetX;
let startY = ev.offsetY;
const xRatio = Math.max(imageBitmap!.width / imageBitmap!.height, 1);
const yRatio = Math.max(imageBitmap!.height / imageBitmap!.width, 1);
startX = (startX - PADDING) / ((canvasEl.value!.clientWidth / yRatio) - (PADDING * 2));
startY = (startY - PADDING) / ((canvasEl.value!.clientHeight / xRatio) - (PADDING * 2));
const id = genId();
layers.push({
id,
fxId: 'fillSquare',
params: {
offsetX: 0,
offsetY: 0,
scaleX: 0.1,
scaleY: 0.1,
angle: 0,
opacity: 1,
color: [1, 1, 1],
},
});
canvasEl.value!.onpointermove = (ev) => {
let x = ev.offsetX;
let y = ev.offsetY;
x = (x - PADDING) / ((canvasEl.value!.clientWidth / yRatio) - (PADDING * 2));
y = (y - PADDING) / ((canvasEl.value!.clientHeight / xRatio) - (PADDING * 2));
const scaleX = Math.abs(x - startX);
const scaleY = Math.abs(y - startY);
x = (x + startX) / 2;
y = (y + startY) / 2;
const layerIndex = layers.findIndex((l) => l.id === id);
const layer = layerIndex !== -1 ? layers[layerIndex] : null;
if (layer != null) {
layer.params.offsetX = (x * 2) - 1;
layer.params.offsetY = (y * 2) - 1;
layer.params.scaleX = scaleX;
layer.params.scaleY = scaleY;
layers[layerIndex] = layer;
}
};
canvasEl.value!.setPointerCapture(ev.pointerId);
}
</script>
<style module>
@ -251,6 +307,18 @@ watch(enabled, () => {
font-size: 85%;
}
.editControls {
position: absolute;
z-index: 100;
bottom: 8px;
left: 8px;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 6px;
}
.previewControls {
position: absolute;
z-index: 100;