From feb74f78a2c9aa70dbbfc62888455e90a10c0327 Mon Sep 17 00:00:00 2001 From: Kreedzt Date: Mon, 13 Jan 2025 22:27:04 +0800 Subject: [PATCH 1/2] :bug: fixed tollskin2 image empty render --- src/commands/tdoll/canvas/tdollSkin2Canvas.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/commands/tdoll/canvas/tdollSkin2Canvas.ts b/src/commands/tdoll/canvas/tdollSkin2Canvas.ts index 58f3973..6a3e42a 100644 --- a/src/commands/tdoll/canvas/tdollSkin2Canvas.ts +++ b/src/commands/tdoll/canvas/tdollSkin2Canvas.ts @@ -361,9 +361,6 @@ export class TDollSkin2Canvas extends BaseCanvas { const x = CANVAS_STYLE.PADDING * 2; this.skinList.forEach((skin, index) => { - const image = this.tdollSkinImgMap.get(skin.value); - if (!image) return; - // Render skin title this.state.startY += CANVAS_STYLE.PADDING; context.fillStyle = CANVAS_STYLE.TEXT_COLOR; @@ -373,9 +370,13 @@ export class TDollSkin2Canvas extends BaseCanvas { // Render skin image this.state.startY += CANVAS_STYLE.LINE_HEIGHT; - context.drawImage(image, x, this.state.startY, 150, 150); + const image = this.tdollSkinImgMap.get(skin.value); + if (image) { + context.drawImage(image, x, this.state.startY, 150, 150); + maxWidth = Math.max(maxWidth, 150); + } + // Even if no image, still increase startY to keep spacing this.state.startY += 150; - maxWidth = Math.max(maxWidth, 150); }); this.renderStartY = this.state.startY; From ac5626b5ddda4e4aa523148492e5125d0d554c04 Mon Sep 17 00:00:00 2001 From: Kreedzt Date: Mon, 13 Jan 2025 22:42:53 +0800 Subject: [PATCH 2/2] :sparkles: add highlight for tdoll2 & tdoll2 cmd --- src/commands/tdoll/canvas/tdoll2Canvas.ts | 58 ++++++++++++++++--- src/commands/tdoll/canvas/tdollSkin2Canvas.ts | 18 +++++- src/commands/tdoll/utils/utils.ts | 8 +++ 3 files changed, 74 insertions(+), 10 deletions(-) diff --git a/src/commands/tdoll/canvas/tdoll2Canvas.ts b/src/commands/tdoll/canvas/tdoll2Canvas.ts index c829896..1464c34 100644 --- a/src/commands/tdoll/canvas/tdoll2Canvas.ts +++ b/src/commands/tdoll/canvas/tdoll2Canvas.ts @@ -8,6 +8,7 @@ import { BaseCanvas } from '../../../services/baseCanvas'; import { ITDollDataItem } from '../types/types'; import { resizeImg } from '../../../utils/imgproxy'; import { CANVAS_STYLE } from '../types/constants'; +import { replacedQueryMatch } from '../utils/utils'; export class TDoll2Canvas extends BaseCanvas { renderStartY: number = 0; @@ -222,13 +223,56 @@ export class TDoll2Canvas extends BaseCanvas { ); const idSectionWidth = context.measureText(section.noSection).width; - // name - context.fillStyle = '#fff'; - context.fillText( - section.staticSection2, - CANVAS_STYLE.PADDING * 2 + staticSectionWidth + idSectionWidth, - this.renderStartY - ); + // name with highlight if needed + const startX = CANVAS_STYLE.PADDING * 2 + staticSectionWidth + idSectionWidth; + if (this.query && this.query !== 'random') { + const name = section.staticSection2; + const processedName = replacedQueryMatch(name); + const processedQuery = replacedQueryMatch(this.query); + const queryIndex = processedName.indexOf(processedQuery); + + if (queryIndex !== -1) { + let matchStartIndex = 0; + let matchEndIndex = 0; + let currentProcessedIndex = 0; + + // 找到实际要高亮的字符位置 + for (let i = 0; i < name.length; i++) { + if (currentProcessedIndex === queryIndex) { + matchStartIndex = i; + } + if (currentProcessedIndex === queryIndex + processedQuery.length) { + matchEndIndex = i; + break; + } + if (!/[-. ]/.test(name[i])) { + currentProcessedIndex++; + } + } + if (matchEndIndex === 0) matchEndIndex = name.length; + + const before = name.substring(0, matchStartIndex); + const match = name.substring(matchStartIndex, matchEndIndex); + const after = name.substring(matchEndIndex); + + context.fillStyle = '#fff'; + context.fillText(before, startX, this.renderStartY); + const beforeWidth = context.measureText(before).width; + + context.fillStyle = '#22d3ee'; + context.fillText(match, startX + beforeWidth, this.renderStartY); + const matchWidth = context.measureText(match).width; + + context.fillStyle = '#fff'; + context.fillText(after, startX + beforeWidth + matchWidth, this.renderStartY); + } else { + context.fillStyle = '#fff'; + context.fillText(name, startX, this.renderStartY); + } + } else { + context.fillStyle = '#fff'; + context.fillText(section.staticSection2, startX, this.renderStartY); + } this.renderStartY += CANVAS_STYLE.LINE_HEIGHT; diff --git a/src/commands/tdoll/canvas/tdollSkin2Canvas.ts b/src/commands/tdoll/canvas/tdollSkin2Canvas.ts index 6a3e42a..ef0a60e 100644 --- a/src/commands/tdoll/canvas/tdollSkin2Canvas.ts +++ b/src/commands/tdoll/canvas/tdollSkin2Canvas.ts @@ -363,10 +363,22 @@ export class TDollSkin2Canvas extends BaseCanvas { this.skinList.forEach((skin, index) => { // Render skin title this.state.startY += CANVAS_STYLE.PADDING; + + // 分段渲染标题文本 context.fillStyle = CANVAS_STYLE.TEXT_COLOR; - const title = `${index + 1}. ${skin.title} ID:${skin.value}`; - context.fillText(title, x, this.state.startY); - maxWidth = Math.max(maxWidth, context.measureText(title).width); + const prefix = `${index + 1}. ${skin.title} ID:`; + context.fillText(prefix, x, this.state.startY); + + // 计算前缀宽度 + const prefixWidth = context.measureText(prefix).width; + + // 高亮渲染 skin.value + context.fillStyle = '#059669'; + context.fillText(skin.value, x + prefixWidth, this.state.startY); + + // 计算总宽度 + const totalWidth = prefixWidth + context.measureText(skin.value).width; + maxWidth = Math.max(maxWidth, totalWidth); // Render skin image this.state.startY += CANVAS_STYLE.LINE_HEIGHT; diff --git a/src/commands/tdoll/utils/utils.ts b/src/commands/tdoll/utils/utils.ts index df561f7..6cf1e87 100644 --- a/src/commands/tdoll/utils/utils.ts +++ b/src/commands/tdoll/utils/utils.ts @@ -55,6 +55,14 @@ export const getRandomTDollData = (dataList: ITDollDataItem[]): string => { return formatTDollData(randomData); }; +export const replacedQueryMatch = (query: string): string => { + return query + .toLowerCase() + .replaceAll('-', '') + .replaceAll('.', '') + .replaceAll(' ', ''); +}; + /** * Get matched tdoll data * @param dataList