154 lines
5.2 KiB
TypeScript
154 lines
5.2 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 }>,
|
|
},
|
|
|
|
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();
|
|
},
|
|
|
|
// renderCanvas() {
|
|
// // wx.nextTick(() => {
|
|
// // this.setCanvasBoxSize();
|
|
// // });
|
|
// console.log('this.boxWidth:', this.boxWidth);
|
|
// console.log('this.boxHeight:', this.boxHeight);
|
|
// if (this.boxWidth && this.boxHeight) {
|
|
// this.initCanvas(this.boxWidth, this.boxHeight);
|
|
// }
|
|
// },
|
|
|
|
// setCanvasBoxSize() {
|
|
// const { windowWidth } = wx.getWindowInfo();
|
|
// console.log('windowWidth---:', windowWidth);
|
|
// const query = wx.createSelectorQuery();
|
|
// query
|
|
// .select('#canvasWrapper')
|
|
// .boundingClientRect((rect) => {
|
|
// if (rect) {
|
|
// const boxWidth = rect.width;
|
|
// const boxHeight = boxWidth / (width / height);
|
|
|
|
// console.log('boxWidth----:', boxWidth);
|
|
// console.log('boxHeight----:', boxHeight);
|
|
|
|
// this.initCanvas(boxHeight, boxWidth);
|
|
// }
|
|
// })
|
|
// .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];
|
|
console.log('rect-----:', rect);
|
|
this.textDrawService = new TextDrawService(canvas, ctx);
|
|
// textDrawService.draw();
|
|
this.setData({ boxWidth, boxHeight });
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
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;
|
|
console.log('indexPage onConfirmInput value:', value);
|
|
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.setData({ cardList: updatedCardList });
|
|
// this.renderCanvas();
|
|
this.textDrawService?.draw(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.setData({ cardList: updatedCardList });
|
|
wx.showToast({
|
|
title: `已删除 "${word}"`,
|
|
icon: 'none',
|
|
duration: 2000,
|
|
});
|
|
// this.renderCanvas();
|
|
this.textDrawService?.draw(updatedCardList);
|
|
},
|
|
|
|
/** 下载打印 */
|
|
exportToPrint() {
|
|
console.log('this.canvas:', this.canvas);
|
|
if (this.canvas) {
|
|
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;
|
|
}
|
|
},
|
|
});
|