feat: 增加找字模板
This commit is contained in:
R524809
@@ -56,7 +56,7 @@ page {
|
||||
}
|
||||
|
||||
// 模板选择区域
|
||||
/* .template-section {
|
||||
.template-section {
|
||||
margin-top: 40rpx;
|
||||
|
||||
.template-title {
|
||||
@@ -67,9 +67,9 @@ page {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.template-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
.template-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
@@ -77,156 +77,60 @@ page {
|
||||
background: #FFFFFF;
|
||||
border: 2rpx solid #E8E8E8;
|
||||
border-radius: 16rpx;
|
||||
padding: 16rpx;
|
||||
padding: 24rpx;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: #93D333;
|
||||
box-shadow: 0 0 0 4rpx rgba(147, 211, 51, 0.2);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
top: 12rpx;
|
||||
right: 12rpx;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background: #93D333;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.template-checkbox {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border: 2rpx solid #E8E8E8;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 24rpx;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
.checkbox-icon {
|
||||
color: #FFFFFF;
|
||||
font-size: 14rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.template-preview {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background: #F8F8F8;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.template-preview-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6rpx;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.preview-word {
|
||||
font-size: 20rpx;
|
||||
font-weight: 600;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 6rpx;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
// 不同模板的布局样式
|
||||
&.grid-template {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
&.circle-template {
|
||||
position: relative;
|
||||
|
||||
.preview-word {
|
||||
position: absolute;
|
||||
|
||||
&:nth-child(1) {
|
||||
top: 12rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
right: 12rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
bottom: 12rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
left: 12rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.random-template {
|
||||
position: relative;
|
||||
|
||||
.preview-word {
|
||||
position: absolute;
|
||||
|
||||
&:nth-child(1) {
|
||||
top: 10rpx;
|
||||
left: 16rpx;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
top: 24rpx;
|
||||
right: 10rpx;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
bottom: 18rpx;
|
||||
left: 10rpx;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
bottom: 10rpx;
|
||||
right: 18rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.line-template {
|
||||
flex-direction: row;
|
||||
gap: 8rpx;
|
||||
}
|
||||
}
|
||||
&.active .template-checkbox {
|
||||
background: #93D333;
|
||||
border-color: #93D333;
|
||||
}
|
||||
|
||||
.template-name {
|
||||
font-size: 22rpx;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #141414;
|
||||
font-weight: 500;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.template-item.active & {
|
||||
color: #93D333;
|
||||
font-weight: 600;
|
||||
}
|
||||
&.active .template-name {
|
||||
color: #93D333;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
} */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
import { WATER_COLORS, PAPER_SIZE } from '../../constants/colors';
|
||||
import { WORDS } from '../../constants/words';
|
||||
import TextDrawService from '../../service/textDrawService';
|
||||
import {
|
||||
DrawServiceFactory,
|
||||
IDrawService,
|
||||
TemplateType,
|
||||
} from '../../service/drawServiceFactory';
|
||||
import { checkAndSaveImage } from '../../utils/saveImage';
|
||||
|
||||
Page({
|
||||
@@ -8,7 +12,7 @@ Page({
|
||||
ctx: null as RenderingContext | null,
|
||||
boxHeight: 0,
|
||||
boxWidth: 0,
|
||||
textDrawService: null as TextDrawService | null,
|
||||
drawService: null as IDrawService | null,
|
||||
|
||||
data: {
|
||||
cardList: [] as CardList,
|
||||
@@ -18,7 +22,7 @@ Page({
|
||||
currentColor: '',
|
||||
showIntroductionPopup: false,
|
||||
showSelectWordPopup: false, // 选择文字弹窗
|
||||
selectedTemplate: 'grid', // 选中的模板类型
|
||||
selectedTemplate: 'find', // 选中的模板类型
|
||||
env: 'release',
|
||||
isPCDevtool: false,
|
||||
},
|
||||
@@ -36,21 +40,24 @@ Page({
|
||||
}
|
||||
|
||||
if (!hasShowIntroduction) {
|
||||
this.setData({
|
||||
cardList: [
|
||||
{ color: '#FF0000', word: '涂' },
|
||||
{ color: '#00FF00', word: '鸦' },
|
||||
{ color: '#FF7F00', word: '丫' },
|
||||
{ color: '#00FFFF', word: '欢' },
|
||||
{ color: '#FFFF00', word: '迎' },
|
||||
{ color: '#8A2BE2', word: '您' },
|
||||
],
|
||||
selectedWords: ['涂', '鸦', '丫', '欢', '迎', '您'],
|
||||
showIntroductionPopup: true,
|
||||
env: getApp().globalData.env || 'release',
|
||||
}, () => {
|
||||
this.drawCanvas();
|
||||
});
|
||||
this.setData(
|
||||
{
|
||||
cardList: [
|
||||
{ color: '#FF0000', word: '涂' },
|
||||
{ color: '#00FF00', word: '鸦' },
|
||||
{ color: '#FF7F00', word: '丫' },
|
||||
{ color: '#00FFFF', word: '欢' },
|
||||
{ color: '#FFFF00', word: '迎' },
|
||||
{ color: '#8A2BE2', word: '您' },
|
||||
],
|
||||
selectedWords: ['涂', '鸦', '丫', '欢', '迎', '您'],
|
||||
showIntroductionPopup: true,
|
||||
env: getApp().globalData.env || 'release',
|
||||
},
|
||||
() => {
|
||||
this.drawCanvas();
|
||||
},
|
||||
);
|
||||
} else {
|
||||
this.setData({
|
||||
env: getApp().globalData.env || 'release',
|
||||
@@ -88,13 +95,25 @@ Page({
|
||||
if (ctx) {
|
||||
this.canvas = canvas;
|
||||
this.ctx = ctx;
|
||||
this.textDrawService = new TextDrawService(canvas, ctx);
|
||||
// 根据当前选中的模板类型创建对应的绘制服务
|
||||
const templateType = this.data
|
||||
.selectedTemplate as TemplateType;
|
||||
this.drawService =
|
||||
DrawServiceFactory.create(
|
||||
templateType,
|
||||
canvas,
|
||||
ctx,
|
||||
);
|
||||
this.setData({ boxWidth, boxHeight });
|
||||
|
||||
// 初始化完成后，如果有cardList内容则立即绘制
|
||||
const currentCardList = this.data.cardList;
|
||||
if (currentCardList.length > 0) {
|
||||
this.textDrawService.draw(currentCardList);
|
||||
this.drawService
|
||||
.draw(currentCardList)
|
||||
.catch((err) => {
|
||||
console.error('绘制失败:', err);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -104,35 +123,63 @@ Page({
|
||||
.exec();
|
||||
},
|
||||
|
||||
/**
|
||||
* 创建或更新绘制服务
|
||||
* 根据当前选中的模板类型创建对应的服务实例
|
||||
*/
|
||||
createDrawService() {
|
||||
if (this.canvas && this.ctx) {
|
||||
const templateType = this.data.selectedTemplate as TemplateType;
|
||||
this.drawService = DrawServiceFactory.create(
|
||||
templateType,
|
||||
this.canvas,
|
||||
this.ctx,
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
/** 变更cardList 并更新canvas */
|
||||
drawCanvas(
|
||||
updatedCardList?: Array<{ color: string; word: string }>,
|
||||
callback: () => void = () => { },
|
||||
callback: () => void = () => {},
|
||||
) {
|
||||
if (updatedCardList) {
|
||||
this.setData({
|
||||
cardList: updatedCardList,
|
||||
selectedWords: updatedCardList.map((item) => item.word)
|
||||
}, () => {
|
||||
// 如果cardList有内容且canvas未初始化，先初始化canvas
|
||||
if (!this.canvas) {
|
||||
this.initCanvas();
|
||||
}
|
||||
// 如果canvas已初始化且有内容，则绘制
|
||||
if (this.textDrawService && updatedCardList!.length > 0) {
|
||||
this.textDrawService.draw(updatedCardList!);
|
||||
}
|
||||
callback();
|
||||
});
|
||||
this.setData(
|
||||
{
|
||||
cardList: updatedCardList,
|
||||
selectedWords: updatedCardList.map((item) => item.word),
|
||||
},
|
||||
() => {
|
||||
// 如果cardList有内容且canvas未初始化，先初始化canvas
|
||||
if (!this.canvas) {
|
||||
this.initCanvas();
|
||||
} else {
|
||||
// 如果canvas已初始化，确保绘制服务是最新的
|
||||
this.createDrawService();
|
||||
}
|
||||
// 如果canvas已初始化且有内容，则绘制
|
||||
if (this.drawService && updatedCardList!.length > 0) {
|
||||
this.drawService.draw(updatedCardList!).catch((err) => {
|
||||
console.error('绘制失败:', err);
|
||||
});
|
||||
}
|
||||
callback();
|
||||
},
|
||||
);
|
||||
} else {
|
||||
const currentCardList = this.data.cardList;
|
||||
// 如果cardList有内容且canvas未初始化，先初始化canvas
|
||||
if (!this.canvas) {
|
||||
this.initCanvas();
|
||||
} else {
|
||||
// 如果canvas已初始化，确保绘制服务是最新的
|
||||
this.createDrawService();
|
||||
}
|
||||
// 如果canvas已初始化且有内容，则绘制
|
||||
if (this.textDrawService && currentCardList.length > 0) {
|
||||
this.textDrawService.draw(currentCardList);
|
||||
if (this.drawService && currentCardList.length > 0) {
|
||||
this.drawService.draw(currentCardList).catch((err) => {
|
||||
console.error('绘制失败:', err);
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -199,7 +246,9 @@ Page({
|
||||
color = colorHex;
|
||||
} else {
|
||||
// 否则随机选择一个可用颜色
|
||||
const randomIndex = Math.floor(Math.random() * shuffledColors.length);
|
||||
const randomIndex = Math.floor(
|
||||
Math.random() * shuffledColors.length,
|
||||
);
|
||||
color = shuffledColors[randomIndex];
|
||||
// 从可用颜色中移除已使用的颜色
|
||||
shuffledColors.splice(randomIndex, 1);
|
||||
@@ -207,7 +256,7 @@ Page({
|
||||
|
||||
return {
|
||||
word: char,
|
||||
color: color
|
||||
color: color,
|
||||
};
|
||||
});
|
||||
|
||||
@@ -291,7 +340,7 @@ Page({
|
||||
// 清空cardList时，重置canvas相关引用，因为DOM元素会被移除
|
||||
this.canvas = null;
|
||||
this.ctx = null;
|
||||
this.textDrawService = null;
|
||||
this.drawService = null;
|
||||
this.drawCanvas([]);
|
||||
},
|
||||
|
||||
@@ -305,7 +354,8 @@ Page({
|
||||
// 随机获取6个不重复的文字
|
||||
const selectedWords: string[] = [];
|
||||
while (selectedWords.length < 6) {
|
||||
const randomWord = allWords[Math.floor(Math.random() * allWords.length)];
|
||||
const randomWord =
|
||||
allWords[Math.floor(Math.random() * allWords.length)];
|
||||
if (!selectedWords.includes(randomWord)) {
|
||||
selectedWords.push(randomWord);
|
||||
}
|
||||
@@ -323,7 +373,7 @@ Page({
|
||||
// 组合文字和颜色
|
||||
const cardList = selectedWords.map((word, index) => ({
|
||||
color: selectedColors[index],
|
||||
word
|
||||
word,
|
||||
}));
|
||||
this.drawCanvas(cardList);
|
||||
},
|
||||
@@ -342,17 +392,17 @@ Page({
|
||||
// 获取颜色字对应的16进制颜色值
|
||||
getColorByWord(word: string): string | null {
|
||||
const colorMap: Record<string, string> = {
|
||||
'红': '#FF0000',
|
||||
'蓝': '#0000FF',
|
||||
'绿': '#00FF00',
|
||||
'黄': '#FFFF00',
|
||||
'黑': '#000000',
|
||||
'白': '#FFFFFF',
|
||||
'紫': '#800080',
|
||||
'橙': '#FF7F00',
|
||||
'粉': '#FF69B4',
|
||||
'棕': '#A52A2A',
|
||||
'灰': '#808080'
|
||||
红: '#FF0000',
|
||||
蓝: '#0000FF',
|
||||
绿: '#00FF00',
|
||||
黄: '#FFFF00',
|
||||
黑: '#000000',
|
||||
白: '#FFFFFF',
|
||||
紫: '#800080',
|
||||
橙: '#FF7F00',
|
||||
粉: '#FF69B4',
|
||||
棕: '#A52A2A',
|
||||
灰: '#808080',
|
||||
};
|
||||
return colorMap[word] || null;
|
||||
},
|
||||
@@ -365,7 +415,7 @@ Page({
|
||||
const colorHex = this.getColorByWord(word);
|
||||
return {
|
||||
color: colorHex || colors[index].hex,
|
||||
word
|
||||
word,
|
||||
};
|
||||
});
|
||||
|
||||
@@ -382,16 +432,20 @@ Page({
|
||||
// 模板选择事件
|
||||
onSelectTemplate(e: WechatMiniprogram.TouchEvent) {
|
||||
const { template } = e.currentTarget.dataset;
|
||||
this.setData({
|
||||
selectedTemplate: template
|
||||
});
|
||||
|
||||
// 这里后续可以添加根据模板类型更新canvas绘制效果的逻辑
|
||||
console.log('选择的模板类型:', template);
|
||||
|
||||
// 如果有文字卡片，可以重新绘制canvas
|
||||
if (this.data.cardList.length > 0) {
|
||||
this.drawCanvas();
|
||||
}
|
||||
this.setData(
|
||||
{
|
||||
selectedTemplate: template,
|
||||
},
|
||||
() => {
|
||||
// 模板切换后，重新创建绘制服务并重新绘制
|
||||
if (this.canvas && this.ctx) {
|
||||
this.createDrawService();
|
||||
// 如果有文字卡片，重新绘制canvas
|
||||
if (this.data.cardList.length > 0) {
|
||||
this.drawCanvas();
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
@@ -51,99 +51,37 @@
|
||||
</view>
|
||||
|
||||
<!-- 趣味模板选择区域 -->
|
||||
<!-- <view class="template-section">
|
||||
<view class="template-section">
|
||||
<view class="template-title">选择涂色模板</view>
|
||||
<view class="template-grid">
|
||||
<view class="template-list">
|
||||
<view
|
||||
class="template-item {{selectedTemplate === 'grid' ? 'active' : ''}}"
|
||||
data-template="grid"
|
||||
bind:tap="onSelectTemplate">
|
||||
<view class="template-preview">
|
||||
<view class="template-preview-content grid-template">
|
||||
<view class="preview-word" style="color: #ffd719"
|
||||
>王</view
|
||||
>
|
||||
<view class="preview-word" style="color: #93d333"
|
||||
>手</view
|
||||
>
|
||||
<view class="preview-word" style="color: #ff6b9d"
|
||||
>哭</view
|
||||
>
|
||||
<view class="preview-word" style="color: #4ecdc4"
|
||||
>少</view
|
||||
>
|
||||
</view>
|
||||
<view class="template-checkbox">
|
||||
<view
|
||||
class="checkbox-icon"
|
||||
wx:if="{{selectedTemplate === 'grid'}}"
|
||||
>✓</view
|
||||
>
|
||||
</view>
|
||||
<view class="template-name">网格排列</view>
|
||||
<view class="template-name">网格模板</view>
|
||||
</view>
|
||||
<view
|
||||
class="template-item {{selectedTemplate === 'circle' ? 'active' : ''}}"
|
||||
data-template="circle"
|
||||
class="template-item {{selectedTemplate === 'find' ? 'active' : ''}}"
|
||||
data-template="find"
|
||||
bind:tap="onSelectTemplate">
|
||||
<view class="template-preview">
|
||||
<view class="template-preview-content circle-template">
|
||||
<view class="preview-word" style="color: #ffd719"
|
||||
>王</view
|
||||
>
|
||||
<view class="preview-word" style="color: #93d333"
|
||||
>手</view
|
||||
>
|
||||
<view class="preview-word" style="color: #ff6b9d"
|
||||
>哭</view
|
||||
>
|
||||
<view class="preview-word" style="color: #4ecdc4"
|
||||
>少</view
|
||||
>
|
||||
</view>
|
||||
<view class="template-checkbox">
|
||||
<view
|
||||
class="checkbox-icon"
|
||||
wx:if="{{selectedTemplate === 'find'}}"
|
||||
>✓</view
|
||||
>
|
||||
</view>
|
||||
<view class="template-name">圆形排列</view>
|
||||
</view>
|
||||
<view
|
||||
class="template-item {{selectedTemplate === 'random' ? 'active' : ''}}"
|
||||
data-template="random"
|
||||
bind:tap="onSelectTemplate">
|
||||
<view class="template-preview">
|
||||
<view class="template-preview-content random-template">
|
||||
<view class="preview-word" style="color: #ffd719"
|
||||
>王</view
|
||||
>
|
||||
<view class="preview-word" style="color: #93d333"
|
||||
>手</view
|
||||
>
|
||||
<view class="preview-word" style="color: #ff6b9d"
|
||||
>哭</view
|
||||
>
|
||||
<view class="preview-word" style="color: #4ecdc4"
|
||||
>少</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<view class="template-name">随机分布</view>
|
||||
</view>
|
||||
<view
|
||||
class="template-item {{selectedTemplate === 'line' ? 'active' : ''}}"
|
||||
data-template="line"
|
||||
bind:tap="onSelectTemplate">
|
||||
<view class="template-preview">
|
||||
<view class="template-preview-content line-template">
|
||||
<view class="preview-word" style="color: #ffd719"
|
||||
>王</view
|
||||
>
|
||||
<view class="preview-word" style="color: #93d333"
|
||||
>手</view
|
||||
>
|
||||
<view class="preview-word" style="color: #ff6b9d"
|
||||
>哭</view
|
||||
>
|
||||
<view class="preview-word" style="color: #4ecdc4"
|
||||
>少</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<view class="template-name">直线排列</view>
|
||||
<view class="template-name">找字模板</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view id="previewWrapper" class="wrapper" wx:if="{{cardList.length > 0}}">
|
||||
<text class="wrapper-title">预览打印效果</text>
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
import TextDrawService from './textDrawService';
|
||||
import FindWordDrawService from './findWordDrawService';
|
||||
|
||||
/**
|
||||
* 绘制服务接口
|
||||
*/
|
||||
export interface IDrawService {
|
||||
draw(list: Array<{ color: string; word: string }>): Promise<void>;
|
||||
clear(): void;
|
||||
setPaper(): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 模板类型
|
||||
*/
|
||||
export type TemplateType = 'grid' | 'find';
|
||||
|
||||
/**
|
||||
* 绘制服务工厂类
|
||||
* 根据模板类型创建对应的绘制服务实例
|
||||
*/
|
||||
export class DrawServiceFactory {
|
||||
/**
|
||||
* 创建绘制服务实例
|
||||
* @param templateType 模板类型
|
||||
* @param canvas Canvas 对象
|
||||
* @param ctx 渲染上下文
|
||||
* @param options 可选配置
|
||||
* @returns 绘制服务实例
|
||||
*/
|
||||
static create(
|
||||
templateType: TemplateType,
|
||||
canvas: Canvas,
|
||||
ctx: RenderingContext,
|
||||
options?: Record<string, any>,
|
||||
): IDrawService {
|
||||
switch (templateType) {
|
||||
case 'grid':
|
||||
return new TextDrawService(canvas, ctx, options);
|
||||
case 'find':
|
||||
return new FindWordDrawService(canvas, ctx, options);
|
||||
default:
|
||||
// 默认使用网格模板
|
||||
return new TextDrawService(canvas, ctx, options);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,300 @@
|
||||
import { PAPER_SIZE } from '../constants/colors';
|
||||
import {
|
||||
drawHeader as drawHeaderCommon,
|
||||
drawMiniHeader as drawMiniHeaderCommon,
|
||||
} from './headerDrawService';
|
||||
import { POSITION_TEMPLATES } from './findWordTemplate';
|
||||
|
||||
// ==================== Debug 开关 ====================
|
||||
// 设置为 true 时，其他文字会显示坐标系的索引值（第几个位置），方便手动调整坐标系
|
||||
const DEBUG = false;
|
||||
// ====================================================
|
||||
|
||||
/**
|
||||
* 从固定模板中获取位置
|
||||
* @param centerX 中心X坐标
|
||||
* @param centerY 中心Y坐标
|
||||
* @param count 需要的位置数量
|
||||
* @param padding 边距
|
||||
* @param canvasWidth 画布宽度
|
||||
* @param canvasHeight 画布高度
|
||||
* @param radius 字符圆半径
|
||||
* @returns 位置数组
|
||||
*/
|
||||
/**
|
||||
* 随机选择一个模板并返回模板的实际位置数量
|
||||
* @returns 模板索引和模板的实际位置数量
|
||||
*/
|
||||
function selectTemplate(): { templateIndex: number } {
|
||||
const templateIndex = Math.floor(Math.random() * POSITION_TEMPLATES.length);
|
||||
return {
|
||||
templateIndex,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 从指定模板中获取位置
|
||||
* @param templateIndex 模板索引
|
||||
* @param centerX 中心X坐标
|
||||
* @param centerY 中心Y坐标
|
||||
* @param padding 边距
|
||||
* @param canvasWidth 画布宽度
|
||||
* @param canvasHeight 画布高度
|
||||
* @param radius 字符圆半径
|
||||
* @returns 位置数组
|
||||
*/
|
||||
function getPositionsFromTemplate(
|
||||
templateIndex: number,
|
||||
centerX: number,
|
||||
centerY: number,
|
||||
): Array<{ x: number; y: number }> {
|
||||
const template = POSITION_TEMPLATES[templateIndex];
|
||||
|
||||
// 转换为绝对坐标并检查边界
|
||||
const positions: Array<{ x: number; y: number }> = [];
|
||||
for (const pos of template) {
|
||||
const x = centerX + pos.x;
|
||||
const y = centerY + pos.y;
|
||||
|
||||
positions.push({ x, y });
|
||||
}
|
||||
return positions;
|
||||
}
|
||||
|
||||
class FindWordDrawService {
|
||||
headerType: PrintHeader = 'wechat';
|
||||
canvas: WechatMiniprogram.Canvas;
|
||||
ctx: RenderingContext;
|
||||
options: Record<string, any>;
|
||||
paperSize: PaperSize;
|
||||
currentX: number;
|
||||
currentY: number;
|
||||
colors: string[];
|
||||
characters: string[];
|
||||
debug: boolean = false; // Debug模式开关
|
||||
|
||||
constructor(
|
||||
canvas: Canvas,
|
||||
ctx: RenderingContext,
|
||||
options?: Record<string, any>,
|
||||
) {
|
||||
options = options || {};
|
||||
this.canvas = canvas;
|
||||
this.ctx = ctx;
|
||||
this.paperSize = 'A4';
|
||||
this.options = {
|
||||
appName: '涂鸦丫小程序',
|
||||
appHint: '识字|识图|练字|打印',
|
||||
title: '找一找 涂 色',
|
||||
subTitle: '给文字涂上相同的颜色',
|
||||
...options,
|
||||
};
|
||||
// 从options中读取debug参数，如果没有则使用全局DEBUG常量
|
||||
this.debug = options.debug === true || DEBUG;
|
||||
this.currentX = 0;
|
||||
this.currentY = 0;
|
||||
this.colors = ['#000'];
|
||||
this.characters = ['王'];
|
||||
this.setPrintConfig();
|
||||
}
|
||||
|
||||
setPrintConfig() {
|
||||
const printConfig = getApp().getPrintConfig();
|
||||
this.headerType = printConfig.header;
|
||||
this.options.appName = printConfig.appName;
|
||||
}
|
||||
|
||||
async draw(list: Array<{ color: string; word: string }>) {
|
||||
this.setPrintConfig();
|
||||
|
||||
this.colors = list.map((item) => item.color || '#000');
|
||||
this.characters = list.map((item) => item.word || '日');
|
||||
this.clear();
|
||||
this.setPaper();
|
||||
if (this.headerType !== 'minimal') {
|
||||
await this.drawHeader();
|
||||
} else {
|
||||
this.drawMiniHeader();
|
||||
}
|
||||
|
||||
// 找字模板没有 drawLegend 部分
|
||||
this.drawContent();
|
||||
}
|
||||
|
||||
async drawHeader() {
|
||||
this.currentX = 80;
|
||||
this.currentY = 80;
|
||||
await drawHeaderCommon({
|
||||
canvas: this.canvas,
|
||||
ctx: this.ctx,
|
||||
headerType: this.headerType,
|
||||
options: {
|
||||
appName: this.options.appName || '涂鸦丫小程序',
|
||||
appHint: this.options.appHint || '识字|识图|练字|打印',
|
||||
title: this.options.title || '找一找 涂 色',
|
||||
subTitle: this.options.subTitle || '给文字涂上相同的颜色',
|
||||
},
|
||||
onHeaderDrawn: (currentY) => {
|
||||
this.currentY = currentY;
|
||||
this.drawLine(this.currentY);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
drawMiniHeader() {
|
||||
drawMiniHeaderCommon({
|
||||
canvas: this.canvas,
|
||||
ctx: this.ctx,
|
||||
options: {
|
||||
appName: this.options.appName || '涂鸦丫小程序',
|
||||
title: this.options.title || '找一找 涂 色',
|
||||
},
|
||||
onHeaderDrawn: (currentY) => {
|
||||
this.currentY = currentY;
|
||||
this.drawLine(this.currentY);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
drawContent() {
|
||||
const { canvas, ctx, characters, colors } = this;
|
||||
if (characters.length <= 0) return;
|
||||
|
||||
// 第一个字作为中心大字
|
||||
const firstChar = characters[0];
|
||||
const firstColor = colors[0];
|
||||
|
||||
// 计算内容区域
|
||||
const contentTop = this.currentY + 50;
|
||||
const contentBottom = canvas.height - 80;
|
||||
const contentHeight = contentBottom - contentTop;
|
||||
|
||||
// 中心大字的参数
|
||||
const centerX = canvas.width / 2;
|
||||
const centerY = contentTop + contentHeight / 2; // 内容区域垂直居中
|
||||
|
||||
// 普通圆的参数（和textDrawService一致）
|
||||
const radius = 80;
|
||||
const fontSize = 72;
|
||||
|
||||
// 先选择模板，获取模板的实际位置数量
|
||||
const { templateIndex } = selectTemplate();
|
||||
// 从固定模板中获取位置
|
||||
const positions = getPositionsFromTemplate(
|
||||
templateIndex,
|
||||
centerX,
|
||||
centerY,
|
||||
);
|
||||
const targetCount = positions.length; // 使用模板的实际位置数量（中心字已单独绘制）
|
||||
|
||||
// 生成所有要绘制的字符列表（包括第一个字和其他字）
|
||||
const allChars: Array<{ char: string; color: string }> = [];
|
||||
|
||||
// 如果只有一个字符，全部使用第一个字符
|
||||
if (characters.length === 1) {
|
||||
for (let i = 0; i < targetCount; i++) {
|
||||
allChars.push({ char: firstChar, color: firstColor });
|
||||
}
|
||||
} else {
|
||||
// 第一个字出现多次（根据总字符数决定，确保有足够的第一个字）
|
||||
const firstCharCount = Math.max(
|
||||
Math.floor(targetCount * 0.4),
|
||||
Math.floor(characters.length * 2),
|
||||
);
|
||||
for (let i = 0; i < firstCharCount; i++) {
|
||||
allChars.push({ char: firstChar, color: firstColor });
|
||||
}
|
||||
|
||||
// 其他字符各出现几次
|
||||
const remainingCount = targetCount - firstCharCount;
|
||||
const otherCharCount = Math.max(
|
||||
1,
|
||||
Math.floor(remainingCount / (characters.length - 1)),
|
||||
);
|
||||
for (let i = 1; i < characters.length; i++) {
|
||||
for (let j = 0; j < otherCharCount; j++) {
|
||||
allChars.push({ char: characters[i], color: colors[i] });
|
||||
}
|
||||
}
|
||||
|
||||
// 如果生成的字符数量还不够，用第一个字符补齐
|
||||
while (allChars.length < targetCount) {
|
||||
allChars.push({ char: firstChar, color: firstColor });
|
||||
}
|
||||
}
|
||||
|
||||
// 打乱顺序
|
||||
for (let i = allChars.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[allChars[i], allChars[j]] = [allChars[j], allChars[i]];
|
||||
}
|
||||
|
||||
// 根据实际生成的位置数量来截取字符（确保数量匹配）
|
||||
const charsToDraw = allChars.slice(0, positions.length);
|
||||
|
||||
// 绘制中心大字（去掉圆圈border，只绘制文字）
|
||||
ctx.fillStyle = '#333';
|
||||
ctx.font = `bold ${fontSize * 3}px "Microsoft Yahei"`; // 中心字是其他字的3倍
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText(firstChar, centerX, centerY);
|
||||
|
||||
// 绘制四周的字符
|
||||
positions.forEach((pos, index) => {
|
||||
const item = charsToDraw[index];
|
||||
const y = pos.y; // 已经是绝对坐标，不需要再加contentTop
|
||||
|
||||
// 绘制圆
|
||||
ctx.fillStyle = '#fff';
|
||||
ctx.strokeStyle = '#000';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.beginPath();
|
||||
ctx.arc(pos.x, y, radius, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
|
||||
// 绘制字符
|
||||
ctx.fillStyle = '#333';
|
||||
ctx.font = `bold ${fontSize}px "Microsoft Yahei"`;
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.textAlign = 'center';
|
||||
// Debug模式：显示坐标系索引值，否则显示文字
|
||||
const displayText = this.debug ? String(index) : item.char;
|
||||
ctx.fillText(displayText, pos.x, y, radius * 2);
|
||||
});
|
||||
}
|
||||
|
||||
drawLine(linY: number) {
|
||||
const { canvas, ctx } = this;
|
||||
|
||||
ctx.strokeStyle = '#000';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(80, linY);
|
||||
ctx.lineTo(canvas.width - 80, linY);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
setPaper() {
|
||||
const { ctx, canvas } = this;
|
||||
const { pixelRatio: dpr } = wx.getWindowInfo();
|
||||
let { width, height } = PAPER_SIZE[this.paperSize];
|
||||
width = width * dpr;
|
||||
height = height * dpr;
|
||||
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
|
||||
this.clear();
|
||||
ctx.fillStyle = '#fff';
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
}
|
||||
|
||||
clear() {
|
||||
const canvas = this.canvas;
|
||||
this.ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
}
|
||||
|
||||
export default FindWordDrawService;
|
||||
@@ -0,0 +1,223 @@
|
||||
export const POSITION_TEMPLATES: Array<Array<{ x: number; y: number }>> = [
|
||||
// 模板1：椭圆形分布-上下更密集 28个位置，相邻间距约100-150px
|
||||
[
|
||||
// 0-14号位置
|
||||
{ x: -600, y: 0 }, // 0 - 左侧
|
||||
{ x: -440, y: -240 }, // 1
|
||||
{ x: -580, y: -430 }, // 2
|
||||
{ x: -340, y: -600 }, // 3
|
||||
{ x: -330, y: -880 }, // 4
|
||||
{ x: -560, y: -780 }, // 5
|
||||
{ x: -50, y: -890 }, // 6
|
||||
{ x: -80, y: -670 }, // 7 - 上方
|
||||
{ x: 180, y: -880 }, // 8
|
||||
{ x: 200, y: -620 }, // 9
|
||||
{ x: 440, y: -850 }, // 10
|
||||
{ x: 600, y: -620 }, // 11
|
||||
{ x: 420, y: -460 }, // 12
|
||||
{ x: 500, y: -220 }, // 13
|
||||
{ x: 600, y: 0 }, // 14 - 右侧
|
||||
// 15-28号位置：基于0-14号位置以x轴为镜像轴生成（y坐标取反，x坐标不变）
|
||||
{ x: 600, y: 0 }, // 15 - 14的镜像
|
||||
{ x: 500, y: 220 }, // 16 - 13的镜像
|
||||
{ x: 420, y: 460 }, // 17 - 12的镜像
|
||||
{ x: 600, y: 620 }, // 18 - 11的镜像
|
||||
{ x: 440, y: 850 }, // 19 - 10的镜像
|
||||
{ x: 200, y: 620 }, // 20 - 9的镜像
|
||||
{ x: 180, y: 880 }, // 21 - 8的镜像
|
||||
{ x: -80, y: 670 }, // 22 - 7的镜像
|
||||
{ x: -50, y: 890 }, // 23 - 6的镜像
|
||||
{ x: -560, y: 780 }, // 24 - 5的镜像
|
||||
{ x: -330, y: 880 }, // 25 - 4的镜像
|
||||
{ x: -340, y: 600 }, // 26 - 3的镜像
|
||||
{ x: -580, y: 430 }, // 27 - 2的镜像
|
||||
{ x: -440, y: 240 }, // 28 - 1的镜像
|
||||
],
|
||||
// 模板2：基于模板1，在上下各增加一个坐标系，并适度调整原始位置
|
||||
[
|
||||
{ x: -620, y: 0 }, // 0 - 左侧（向外扩展）
|
||||
{ x: -420, y: -200 }, // 1
|
||||
{ x: -640, y: -350 }, // 2
|
||||
{ x: -400, y: -480 }, // 3
|
||||
{ x: -600, y: -600 }, // 4
|
||||
{ x: -420, y: -740 }, // 5
|
||||
{ x: -280, y: -910 }, // 6
|
||||
{ x: -200, y: -680 }, // 7
|
||||
{ x: -60, y: -890 }, // 8
|
||||
{ x: -10, y: -660 }, // 9 - 上方
|
||||
{ x: 180, y: -890 }, // 10
|
||||
{ x: 200, y: -630 }, // 11
|
||||
{ x: 400, y: -800 }, // 12
|
||||
{ x: 590, y: -660 }, // 13
|
||||
{ x: 410, y: -440 }, // 14
|
||||
{ x: 680, y: -420 }, // 15
|
||||
{ x: 570, y: -210 }, // 16
|
||||
{ x: 670, y: 0 }, // 17 - 右侧
|
||||
// 18-35号位置：基于0-17号位置以x轴为镜像轴生成（y坐标取反，x坐标不变）
|
||||
{ x: 570, y: 210 }, // 18 - 16的镜像
|
||||
{ x: 680, y: 420 }, // 19 - 15的镜像
|
||||
{ x: 410, y: 440 }, // 20 - 14的镜像
|
||||
{ x: 590, y: 660 }, // 21 - 13的镜像
|
||||
{ x: 400, y: 800 }, // 22 - 12的镜像
|
||||
{ x: 200, y: 630 }, // 23 - 11的镜像
|
||||
{ x: 180, y: 890 }, // 24 - 10的镜像
|
||||
{ x: -10, y: 660 }, // 25 - 9的镜像
|
||||
{ x: -60, y: 890 }, // 26 - 8的镜像
|
||||
{ x: -200, y: 680 }, // 27 - 7的镜像
|
||||
{ x: -300, y: 930 }, // 28 - 6的镜像
|
||||
{ x: -440, y: 780 }, // 29 - 5的镜像
|
||||
{ x: -600, y: 600 }, // 30 - 4的镜像
|
||||
{ x: -400, y: 480 }, // 31 - 3的镜像
|
||||
{ x: -640, y: 350 }, // 32 - 2的镜像
|
||||
{ x: -420, y: 200 }, // 33 - 1的镜像
|
||||
],
|
||||
// 模板3
|
||||
[
|
||||
// 0-15号位置
|
||||
{ x: -660, y: -100 }, // 0 - 左侧
|
||||
{ x: -500, y: -280 }, // 1
|
||||
{ x: -660, y: -480 }, // 2
|
||||
{ x: -660, y: -720 }, // 3
|
||||
{ x: -440, y: -920 }, // 4
|
||||
{ x: -250, y: -720 }, // 5
|
||||
{ x: -380, y: -480 }, // 6 - 上方
|
||||
{ x: -140, y: -480 }, // 7
|
||||
{ x: 90, y: -480 }, // 8
|
||||
{ x: 340, y: -480 }, // 9
|
||||
{ x: 250, y: -720 }, // 10
|
||||
{ x: 440, y: -920 }, // 11
|
||||
{ x: 660, y: -720 }, // 12
|
||||
{ x: 660, y: -480 }, // 13
|
||||
{ x: 500, y: -280 }, // 14
|
||||
{ x: 660, y: -100 }, // 15 - 右侧
|
||||
// 16-32号位置：基于0-15号位置以x轴为镜像轴生成（y坐标取反，x坐标不变）
|
||||
{ x: 660, y: 120 }, // 16 - 15的镜像
|
||||
{ x: 500, y: 300 }, // 17 - 14的镜像
|
||||
{ x: 680, y: 480 }, // 18 - 13的镜像
|
||||
{ x: 680, y: 720 }, // 19 - 12的镜像
|
||||
{ x: 500, y: 920 }, // 20 - 11的镜像
|
||||
{ x: 250, y: 720 }, // 21 - 10的镜像
|
||||
{ x: 340, y: 480 }, // 22 - 9的镜像
|
||||
{ x: 90, y: 480 }, // 23 - 8的镜像
|
||||
{ x: -140, y: 480 }, // 24 - 7的镜像
|
||||
{ x: -380, y: 480 }, // 25 - 6的镜像
|
||||
{ x: -250, y: 720 }, // 26 - 5的镜像
|
||||
{ x: -500, y: 920 }, // 27 - 4的镜像
|
||||
{ x: -660, y: 720 }, // 28 - 3的镜像
|
||||
{ x: -680, y: 480 }, // 29 - 2的镜像
|
||||
{ x: -500, y: 300 }, // 30 - 1的镜像
|
||||
{ x: -660, y: 120 }, // 31 - 0的镜像
|
||||
],
|
||||
// 模板4：三角形和梯形
|
||||
[
|
||||
// 0-5号位置
|
||||
{ x: -350, y: 0 }, // 0 - 顶点（不变）
|
||||
{ x: -500, y: 150 }, // 1 - 左侧上方45度
|
||||
{ x: -650, y: 300 }, // 2 - 左侧上方45度（更远）
|
||||
{ x: -500, y: -150 }, // 3 - 左侧下方45度
|
||||
{ x: -650, y: -300 }, // 4 - 左侧下方45度（更远）
|
||||
{ x: -650, y: 0 }, // 5 - Y=0，X和2、4相同
|
||||
|
||||
// 6-11号位置
|
||||
{ x: 350, y: 0 }, // 6 - 顶点（不变）
|
||||
{ x: 500, y: 150 }, // 7 - 右侧上方45度
|
||||
{ x: 650, y: 300 }, // 8 - 右侧上方45度（更远）
|
||||
{ x: 500, y: -150 }, // 9 - 右侧下方45度
|
||||
{ x: 650, y: -300 }, // 10 - 右侧下方45度（更远）
|
||||
{ x: 650, y: 0 }, // 11 - Y=0，X和8、10相同
|
||||
|
||||
// 倒着的梯形
|
||||
{ x: -440, y: -790 }, // 12
|
||||
{ x: -320, y: -570 }, // 13
|
||||
{ x: -200, y: -350 }, // 14
|
||||
{ x: 0, y: -350 }, // 15
|
||||
{ x: 200, y: -350 }, // 16
|
||||
{ x: 320, y: -570 }, // 17
|
||||
{ x: 440, y: -790 }, // 18
|
||||
{ x: -150, y: -790 }, // 19
|
||||
{ x: 150, y: -790 }, // 20
|
||||
|
||||
// 正着的梯形
|
||||
{ x: -440, y: 790 }, // 21
|
||||
{ x: -320, y: 570 }, // 22
|
||||
{ x: -200, y: 350 }, // 23
|
||||
{ x: 0, y: 350 }, // 24
|
||||
{ x: 200, y: 350 }, // 25
|
||||
{ x: 320, y: 570 }, // 26
|
||||
{ x: 440, y: 790 }, // 27
|
||||
{ x: 150, y: 790 }, // 28
|
||||
{ x: -150, y: 790 }, // 29
|
||||
],
|
||||
// 模板5：4个正方形
|
||||
[
|
||||
// 0-7号位置
|
||||
{ x: -250, y: -250 }, // 0
|
||||
{ x: -250, y: -500 }, // 1
|
||||
{ x: -250, y: -750 }, // 2
|
||||
{ x: -500, y: -750 }, // 3
|
||||
{ x: -750, y: -750 }, // 4
|
||||
{ x: -750, y: -500 }, // 5
|
||||
{ x: -750, y: -250 }, // 6
|
||||
{ x: -500, y: -250 }, // 7
|
||||
|
||||
// 8-15号位置
|
||||
{ x: 250, y: -250 }, // 8
|
||||
{ x: 250, y: -500 }, // 9
|
||||
{ x: 250, y: -750 }, // 10
|
||||
{ x: 500, y: -750 }, // 11
|
||||
{ x: 750, y: -750 }, // 12
|
||||
{ x: 750, y: -500 }, // 13
|
||||
{ x: 750, y: -250 }, // 14
|
||||
{ x: 500, y: -250 }, // 15
|
||||
|
||||
// 16-23号位置
|
||||
{ x: -250, y: 250 }, // 16
|
||||
{ x: -250, y: 500 }, // 17
|
||||
{ x: -250, y: 750 }, // 18
|
||||
{ x: -500, y: 750 }, // 19
|
||||
{ x: -750, y: 750 }, // 20
|
||||
{ x: -750, y: 500 }, // 21
|
||||
{ x: -750, y: 250 }, // 22
|
||||
{ x: -500, y: 250 }, // 23
|
||||
|
||||
// 24-31号位置
|
||||
{ x: 250, y: 250 }, // 24
|
||||
{ x: 250, y: 500 }, // 25
|
||||
{ x: 250, y: 750 }, // 26
|
||||
{ x: 500, y: 750 }, // 27
|
||||
{ x: 750, y: 750 }, // 28
|
||||
{ x: 750, y: 500 }, // 29
|
||||
{ x: 750, y: 250 }, // 30
|
||||
{ x: 500, y: 250 }, // 31
|
||||
],
|
||||
// 模板6：4个十字形
|
||||
[
|
||||
// 0-4号位置
|
||||
{ x: -500, y: -500 }, // 0
|
||||
{ x: -250, y: -500 }, // 1
|
||||
{ x: -500, y: -750 }, // 2
|
||||
{ x: -750, y: -500 }, // 3
|
||||
{ x: -500, y: -250 }, // 4
|
||||
|
||||
// 5-9号位置
|
||||
{ x: 500, y: -500 }, // 5
|
||||
{ x: 250, y: -500 }, // 6
|
||||
{ x: 500, y: -750 }, // 7
|
||||
{ x: 750, y: -500 }, // 8
|
||||
{ x: 500, y: -250 }, // 9
|
||||
|
||||
// 10-14号位置
|
||||
{ x: -500, y: 500 }, // 10
|
||||
{ x: -250, y: 500 }, // 11
|
||||
{ x: -500, y: 750 }, // 12
|
||||
{ x: -750, y: 500 }, // 13
|
||||
{ x: -500, y: 250 }, // 14
|
||||
|
||||
// 15-19号位置
|
||||
{ x: 500, y: 500 }, // 15
|
||||
{ x: 250, y: 500 }, // 16
|
||||
{ x: 500, y: 750 }, // 17
|
||||
{ x: 750, y: 500 }, // 18
|
||||
{ x: 500, y: 250 }, // 19
|
||||
],
|
||||
];
|
||||
@@ -0,0 +1,126 @@
|
||||
import { getMiniCodeImage, getImage } from '../utils/index';
|
||||
|
||||
/**
|
||||
* 绘制页眉的参数接口
|
||||
*/
|
||||
interface DrawHeaderParams {
|
||||
canvas: WechatMiniprogram.Canvas;
|
||||
ctx: RenderingContext;
|
||||
headerType: PrintHeader;
|
||||
options: {
|
||||
appName: string;
|
||||
appHint: string;
|
||||
title: string;
|
||||
subTitle: string;
|
||||
};
|
||||
onHeaderDrawn?: (currentY: number) => void; // 绘制完成后的回调，用于设置 currentY 和绘制分割线
|
||||
}
|
||||
|
||||
/**
|
||||
* 绘制完整页眉（包含 Logo、应用名称、提示、标题、副标题）
|
||||
*/
|
||||
export async function drawHeader({
|
||||
canvas,
|
||||
ctx,
|
||||
headerType,
|
||||
options,
|
||||
onHeaderDrawn,
|
||||
}: DrawHeaderParams): Promise<void> {
|
||||
const { appName, appHint, title, subTitle } = options;
|
||||
|
||||
let titleX = 80 + 200 + 48; // currentX + logoWidth + spacing
|
||||
const titleY = 80;
|
||||
|
||||
const logoX = 80;
|
||||
const logoY = 60;
|
||||
const logoWidth = 200;
|
||||
const logoHeight = 200;
|
||||
|
||||
// 根据 headerType 绘制 Logo 或调整标题位置
|
||||
switch (headerType) {
|
||||
case 'LogoImage': {
|
||||
const image = await getImage(
|
||||
canvas,
|
||||
'/assets/imgs/doodle-logo.png',
|
||||
);
|
||||
ctx.drawImage(image, logoX, logoY, logoWidth, logoHeight);
|
||||
break;
|
||||
}
|
||||
case 'noLogoImage': {
|
||||
titleX = 120;
|
||||
break;
|
||||
}
|
||||
case 'minimal': {
|
||||
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';
|
||||
ctx.textAlign = 'left';
|
||||
ctx.textBaseline = 'top';
|
||||
ctx.fillText(appName, titleX, titleY);
|
||||
|
||||
// 绘制应用提示
|
||||
ctx.font = '48px "Microsoft Yahei"';
|
||||
ctx.fillStyle = '#666';
|
||||
ctx.fillText(appHint, titleX, 186);
|
||||
|
||||
// 绘制标题
|
||||
ctx.font = 'bold 64px "Microsoft Yahei"';
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.fillText(title, 1015, titleY);
|
||||
|
||||
// 绘制副标题
|
||||
ctx.font = '48px "Microsoft Yahei"';
|
||||
ctx.fillStyle = '#666';
|
||||
ctx.fillText(subTitle, 1015, 186);
|
||||
|
||||
// 调用回调函数，让调用者设置 currentY 并绘制分割线
|
||||
if (onHeaderDrawn) {
|
||||
onHeaderDrawn(304);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 绘制迷你页眉的参数接口
|
||||
*/
|
||||
interface DrawMiniHeaderParams {
|
||||
canvas: WechatMiniprogram.Canvas;
|
||||
ctx: RenderingContext;
|
||||
options: {
|
||||
appName: string;
|
||||
title: string;
|
||||
};
|
||||
onHeaderDrawn?: (currentY: number) => void; // 绘制完成后的回调，用于设置 currentY 和绘制分割线
|
||||
}
|
||||
|
||||
/**
|
||||
* 绘制迷你页眉（仅包含应用名称和标题，居中显示）
|
||||
*/
|
||||
export function drawMiniHeader({
|
||||
canvas,
|
||||
ctx,
|
||||
options,
|
||||
onHeaderDrawn,
|
||||
}: DrawMiniHeaderParams): void {
|
||||
const { appName, title } = options;
|
||||
const titleY = 120;
|
||||
|
||||
ctx.font = 'bold 64px "Microsoft Yahei"';
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText(appName + ' ' + title, canvas.width / 2, titleY);
|
||||
|
||||
// 调用回调函数，让调用者设置 currentY 并绘制分割线
|
||||
if (onHeaderDrawn) {
|
||||
onHeaderDrawn(200);
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,10 @@
|
||||
import { PAPER_SIZE } from '../constants/colors';
|
||||
import { getMiniCodeImage, getImage } from '../utils/index';
|
||||
import { ShapeCard } from '../constants/shapes';
|
||||
import { drawShape } from './drawShape';
|
||||
import {
|
||||
drawHeader as drawHeaderCommon,
|
||||
drawMiniHeader as drawMiniHeaderCommon,
|
||||
} from './headerDrawService';
|
||||
|
||||
/**
|
||||
* 计算图形在画布上的位置，避免重叠
|
||||
@@ -36,8 +39,16 @@ function calculateShapePositions(
|
||||
const col = i % cols;
|
||||
|
||||
// 在单元格内随机位置
|
||||
const x = padding + col * cellWidth + (cellWidth - shapeSize) / 2 + (Math.random() - 0.5) * (cellWidth - shapeSize) * 0.3;
|
||||
const y = padding + row * cellHeight + (cellHeight - shapeSize) / 2 + (Math.random() - 0.5) * (cellHeight - shapeSize) * 0.3;
|
||||
const x =
|
||||
padding +
|
||||
col * cellWidth +
|
||||
(cellWidth - shapeSize) / 2 +
|
||||
(Math.random() - 0.5) * (cellWidth - shapeSize) * 0.3;
|
||||
const y =
|
||||
padding +
|
||||
row * cellHeight +
|
||||
(cellHeight - shapeSize) / 2 +
|
||||
(Math.random() - 0.5) * (cellHeight - shapeSize) * 0.3;
|
||||
|
||||
positions.push({ x, y });
|
||||
}
|
||||
@@ -45,7 +56,6 @@ function calculateShapePositions(
|
||||
return positions;
|
||||
}
|
||||
|
||||
|
||||
class ShapeDrawService {
|
||||
headerType: PrintHeader;
|
||||
canvas: WechatMiniprogram.Canvas;
|
||||
@@ -102,74 +112,38 @@ class ShapeDrawService {
|
||||
}
|
||||
|
||||
async drawHeader() {
|
||||
const { canvas, ctx } = this;
|
||||
const { appName, appHint, title, subTitle } = this.options;
|
||||
|
||||
this.currentX = 80;
|
||||
this.currentY = 80;
|
||||
let titleX = this.currentX + 200 + 48;
|
||||
const titleY = 80;
|
||||
|
||||
const logoX = 80;
|
||||
const logoY = 60;
|
||||
const logoWidth = 200;
|
||||
const logoHeight = 200;
|
||||
|
||||
switch (this.headerType) {
|
||||
case 'LogoImage': {
|
||||
const image = await getImage(canvas, '/assets/imgs/doodle-logo.png');
|
||||
ctx.drawImage(image, logoX, logoY, logoWidth, logoHeight);
|
||||
break;
|
||||
}
|
||||
case 'noLogoImage': {
|
||||
titleX = 120;
|
||||
break;
|
||||
}
|
||||
case 'minimal': {
|
||||
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';
|
||||
ctx.textAlign = 'left';
|
||||
ctx.textBaseline = 'top';
|
||||
|
||||
ctx.fillText(appName, titleX, titleY);
|
||||
|
||||
ctx.font = '48px "Microsoft Yahei"';
|
||||
ctx.fillStyle = '#666';
|
||||
ctx.fillText(appHint, titleX, 186);
|
||||
|
||||
ctx.font = 'bold 64px "Microsoft Yahei"';
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.fillText(title, 1015, titleY);
|
||||
|
||||
ctx.font = '48px "Microsoft Yahei"';
|
||||
ctx.fillStyle = '#666';
|
||||
ctx.fillText(subTitle, 1015, 186);
|
||||
|
||||
this.currentY = 304;
|
||||
this.drawLine(this.currentY);
|
||||
await drawHeaderCommon({
|
||||
canvas: this.canvas,
|
||||
ctx: this.ctx,
|
||||
headerType: this.headerType,
|
||||
options: {
|
||||
appName: this.options.appName || '涂鸦丫小程序',
|
||||
appHint: this.options.appHint || '涂色|识字|画画|打印',
|
||||
title: this.options.title || '找一找 涂 色',
|
||||
subTitle: this.options.subTitle || '给图形涂上相同的颜色',
|
||||
},
|
||||
onHeaderDrawn: (currentY) => {
|
||||
this.currentY = currentY;
|
||||
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);
|
||||
drawMiniHeaderCommon({
|
||||
canvas: this.canvas,
|
||||
ctx: this.ctx,
|
||||
options: {
|
||||
appName: this.options.appName || '涂鸦丫小程序',
|
||||
title: this.options.title || '找一找 涂 色',
|
||||
},
|
||||
onHeaderDrawn: (currentY) => {
|
||||
this.currentY = currentY;
|
||||
this.drawLine(this.currentY);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
drawLegend() {
|
||||
@@ -245,7 +219,9 @@ class ShapeDrawService {
|
||||
|
||||
// 每行最多能放多少个图形（考虑最小间距40）
|
||||
const minGap = 40;
|
||||
const maxPerRow = Math.floor((contentWidth + minGap) / (shapeSize + minGap));
|
||||
const maxPerRow = Math.floor(
|
||||
(contentWidth + minGap) / (shapeSize + minGap),
|
||||
);
|
||||
|
||||
// 总共要绘制多少个图形（每行都填满）
|
||||
const totalShapes = maxPerRow * ROW_COUNT;
|
||||
@@ -263,14 +239,20 @@ class ShapeDrawService {
|
||||
}
|
||||
|
||||
// 生成所有图形的位置
|
||||
let positions: { x: number, y: number }[] = [];
|
||||
let positions: { x: number; y: number }[] = [];
|
||||
for (let row = 0; row < ROW_COUNT; row++) {
|
||||
// 本行起始Y
|
||||
const y = contentTop + row * (shapeSize + VERTICAL_GAP) + shapeSize / 2;
|
||||
const y =
|
||||
contentTop + row * (shapeSize + VERTICAL_GAP) + shapeSize / 2;
|
||||
// 本行实际间距
|
||||
const gap = maxPerRow > 1
|
||||
? Math.max(minGap, (contentWidth - maxPerRow * shapeSize) / (maxPerRow - 1))
|
||||
: 0;
|
||||
const gap =
|
||||
maxPerRow > 1
|
||||
? Math.max(
|
||||
minGap,
|
||||
(contentWidth - maxPerRow * shapeSize) /
|
||||
(maxPerRow - 1),
|
||||
)
|
||||
: 0;
|
||||
// 本行起始X（水平居中）
|
||||
let startX = leftMargin;
|
||||
if (maxPerRow > 1) {
|
||||
@@ -282,7 +264,7 @@ class ShapeDrawService {
|
||||
for (let col = 0; col < maxPerRow; col++) {
|
||||
positions.push({
|
||||
x: startX + col * (shapeSize + gap) + shapeSize / 2,
|
||||
y: y
|
||||
y: y,
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -297,7 +279,9 @@ class ShapeDrawService {
|
||||
}
|
||||
|
||||
// 记录实际绘制的图形数量
|
||||
console.log(`绘制图形：计划${totalShapes}个，实际${positions.length}个；每行${maxPerRow}个，共${ROW_COUNT}行；边距 左右=${leftMargin}/${rightMargin}，顶部=${topGap}（基于legend底线）`);
|
||||
console.log(
|
||||
`绘制图形：计划${totalShapes}个，实际${positions.length}个；每行${maxPerRow}个，共${ROW_COUNT}行；边距 左右=${leftMargin}/${rightMargin}，顶部=${topGap}（基于legend底线）`,
|
||||
);
|
||||
|
||||
// 绘制所有图形
|
||||
positions.forEach((pos, index) => {
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
// import { PAPER_SIZE } from './constant';
|
||||
import { PAPER_SIZE } from '../constants/colors';
|
||||
import { getMiniCodeImage, getImage } from '../utils/index';
|
||||
import {
|
||||
drawHeader as drawHeaderCommon,
|
||||
drawMiniHeader as drawMiniHeaderCommon,
|
||||
} from './headerDrawService';
|
||||
|
||||
/**
|
||||
* 计算示例区域圆的中心点
|
||||
@@ -89,7 +92,7 @@ class TextDrawService {
|
||||
this.options.appName = printConfig.appName;
|
||||
}
|
||||
|
||||
draw(list: Array<{ color: string; word: string }>) {
|
||||
async draw(list: Array<{ color: string; word: string }>) {
|
||||
this.setPrintConfig();
|
||||
|
||||
this.colors = list.map((item) => item.color || '#000');
|
||||
@@ -97,7 +100,7 @@ class TextDrawService {
|
||||
this.clear();
|
||||
this.setPaper();
|
||||
if (this.headerType !== 'minimal') {
|
||||
this.drawHeader();
|
||||
await this.drawHeader();
|
||||
} else {
|
||||
this.drawMiniHeader();
|
||||
}
|
||||
@@ -107,85 +110,40 @@ class TextDrawService {
|
||||
}
|
||||
|
||||
async drawHeader() {
|
||||
const { canvas, ctx } = this;
|
||||
const { appName, appHint, title, subTitle } = this.options;
|
||||
|
||||
this.currentX = 80;
|
||||
this.currentY = 80;
|
||||
let titleX = this.currentX + 200 + 48;
|
||||
const titleY = 80;
|
||||
|
||||
const logoX = 80;
|
||||
const logoY = 60;
|
||||
const logoWidth = 200;
|
||||
const logoHeight = 200;
|
||||
|
||||
switch (this.headerType) {
|
||||
case 'LogoImage': {
|
||||
const image = await getImage(canvas, '/assets/imgs/doodle-logo.png');
|
||||
ctx.drawImage(image, logoX, logoY, logoWidth, logoHeight);
|
||||
break;
|
||||
}
|
||||
case 'noLogoImage': {
|
||||
titleX = 120;
|
||||
break;
|
||||
}
|
||||
case 'minimal': {
|
||||
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';
|
||||
ctx.textAlign = 'left';
|
||||
ctx.textBaseline = 'top';
|
||||
|
||||
ctx.fillText(appName, titleX, titleY);
|
||||
|
||||
ctx.font = '48px "Microsoft Yahei"';
|
||||
ctx.fillStyle = '#666';
|
||||
ctx.fillText(appHint, titleX, 186);
|
||||
|
||||
// 绘制分割线
|
||||
// ctx.strokeStyle = '#888';
|
||||
// ctx.lineWidth = 2;
|
||||
// ctx.beginPath();
|
||||
// ctx.moveTo(483, 70);
|
||||
// ctx.lineTo(483, 70 + 140);
|
||||
// ctx.stroke();
|
||||
|
||||
ctx.font = 'bold 64px "Microsoft Yahei"';
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.fillText(title, 1015, titleY);
|
||||
|
||||
ctx.font = '48px "Microsoft Yahei"';
|
||||
ctx.fillStyle = '#666';
|
||||
ctx.fillText(subTitle, 1015, 186);
|
||||
|
||||
this.currentY = 304;
|
||||
this.drawLine(this.currentY);
|
||||
await drawHeaderCommon({
|
||||
canvas: this.canvas,
|
||||
ctx: this.ctx,
|
||||
headerType: this.headerType,
|
||||
options: {
|
||||
appName: this.options.appName || '涂鸦丫小程序',
|
||||
appHint: this.options.appHint || '识字|识图|练字|打印',
|
||||
title: this.options.title || '找一找 涂 色',
|
||||
subTitle: this.options.subTitle || '给文字涂上相同的颜色',
|
||||
},
|
||||
onHeaderDrawn: (currentY) => {
|
||||
this.currentY = currentY;
|
||||
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);
|
||||
drawMiniHeaderCommon({
|
||||
canvas: this.canvas,
|
||||
ctx: this.ctx,
|
||||
options: {
|
||||
appName: this.options.appName || '涂鸦丫小程序',
|
||||
title: this.options.title || '找一找 涂 色',
|
||||
},
|
||||
onHeaderDrawn: (currentY) => {
|
||||
this.currentY = currentY;
|
||||
this.drawLine(this.currentY);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/** 绘制示例
|
||||
* 矩形： x、y为左上角
|
||||
* 圆形：x、y为圆心
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
import { PAPER_SIZE } from '../constants/colors';
|
||||
import { getMiniCodeImage, getImage } from '../utils/index';
|
||||
import { CharacterItem } from '../types/characterType';
|
||||
import {
|
||||
drawHeader as drawHeaderCommon,
|
||||
drawMiniHeader as drawMiniHeaderCommon,
|
||||
} from './headerDrawService';
|
||||
|
||||
/**
|
||||
* 仅支持 M/L/Z 的简单 SVG 路径解析与绘制
|
||||
@@ -18,19 +21,21 @@ function drawSvgPathCommands({
|
||||
pathD,
|
||||
offsetX,
|
||||
offsetY,
|
||||
scale
|
||||
scale,
|
||||
}: DrawSvgPathCommandsParams) {
|
||||
// console.log('drawSvgPathCommands 参数:', { pathD, offsetX, offsetY, scale });
|
||||
|
||||
// 精度处理函数：避免浮点数精度问题
|
||||
const roundToPrecision = (num: number, precision: number = 2): number => {
|
||||
return Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision);
|
||||
return (
|
||||
Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision)
|
||||
);
|
||||
};
|
||||
|
||||
// 新的解析方法：按命令片段解析
|
||||
// 使用正则表达式匹配从字母开头到下一个字母（或结尾）的片段
|
||||
const commandRegex = /([MLZ])([^MLZ]*?)(?=[MLZ]|$)/g;
|
||||
const commands: Array<{ cmd: string, coords: string }> = [];
|
||||
const commands: Array<{ cmd: string; coords: string }> = [];
|
||||
|
||||
let match;
|
||||
while ((match = commandRegex.exec(pathD)) !== null) {
|
||||
@@ -44,9 +49,15 @@ function drawSvgPathCommands({
|
||||
let commandCount = 0;
|
||||
|
||||
// 优化的坐标解析和绘制函数
|
||||
const parseAndDrawCoords = (coords: string, cmd: string, drawFunction: (x: number, y: number) => void) => {
|
||||
const parseAndDrawCoords = (
|
||||
coords: string,
|
||||
cmd: string,
|
||||
drawFunction: (x: number, y: number) => void,
|
||||
) => {
|
||||
// 更严格的坐标解析：支持负数和小数
|
||||
const coordParts = coords.split(/\s+/).filter(part => part.trim() !== '');
|
||||
const coordParts = coords
|
||||
.split(/\s+/)
|
||||
.filter((part) => part.trim() !== '');
|
||||
|
||||
if (coordParts.length >= 2) {
|
||||
const x = parseFloat(coordParts[0]);
|
||||
@@ -60,21 +71,27 @@ function drawSvgPathCommands({
|
||||
// console.log(`${cmd}: 绘制到 (${finalX}, ${finalY}) [原始: (${x}, ${y})]`);
|
||||
drawFunction(finalX, finalY);
|
||||
} else {
|
||||
console.warn(`${cmd}: 坐标解析失败 - x=${x}, y=${y}, 原始坐标: "${coords}"`);
|
||||
console.warn(
|
||||
`${cmd}: 坐标解析失败 - x=${x}, y=${y}, 原始坐标: "${coords}"`,
|
||||
);
|
||||
}
|
||||
} else {
|
||||
console.warn(`${cmd}: 坐标数量不足，需要2个，实际${coordParts.length}个，原始: "${coords}"`);
|
||||
console.warn(
|
||||
`${cmd}: 坐标数量不足，需要2个，实际${coordParts.length}个，原始: "${coords}"`,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// 命令处理映射表，提高可读性和可扩展性
|
||||
const commandHandlers: Record<string, (coords: string) => void> = {
|
||||
'M': (coords) => parseAndDrawCoords(coords, 'M', (x, y) => ctx.moveTo(x, y)),
|
||||
'L': (coords) => parseAndDrawCoords(coords, 'L', (x, y) => ctx.lineTo(x, y)),
|
||||
'Z': () => {
|
||||
M: (coords) =>
|
||||
parseAndDrawCoords(coords, 'M', (x, y) => ctx.moveTo(x, y)),
|
||||
L: (coords) =>
|
||||
parseAndDrawCoords(coords, 'L', (x, y) => ctx.lineTo(x, y)),
|
||||
Z: () => {
|
||||
// console.log('Z: 闭合路径');
|
||||
// 注意：不要在这里调用 closePath()，因为 drawStrokes 中会统一处理
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
for (const { cmd, coords } of commands) {
|
||||
@@ -113,7 +130,7 @@ function drawStrokes({
|
||||
uptoInclusive,
|
||||
fillStyle,
|
||||
strokeStyle,
|
||||
lineWidth
|
||||
lineWidth,
|
||||
}: DrawStrokesParams) {
|
||||
// 模板中使用 54x54 的视窗尺寸
|
||||
const viewBoxSize = 54;
|
||||
@@ -152,7 +169,7 @@ function drawStrokes({
|
||||
pathD: strokes[s],
|
||||
offsetX: contentOffsetX,
|
||||
offsetY: contentOffsetY,
|
||||
scale: contentScale
|
||||
scale: contentScale,
|
||||
});
|
||||
ctx.fillStyle = fillStyle;
|
||||
ctx.strokeStyle = strokeStyle;
|
||||
@@ -178,7 +195,7 @@ function drawTianZiGrid({
|
||||
y,
|
||||
size,
|
||||
lineColor = '#e0e0e0',
|
||||
boldColor = '#cccccc'
|
||||
boldColor = '#cccccc',
|
||||
}: DrawTianZiGridParams) {
|
||||
// 外框
|
||||
ctx.strokeStyle = boldColor;
|
||||
@@ -289,83 +306,53 @@ class WordDrawService {
|
||||
|
||||
// 清空页眉以下的所有内容
|
||||
ctx.fillStyle = '#fff';
|
||||
ctx.fillRect(0, contentStartY, canvas.width, canvas.height - contentStartY);
|
||||
ctx.fillRect(
|
||||
0,
|
||||
contentStartY,
|
||||
canvas.width,
|
||||
canvas.height - contentStartY,
|
||||
);
|
||||
}
|
||||
|
||||
async drawHeader() {
|
||||
const { canvas, ctx } = this;
|
||||
const { appName, appHint, title, subTitle } = this.options;
|
||||
|
||||
this.currentX = 80;
|
||||
this.currentY = 80;
|
||||
let titleX = this.currentX + 200 + 48;
|
||||
const titleY = 80;
|
||||
|
||||
const logoX = 80;
|
||||
const logoY = 60;
|
||||
const logoWidth = 200;
|
||||
const logoHeight = 200;
|
||||
|
||||
switch (this.headerType) {
|
||||
case 'LogoImage': {
|
||||
const image = await getImage(canvas, '/assets/imgs/doodle-logo.png');
|
||||
ctx.drawImage(image, logoX, logoY, logoWidth, logoHeight);
|
||||
break;
|
||||
}
|
||||
case 'noLogoImage': {
|
||||
titleX = 120;
|
||||
break;
|
||||
}
|
||||
case 'minimal': {
|
||||
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';
|
||||
ctx.textAlign = 'left';
|
||||
ctx.textBaseline = 'top';
|
||||
ctx.fillText(appName, titleX, titleY);
|
||||
|
||||
ctx.font = '48px "Microsoft Yahei"';
|
||||
ctx.fillStyle = '#666';
|
||||
ctx.fillText(appHint, titleX, 186);
|
||||
|
||||
ctx.font = 'bold 64px "Microsoft Yahei"';
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.fillText(title, 1015, titleY);
|
||||
|
||||
ctx.font = '48px "Microsoft Yahei"';
|
||||
ctx.fillStyle = '#666';
|
||||
ctx.fillText(subTitle, 1015, 186);
|
||||
|
||||
// 计算页眉的实际高度，包括分割线
|
||||
const headerHeight = Math.max(titleY + 64 + 48 + 48) + 0; // 64px字体 + 48px间距 + 48px字体 + 20px边距
|
||||
// this.currentY = headerHeight;
|
||||
this.currentY += headerHeight;
|
||||
this.drawDivider(this.currentY);
|
||||
await drawHeaderCommon({
|
||||
canvas: this.canvas,
|
||||
ctx: this.ctx,
|
||||
headerType: this.headerType,
|
||||
options: {
|
||||
appName: this.options.appName || '涂鸦丫小程序',
|
||||
appHint: this.options.appHint || '识字|识图|练字|打印',
|
||||
title: this.options.title || '田字格 练 字 贴',
|
||||
subTitle: this.options.subTitle || '按笔画临摹练习',
|
||||
},
|
||||
onHeaderDrawn: () => {
|
||||
// wordDrawService 使用不同的计算方式
|
||||
const titleY = 80;
|
||||
const headerHeight = Math.max(titleY + 64 + 48 + 48) + 0; // 64px字体 + 48px间距 + 48px字体 + 20px边距
|
||||
this.currentY = 80 + headerHeight;
|
||||
this.drawDivider(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);
|
||||
|
||||
// 计算迷你页眉的实际高度
|
||||
const miniHeaderHeight = titleY + 64 + 20; // 64px字体 + 20px边距
|
||||
this.currentY = miniHeaderHeight;
|
||||
this.drawDivider(this.currentY);
|
||||
drawMiniHeaderCommon({
|
||||
canvas: this.canvas,
|
||||
ctx: this.ctx,
|
||||
options: {
|
||||
appName: this.options.appName || '涂鸦丫小程序',
|
||||
title: this.options.title || '田字格 练 字 贴',
|
||||
},
|
||||
onHeaderDrawn: () => {
|
||||
// wordDrawService 使用不同的计算方式
|
||||
const titleY = 120;
|
||||
const miniHeaderHeight = titleY + 64 + 20; // 64px字体 + 20px边距
|
||||
this.currentY = miniHeaderHeight;
|
||||
this.drawDivider(this.currentY);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -373,10 +360,10 @@ class WordDrawService {
|
||||
*/
|
||||
/**
|
||||
* 绘制正文内容：包括田字格的排布和内容
|
||||
*
|
||||
*
|
||||
* minGap 作用解释：
|
||||
* minGap（最小列间距）用于田字格水平方向（每一行格子之间的间距）的初始最小值。它保证多个田字格在一行内不会紧贴排布、而是有一个最小的间隔，整体看起来不会拥挤。后续还会结合画布实际剩余空间动态调整为更合适的实际间距 actualColGap。
|
||||
*
|
||||
*
|
||||
* rowGap 作用解释：
|
||||
* rowGap（行间距）用于田字格竖直方向（每一行田字格之间的间隔）的初始最小值。它防止行与行的田字格上下贴得太紧，增加一定的可视呼吸空间。之后同样会结合剩余空间动态调整为实际间距 actualRowGap。
|
||||
*/
|
||||
@@ -397,8 +384,10 @@ class WordDrawService {
|
||||
const { maxRow, maxCol } = this.getMaxGridLayout();
|
||||
|
||||
// 动态调整间距以充分利用空间（在允许的最小间距基础上弹性扩展以适配画布）
|
||||
const actualRowGap = maxRow > 1 ? (contentHeight - maxRow * cellSize) / (maxRow - 1) : 0;
|
||||
const actualColGap = maxCol > 1 ? (contentWidth - maxCol * cellSize) / (maxCol - 1) : 0;
|
||||
const actualRowGap =
|
||||
maxRow > 1 ? (contentHeight - maxRow * cellSize) / (maxRow - 1) : 0;
|
||||
const actualColGap =
|
||||
maxCol > 1 ? (contentWidth - maxCol * cellSize) / (maxCol - 1) : 0;
|
||||
|
||||
// console.log(`布局信息: 行数=${rowNumber}, 列数=${columnNumber}, 行间距=${actualRowGap.toFixed(1)}, 列间距=${actualColGap.toFixed(1)}`);
|
||||
|
||||
@@ -411,7 +400,7 @@ class WordDrawService {
|
||||
colGap: actualColGap,
|
||||
rowGap: actualRowGap,
|
||||
maxRow,
|
||||
maxCol
|
||||
maxCol,
|
||||
});
|
||||
|
||||
if (characterData && characterData.length > 0) {
|
||||
@@ -425,9 +414,9 @@ class WordDrawService {
|
||||
colGap: actualColGap,
|
||||
rowGap: actualRowGap,
|
||||
maxCol,
|
||||
maxRow
|
||||
maxRow,
|
||||
});
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -449,8 +438,14 @@ class WordDrawService {
|
||||
const minGap = 24;
|
||||
const rowGap = 36;
|
||||
|
||||
const maxCol = Math.max(1, Math.floor((contentWidth + minGap) / (cellSize + minGap)));
|
||||
const maxRow = Math.max(1, Math.floor((contentHeight + rowGap) / (cellSize + rowGap)));
|
||||
const maxCol = Math.max(
|
||||
1,
|
||||
Math.floor((contentWidth + minGap) / (cellSize + minGap)),
|
||||
);
|
||||
const maxRow = Math.max(
|
||||
1,
|
||||
Math.floor((contentHeight + rowGap) / (cellSize + rowGap)),
|
||||
);
|
||||
|
||||
return { maxRow, maxCol };
|
||||
}
|
||||
@@ -466,7 +461,7 @@ class WordDrawService {
|
||||
colGap,
|
||||
rowGap,
|
||||
maxRow,
|
||||
maxCol
|
||||
maxCol,
|
||||
}: {
|
||||
ctx: RenderingContext;
|
||||
startX: number;
|
||||
@@ -474,8 +469,8 @@ class WordDrawService {
|
||||
cellSize: number;
|
||||
colGap: number;
|
||||
rowGap: number;
|
||||
maxRow: number; // 行数
|
||||
maxCol: number; // 列数
|
||||
maxRow: number; // 行数
|
||||
maxCol: number; // 列数
|
||||
}) {
|
||||
for (let row = 0; row < maxRow; row++) {
|
||||
for (let col = 0; col < maxCol; col++) {
|
||||
@@ -498,7 +493,7 @@ class WordDrawService {
|
||||
colGap,
|
||||
rowGap,
|
||||
maxCol,
|
||||
maxRow
|
||||
maxRow,
|
||||
}: {
|
||||
ctx: RenderingContext;
|
||||
characterData: CharacterItem[];
|
||||
@@ -574,7 +569,7 @@ class WordDrawService {
|
||||
cellSize,
|
||||
colGap,
|
||||
rowGap,
|
||||
rowIndex
|
||||
rowIndex,
|
||||
}: {
|
||||
ctx: RenderingContext;
|
||||
strokes: string[];
|
||||
@@ -599,9 +594,9 @@ class WordDrawService {
|
||||
offsetY: y,
|
||||
size: cellSize,
|
||||
uptoInclusive: strokes.length - 1,
|
||||
fillStyle: 'rgb(0,0,0)', // 黑色填充
|
||||
strokeStyle: 'rgb(0,0,0)', // 黑色描边
|
||||
lineWidth: 4, // 较粗的线条
|
||||
fillStyle: 'rgb(0,0,0)', // 黑色填充
|
||||
strokeStyle: 'rgb(0,0,0)', // 黑色描边
|
||||
lineWidth: 4, // 较粗的线条
|
||||
});
|
||||
}
|
||||
|
||||
@@ -618,7 +613,7 @@ class WordDrawService {
|
||||
colGap,
|
||||
rowGap,
|
||||
rowIndex,
|
||||
columnIndex
|
||||
columnIndex,
|
||||
}: {
|
||||
ctx: RenderingContext;
|
||||
strokes: string[];
|
||||
@@ -646,7 +641,7 @@ class WordDrawService {
|
||||
uptoInclusive: strokeIndex,
|
||||
fillStyle: '#ccc',
|
||||
strokeStyle: '#ccc',
|
||||
lineWidth: 3, // 中等粗细
|
||||
lineWidth: 3, // 中等粗细
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
|
||||
"projectname": "doodle-mini",
|
||||
"setting": {
|
||||
"compileHotReLoad": true,
|
||||
"compileHotReLoad": false,
|
||||
"urlCheck": true,
|
||||
"coverView": false,
|
||||
"lazyloadPlaceholderEnable": false,
|
||||
|
||||
Reference in New Issue
Block a user