From f26c0474577829d6df9d8787a79512b1b74d26dc Mon Sep 17 00:00:00 2001 From: unanmed <1319491857@qq.com> Date: Thu, 27 Feb 2025 16:07:22 +0800 Subject: [PATCH] chore: move selection to misc.tsx --- src/module/render/components/misc.tsx | 79 ++++++++++++++++++++ src/module/render/components/selection.tsx | 83 ---------------------- 2 files changed, 79 insertions(+), 83 deletions(-) delete mode 100644 src/module/render/components/selection.tsx diff --git a/src/module/render/components/misc.tsx b/src/module/render/components/misc.tsx index 78a5278..d479f35 100644 --- a/src/module/render/components/misc.tsx +++ b/src/module/render/components/misc.tsx @@ -10,6 +10,8 @@ import { SetupComponentOptions } from './types'; import { MotaOffscreenCanvas2D } from '@/core/fx/canvas2d'; import { TextboxProps, TextContent } from './textbox'; import { Scroll, ScrollExpose, ScrollProps } from './scroll'; +import { transitioned } from '../use'; +import { hyper } from 'mutate-animate'; interface ProgressProps extends DefaultProps { /** 进度条的位置 */ @@ -233,3 +235,80 @@ export const ScrollText = defineComponent< ); }, scrollProps); + +export interface SelectionProps extends DefaultProps { + loc: ElementLocator; + color?: CanvasStyle; + border?: CanvasStyle; + winskin?: ImageIds; + /** 选择图标的不透明度范围 */ + alphaRange?: [number, number]; +} + +const selectionProps = { + props: ['loc', 'color', 'border', 'winskin', 'alphaRange'] +} satisfies SetupComponentOptions; + +export const Selection = defineComponent(props => { + const minAlpha = computed(() => props.alphaRange?.[0] ?? 0.25); + const maxAlpha = computed(() => props.alphaRange?.[1] ?? 0.55); + const alpha = transitioned(minAlpha.value, 2000, hyper('sin', 'in-out'))!; + + const isWinskin = computed(() => !!props.winskin); + const winskinImage = computed(() => + isWinskin.value ? core.material.images.images[props.winskin!] : null + ); + const fixedLoc = computed(() => { + const [x = 0, y = 0, width = 200, height = 200] = props.loc; + return [x + 1, y + 1, width - 2, height - 2]; + }); + + const renderWinskin = (canvas: MotaOffscreenCanvas2D) => { + const ctx = canvas.ctx; + const image = winskinImage.value; + if (!image) return; + const [, , width = 200, height = 200] = props.loc; + // 背景 + ctx.drawImage(image, 130, 66, 28, 28, 2, 2, width - 4, height - 4); + // 四个角 + ctx.drawImage(image, 128, 64, 2, 2, 0, 0, 2, 2); + ctx.drawImage(image, 158, 64, 2, 2, width - 2, 0, 2, 2); + ctx.drawImage(image, 128, 94, 2, 2, 0, height - 2, 2, 2); + ctx.drawImage(image, 158, 94, 2, 2, width - 2, height - 2, 2, 2); + // 四条边 + ctx.drawImage(image, 130, 64, 28, 2, 2, 0, width - 4, 2); + ctx.drawImage(image, 130, 94, 28, 2, 2, height - 2, width - 4, 2); + ctx.drawImage(image, 128, 66, 2, 28, 0, 2, 2, height - 4); + ctx.drawImage(image, 158, 66, 2, 28, width - 2, 2, 2, height - 4); + }; + + onTick(() => { + if (alpha.value === maxAlpha.value) { + alpha.set(minAlpha.value); + } + if (alpha.value === minAlpha.value) { + alpha.set(maxAlpha.value); + } + }); + + return () => + isWinskin.value ? ( + + ) : ( + + ); +}, selectionProps); diff --git a/src/module/render/components/selection.tsx b/src/module/render/components/selection.tsx deleted file mode 100644 index 2813a16..0000000 --- a/src/module/render/components/selection.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import { DefaultProps, ElementLocator, onTick } from '@/core/render'; -import { computed, defineComponent } from 'vue'; -import { SetupComponentOptions } from './types'; -import { MotaOffscreenCanvas2D } from '@/core/fx/canvas2d'; -import { transitioned } from '../use'; -import { hyper } from 'mutate-animate'; - -export interface SelectionProps extends DefaultProps { - loc: ElementLocator; - color?: CanvasStyle; - border?: CanvasStyle; - winskin?: ImageIds; - /** 选择图标的不透明度范围 */ - alphaRange?: [number, number]; -} - -const selectionProps = { - props: ['loc', 'color', 'border', 'winskin', 'alphaRange'] -} satisfies SetupComponentOptions; - -export const Selection = defineComponent(props => { - const minAlpha = computed(() => props.alphaRange?.[0] ?? 0.25); - const maxAlpha = computed(() => props.alphaRange?.[1] ?? 0.55); - const alpha = transitioned(minAlpha.value, 2000, hyper('sin', 'in-out'))!; - - const isWinskin = computed(() => !!props.winskin); - const winskinImage = computed(() => - isWinskin.value ? core.material.images.images[props.winskin!] : null - ); - const fixedLoc = computed(() => { - const [x = 0, y = 0, width = 200, height = 200] = props.loc; - return [x + 1, y + 1, width - 2, height - 2]; - }); - - const renderWinskin = (canvas: MotaOffscreenCanvas2D) => { - const ctx = canvas.ctx; - const image = winskinImage.value; - if (!image) return; - const [, , width = 200, height = 200] = props.loc; - // 背景 - ctx.drawImage(image, 130, 66, 28, 28, 2, 2, width - 4, height - 4); - // 四个角 - ctx.drawImage(image, 128, 64, 2, 2, 0, 0, 2, 2); - ctx.drawImage(image, 158, 64, 2, 2, width - 2, 0, 2, 2); - ctx.drawImage(image, 128, 94, 2, 2, 0, height - 2, 2, 2); - ctx.drawImage(image, 158, 94, 2, 2, width - 2, height - 2, 2, 2); - // 四条边 - ctx.drawImage(image, 130, 64, 28, 2, 2, 0, width - 4, 2); - ctx.drawImage(image, 130, 94, 28, 2, 2, height - 2, width - 4, 2); - ctx.drawImage(image, 128, 66, 2, 28, 0, 2, 2, height - 4); - ctx.drawImage(image, 158, 66, 2, 28, width - 2, 2, 2, height - 4); - }; - - onTick(() => { - if (alpha.value === maxAlpha.value) { - alpha.set(minAlpha.value); - } - if (alpha.value === minAlpha.value) { - alpha.set(maxAlpha.value); - } - }); - - return () => - isWinskin.value ? ( - - ) : ( - - ); -}, selectionProps);