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

wip

This commit is contained in:
syuilo 2025-10-30 19:33:43 +09:00
parent 91bc3b3134
commit bb77844bfb
3 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend/src/components/MkImageLabelEditorDialog.vue
View File

@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<div :class="$style.controls">
<div class="_spacer _gaps">
<MkRange v-model="frame.frameThickness" :min="0" :max="0.1" :step="0.01" :continuousUpdate="true">
<MkRange v-model="frame.frameThickness" :min="0" :max="0.2" :step="0.01" :continuousUpdate="true">
<template #label>{{ i18n.ts._imageLabelEditor.frameThickness }}</template>
</MkRange>

18
packages/frontend/src/utility/image-effector/fxs/label.glsl
View File

@ -17,17 +17,27 @@ uniform float u_imageMarginX;
uniform float u_imageMarginY;
out vec4 out_color;
float remap(float value, float inputMin, float inputMax, float outputMin, float outputMax) {
return outputMin + (outputMax - outputMin) * ((value - inputMin) / (inputMax - inputMin));
}
void main() {
float labelRatio = u_labelEnabled ? (u_labelResolution.y / in_resolution.y) : 0.0;
vec4 image_color = texture(u_image, (in_uv / vec2(1.0, 1.0 - labelRatio) / vec2(1.0 - u_imageMarginX - u_imageMarginX, 1.0 - u_imageMarginY)) - vec2(u_imageMarginX, u_imageMarginY));
vec4 image_color = texture(u_image, vec2(
remap(in_uv.x, u_imageMarginX, 1.0 - u_imageMarginX, 0.0, 1.0),
remap(in_uv.y, u_imageMarginY, 1.0 - labelRatio, 0.0, 1.0)
));
vec4 label_color = texture(u_label, (in_uv - vec2(0.0, 1.0 - labelRatio)) / vec2(1.0, labelRatio));
if (in_uv.y > (1.0 - labelRatio)) {
out_color = label_color;
} else {
if (in_uv.x < u_imageMarginX || in_uv.x > (1.0 - u_imageMarginX) || in_uv.y < u_imageMarginY) {
out_color = vec4(1.0, 1.0, 1.0, 1.0);
} else {
if (in_uv.y > u_imageMarginY && in_uv.x > u_imageMarginX && in_uv.x < (1.0 - u_imageMarginX)) {
out_color = image_color;
} else {
out_color = vec4(1.0, 1.0, 1.0, 1.0);
}
}
}

8
packages/frontend/src/utility/image-label-renderer.ts
View File

@ -101,7 +101,7 @@ export class ImageLabelRenderer {
const textsMarginRight = textsMarginLeft;
const withQrCode = params.withQrCode;
const qrSize = labelCanvasCtx.canvas.height * 0.6;
const qrMarginX = Math.max((labelCanvasCtx.canvas.height - qrSize) / 2, (imageAreaW * params.frameThickness) / aspectRatio);
const qrMarginRight = Math.max((labelCanvasCtx.canvas.height - qrSize) / 2, paddingRight);
labelCanvasCtx.fillStyle = '#ffffff';
labelCanvasCtx.fillRect(0, 0, labelCanvasCtx.canvas.width, labelCanvasCtx.canvas.height);
@ -116,7 +116,7 @@ export class ImageLabelRenderer {
labelCanvasCtx.fillText(this.interpolateText(params.title), labelCanvasCtx.canvas.width / 2, titleY, labelCanvasCtx.canvas.width - textsMarginLeft - textsMarginRight);
} else {
labelCanvasCtx.textAlign = 'left';
labelCanvasCtx.fillText(this.interpolateText(params.title), textsMarginLeft, titleY, labelCanvasCtx.canvas.width - textsMarginLeft - (withQrCode ? (qrSize + qrMarginX + (fontSize * 1)) : 0));
labelCanvasCtx.fillText(this.interpolateText(params.title), textsMarginLeft, titleY, labelCanvasCtx.canvas.width - textsMarginLeft - (withQrCode ? (qrSize + qrMarginRight + (fontSize * 1)) : 0));
}
labelCanvasCtx.fillStyle = '#00000088';
@ -129,7 +129,7 @@ export class ImageLabelRenderer {
labelCanvasCtx.fillText(this.interpolateText(params.text), labelCanvasCtx.canvas.width / 2, textY, labelCanvasCtx.canvas.width - textsMarginLeft - textsMarginRight);
} else {
labelCanvasCtx.textAlign = 'left';
labelCanvasCtx.fillText(this.interpolateText(params.text), textsMarginLeft, textY, labelCanvasCtx.canvas.width - textsMarginLeft - (withQrCode ? (qrSize + qrMarginX + (fontSize * 1)) : 0));
labelCanvasCtx.fillText(this.interpolateText(params.text), textsMarginLeft, textY, labelCanvasCtx.canvas.width - textsMarginLeft - (withQrCode ? (qrSize + qrMarginRight + (fontSize * 1)) : 0));
}
const $i = ensureSignin();
@ -172,7 +172,7 @@ export class ImageLabelRenderer {
labelCanvasCtx.drawImage(
qrImageBitmap,
labelCanvasCtx.canvas.width - qrSize - qrMarginX,
labelCanvasCtx.canvas.width - qrSize - qrMarginRight,
(labelCanvasCtx.canvas.height - qrSize) / 2,
qrSize,
qrSize,