From 8c413d01e64d0fc307d1ea9c36eca87701531d37 Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Wed, 17 Sep 2025 18:38:56 +0900 Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E3=83=9E=E3=82=B9?= =?UTF-8?q?=E3=82=AF=E3=82=A8=E3=83=95=E3=82=A7=E3=82=AF=E3=83=88=20(#1655?= =?UTF-8?q?6)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * wip * wip * Update MkImageEffectorDialog.vue * Update MkImageEffectorDialog.vue * Update MkImageEffectorDialog.vue * Update MkImageEffectorDialog.vue * Update MkImageEffectorDialog.vue * Update fillSquare.ts * Update CHANGELOG.md * Update fillSquare.ts --- CHANGELOG.md | 1 + locales/index.d.ts | 8 ++ locales/ja-JP.yml | 2 + .../src/components/MkImageEffectorDialog.vue | 119 ++++++++++++++++- .../src/utility/image-effector/fxs.ts | 2 + .../utility/image-effector/fxs/fillSquare.ts | 122 ++++++++++++++++++ 6 files changed, 250 insertions(+), 4 deletions(-) create mode 100644 packages/frontend/src/utility/image-effector/fxs/fillSquare.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index b959cbbbab..ea1fd23efb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ ### Client - Enhance: チャットの日本語名称がダイレクトメッセージに戻るとともに、ベータ版機能ではなくなりました +- Enhance: 画像編集にマスクエフェクトを追加 - Enhance: 時刻計算のための基準値を一か所で管理するようにし、パフォーマンスを向上 ### Server diff --git a/locales/index.d.ts b/locales/index.d.ts index 23f0d88a37..ee808bfa77 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -12378,6 +12378,10 @@ export interface Locale extends ILocale { * ティアリング */ "tearing": string; + /** + * 塗りつぶし(四角) + */ + "fillSquare": string; }; "_fxProps": { /** @@ -12392,6 +12396,10 @@ export interface Locale extends ILocale { * サイズ */ "size": string; + /** + * 位置 + */ + "offset": string; /** * 色 */ diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 3b8f4443b1..322ff3ab2f 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -3314,11 +3314,13 @@ _imageEffector: checker: "チェッカー" blockNoise: "ブロックノイズ" tearing: "ティアリング" + fillSquare: "塗りつぶし(四角)" _fxProps: angle: "角度" scale: "サイズ" size: "サイズ" + offset: "位置" color: "色" opacity: "不透明度" normalize: "正規化" diff --git a/packages/frontend/src/components/MkImageEffectorDialog.vue b/packages/frontend/src/components/MkImageEffectorDialog.vue index 2c6185fd33..f794af290a 100644 --- a/packages/frontend/src/components/MkImageEffectorDialog.vue +++ b/packages/frontend/src/components/MkImageEffectorDialog.vue @@ -19,9 +19,12 @@ SPDX-License-Identifier: AGPL-3.0-only
- +
{{ i18n.ts.preview }}
+
+ +
@@ -212,6 +215,100 @@ watch(enabled, () => { renderer.render(); } }); + +const fillSquare = ref(false); + +function onImagePointerdown(ev: PointerEvent) { + if (canvasEl.value == null || imageBitmap == null || !fillSquare.value) return; + + const AW = canvasEl.value.clientWidth; + const AH = canvasEl.value.clientHeight; + const BW = imageBitmap.width; + const BH = imageBitmap.height; + + let xOffset = 0; + let yOffset = 0; + + if (AW / AH < BW / BH) { // 横長 + yOffset = AH - BH * (AW / BW); + } else { // 縦長 + xOffset = AW - BW * (AH / BH); + } + + xOffset /= 2; + yOffset /= 2; + + let startX = ev.offsetX - xOffset; + let startY = ev.offsetY - yOffset; + + 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(); + layers.push({ + id, + fxId: 'fillSquare', + params: { + offsetX: 0, + offsetY: 0, + scaleX: 0.1, + scaleY: 0.1, + angle: 0, + opacity: 1, + color: [1, 1, 1], + }, + }); + + _move(ev.offsetX, ev.offsetY); + + function _move(pointerX: number, pointerY: number) { + let x = pointerX - xOffset; + let y = pointerY - yOffset; + + if (AW / AH < BW / BH) { // 横長 + 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 scaleY = Math.abs(y - startY); + + const layerIndex = layers.findIndex((l) => l.id === id); + const layer = layerIndex !== -1 ? layers[layerIndex] : null; + if (layer != null) { + layer.params.offsetX = (x + startX) - 1; + layer.params.offsetY = (y + startY) - 1; + layer.params.scaleX = scaleX; + layer.params.scaleY = scaleY; + layers[layerIndex] = layer; + } + } + + 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); + + fillSquare.value = false; + } + + canvasEl.value.addEventListener('pointermove', move); + canvasEl.value.addEventListener('pointerup', up); + canvasEl.value.setPointerCapture(ev.pointerId); +}