diff --git a/miniprogram/assets/imgs/doodle-logo.png b/miniprogram/assets/imgs/doodle-logo.png new file mode 100644 index 0000000..f20995d Binary files /dev/null and b/miniprogram/assets/imgs/doodle-logo.png differ diff --git a/miniprogram/config/config.ts b/miniprogram/config/config.ts new file mode 100644 index 0000000..867433a --- /dev/null +++ b/miniprogram/config/config.ts @@ -0,0 +1,4 @@ +type Channel = 'wechat' | 'noLogo' | 'rednoteLogo' | 'miniHeader'; +const channel: Channel = 'miniHeader'; + +export const CHANNEL = channel; \ No newline at end of file diff --git a/miniprogram/pages/index/index.ts b/miniprogram/pages/index/index.ts index 0758bbd..a0661fe 100644 --- a/miniprogram/pages/index/index.ts +++ b/miniprogram/pages/index/index.ts @@ -24,11 +24,11 @@ Page({ this.setData({ cardList: [ { color: '#FF0000', word: '涂' }, - { color: '#00FF00', word: '欢' }, - { color: '#FF7F00', word: '鸦' }, - { color: '#00FFFF', word: '迎' }, - { color: '#FFFF00', word: '丫' }, - { color: '#8A2BE2', word: '你' }, + { color: '#00FF00', word: '鸦' }, + { color: '#FF7F00', word: '丫' }, + { color: '#00FFFF', word: '欢' }, + { color: '#FFFF00', word: '迎' }, + { color: '#8A2BE2', word: '您' }, ], showIntroductionPopup: true, }); @@ -80,7 +80,7 @@ Page({ /** 变更cardList 并更新canvas */ drawCanvas( updatedCardList?: Array<{ color: string; word: string }>, - callback: () => void = () => {}, + callback: () => void = () => { }, ) { if (updatedCardList && updatedCardList.length >= 0) { this.setData({ cardList: updatedCardList }, callback); diff --git a/miniprogram/service/textDrawService.ts b/miniprogram/service/textDrawService.ts index 6ea51e7..38bdc3a 100644 --- a/miniprogram/service/textDrawService.ts +++ b/miniprogram/service/textDrawService.ts @@ -1,7 +1,16 @@ // import { PAPER_SIZE } from './constant'; import { PAPER_SIZE } from '../constants/colors'; -import { getMiniCodeImage } from '../utils/index'; +import { CHANNEL } from '../config/config'; +import { getMiniCodeImage, getImage } from '../utils/index'; +/** + * 计算示例区域圆的中心点 + * @param canvasWidth 画布宽度 + * @param circleCount 圆的数量 + * @param padding 圆的间距 + * @param radius 圆的半径 + * @returns 圆的中心点 + */ function calculateCircleCenters( canvasWidth: number, circleCount: number, @@ -78,7 +87,12 @@ class TextDrawService { this.characters = list.map((item) => item.word || '日'); this.clear(); this.setPaper(); - this.drawHeader(); + if (CHANNEL !== 'miniHeader') { + this.drawHeader(); + } else { + this.drawMiniHeader(); + } + this.drawLegend(); this.drawContent(); } @@ -89,10 +103,32 @@ class TextDrawService { this.currentX = 80; this.currentY = 80; - const titleX = this.currentX + 200 + 48; + let titleX = this.currentX + 200 + 48; const titleY = 80; - const image = await getMiniCodeImage(canvas); - ctx.drawImage(image, 80, 80, 200, 200); + + const logoX = 80; + const logoY = 60; + const logoWidth = 200; + const logoHeight = 200; + + switch (CHANNEL) { + // @ts-ignore + case 'rednoteLogo': { + const image = await getImage(canvas, '/assets/imgs/doodle-logo.png'); + ctx.drawImage(image, logoX, logoY, logoWidth, logoHeight); + break; + } + // @ts-ignore + case 'noLogo': { + titleX = 120; + break; + } + default: { + const image = await getMiniCodeImage(canvas); + ctx.drawImage(image, logoX, logoY, logoWidth, logoHeight); + break; + } + } ctx.font = 'bold 64px "Microsoft Yahei"'; ctx.fillStyle = '#000'; @@ -125,6 +161,20 @@ class TextDrawService { this.drawLine(this.currentY); } + drawMiniHeader() { + const { canvas, ctx } = this; + const { appName, title } = this.options; + const titleY = 120; + + ctx.font = 'bold 64px "Microsoft Yahei"'; + ctx.fillStyle = '#000'; + ctx.textAlign = 'center'; + ctx.fillText(appName + ' ' + title, canvas.width / 2, titleY); + this.currentY = 200; + this.drawLine(this.currentY); + } + + /** 绘制示例 * 矩形: x、y为左上角 * 圆形:x、y为圆心 @@ -140,7 +190,7 @@ class TextDrawService { const rectWidth = 180; const rectHeight = 80; const startX = 260 + radius; // 圆形的X坐标是圆心 - const startY = 304 + 26 + radius; // 圆形的Y坐标是圆心 + const startY = this.currentY + 30 + radius; // 圆形的Y坐标是圆心 const len = characters.length || 4; const canvasWidth = canvas.width; const centers = calculateCircleCenters(canvasWidth, len, 220, 65); @@ -182,7 +232,7 @@ class TextDrawService { ); }); - this.currentY = 612; // 计算分割线的Y坐标,距离示例图20px + this.currentY = CHANNEL === 'miniHeader' ? 522 : 612; // 计算分割线的Y坐标,距离示例图20px this.drawLine(this.currentY); } @@ -191,7 +241,7 @@ class TextDrawService { if (characters.length <= 0) return; const len = characters.length; - const rows = 8; + const rows = CHANNEL === 'miniHeader' ? 9 : 8; const radius = 80; const fontSize = 72;