150 lines
4.8 KiB
TypeScript
150 lines
4.8 KiB
TypeScript
import { WATER_COLORS, PAPER_SIZE } from '../../constants/index';
|
|
import TextDrawService from '../../service/textDrawService';
|
|
|
|
Page({
|
|
canvas: null as Canvas | null,
|
|
ctx: null as RenderingContext | null,
|
|
boxHeight: 0,
|
|
boxWidth: 0,
|
|
textDrawService: null as TextDrawService | null,
|
|
|
|
data: {
|
|
cardList: [] as Array<{ color: string; word: string }>,
|
|
showColorPopup: false,
|
|
currentKey: 0,
|
|
currentColor: '',
|
|
WATER_COLORS: WATER_COLORS,
|
|
},
|
|
|
|
onReady() {
|
|
const query = wx.createSelectorQuery();
|
|
query
|
|
.select('#canvasWrapper')
|
|
.boundingClientRect((rect) => {
|
|
if (rect) {
|
|
const { width, height } = PAPER_SIZE['A4'];
|
|
const boxWidth = rect.width;
|
|
const boxHeight = boxWidth / (width / height);
|
|
|
|
this.boxHeight = boxHeight;
|
|
this.boxWidth = boxWidth;
|
|
this.initCanvas(boxWidth, boxHeight);
|
|
}
|
|
})
|
|
.exec();
|
|
},
|
|
|
|
initCanvas(boxWidth: number, boxHeight: number) {
|
|
wx.createSelectorQuery()
|
|
.select('#canvasContent')
|
|
.fields({
|
|
node: true,
|
|
size: true,
|
|
})
|
|
.exec((res) => {
|
|
if (res[0] && res[0].node) {
|
|
const canvas = res[0].node;
|
|
const ctx = canvas.getContext('2d');
|
|
if (ctx) {
|
|
this.canvas = canvas;
|
|
this.ctx = ctx;
|
|
// const rect = res[0];
|
|
this.textDrawService = new TextDrawService(canvas, ctx);
|
|
// textDrawService.draw();
|
|
this.setData({ boxWidth, boxHeight });
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
/** 变更cardList 并更新canvas */
|
|
drawCanvas(
|
|
updatedCardList: Array<{ color: string; word: string }>,
|
|
callback: () => void = () => {},
|
|
) {
|
|
this.setData({ cardList: updatedCardList }, callback);
|
|
this.textDrawService?.draw(updatedCardList);
|
|
},
|
|
|
|
tapCard(e: WechatMiniprogram.TouchEvent) {
|
|
const { url } = e.currentTarget.dataset;
|
|
console.log('navigateTo url:', url);
|
|
wx.navigateTo({ url });
|
|
},
|
|
|
|
onConfirmInput(e: WechatMiniprogram.Input) {
|
|
const { value } = e.detail;
|
|
const characters = value.split('');
|
|
const shuffledColors = [...WATER_COLORS.basic12].sort(
|
|
() => Math.random() - 0.5,
|
|
);
|
|
const updatedCardList = characters.map((char, index) => ({
|
|
color: shuffledColors[index % shuffledColors.length].hex,
|
|
word: char,
|
|
}));
|
|
console.log('updatedCardList', updatedCardList);
|
|
this.drawCanvas(updatedCardList);
|
|
},
|
|
|
|
deleteWordCard(e: WechatMiniprogram.CustomEvent) {
|
|
const { key, word } = e.detail;
|
|
console.log('deleteWordCard key:', key, 'word:', word);
|
|
const { cardList } = this.data;
|
|
const updatedCardList = cardList.filter((_, index) => index !== key);
|
|
|
|
this.drawCanvas(updatedCardList, () => {
|
|
wx.showToast({
|
|
title: `已删除 "${word}"`,
|
|
icon: 'none',
|
|
duration: 2000,
|
|
});
|
|
});
|
|
},
|
|
|
|
/** 下载打印 */
|
|
exportToPrint() {
|
|
console.log('this.canvas:', this.canvas);
|
|
if (this.canvas && this.data.cardList.length > 0) {
|
|
wx.canvasToTempFilePath({
|
|
canvas: this.canvas,
|
|
fileType: 'png',
|
|
quality: 1,
|
|
success: (res) => {
|
|
wx.getImageInfo({
|
|
src: res.tempFilePath,
|
|
success: (res) =>
|
|
console.log(
|
|
'getImageInfo image size :',
|
|
res.width,
|
|
res.height,
|
|
), // 应输出2480x3508
|
|
});
|
|
wx.saveImageToPhotosAlbum({
|
|
filePath: res.tempFilePath,
|
|
success: () => wx.showToast({ title: '保存成功' }),
|
|
});
|
|
},
|
|
});
|
|
return;
|
|
}
|
|
},
|
|
|
|
onColorTap(e: WechatMiniprogram.CustomEvent) {
|
|
const { key, word, color } = e.detail;
|
|
console.log('onColorTap key:', key, 'word:', word, 'color:', color);
|
|
this.setData({
|
|
showColorPopup: true,
|
|
currentKey: key,
|
|
currentColor: color,
|
|
});
|
|
},
|
|
|
|
onCloseColorPopup() {
|
|
this.setData({
|
|
showColorPopup: false,
|
|
currentKey: 0,
|
|
currentColor: '',
|
|
});
|
|
},
|
|
});
|