feat:完成生成打印纸的步骤
This commit is contained in:
@@ -1,10 +1,10 @@
|
||||
page {
|
||||
background-color: #F6F6F6;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
background-color: #F6F6F6;
|
||||
padding: 24rpx;
|
||||
background-color: #f6f6f6;
|
||||
padding: 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.wrapper {
|
||||
@@ -23,8 +23,16 @@ page {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// #previewWrapper {
|
||||
// margin-bottom: 200rpx;
|
||||
// }
|
||||
|
||||
.word-card-box {
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
@@ -35,4 +43,29 @@ page {
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
height: 190rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.canvas-wrapper {
|
||||
margin-top: 20rpx;
|
||||
width: 100%;
|
||||
border: 1rpx solid #141414;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.btn-area {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 190rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,125 @@
|
||||
import { WATER_COLORS, PAPER_SIZE } from '../../constants/index';
|
||||
import TextDrawService from '../../service/textDrawService';
|
||||
|
||||
Page({
|
||||
data: {},
|
||||
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);
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,19 +1,47 @@
|
||||
<scroll-view class="page-container" scroll-y type="list">
|
||||
<view class="page-container">
|
||||
<view class="wrapper">
|
||||
<text class="wrapper-title">设置文字和颜色</text>
|
||||
<word-input />
|
||||
<text class="wrapper-title">设置文字和颜色12</text>
|
||||
<word-input bind:onConfirm="onConfirmInput" />
|
||||
<view class="word-card-box">
|
||||
<view class="word-card-list">
|
||||
<word-card />
|
||||
<word-card />
|
||||
</view>
|
||||
<view class="word-card-list">
|
||||
<word-card />
|
||||
<word-card />
|
||||
</view>
|
||||
<block
|
||||
wx:for="{{cardList}}"
|
||||
wx:for-item="item"
|
||||
wx:for-index="index">
|
||||
<view class="word-card-list" wx:if="{{index % 2 === 0}}">
|
||||
<word-card
|
||||
key="{{index}}"
|
||||
word="{{item.word}}"
|
||||
color="{{item.color}}"
|
||||
bind:onDelete="deleteWordCard" />
|
||||
<word-card
|
||||
wx:if="{{cardList[index + 1]}}"
|
||||
key="{{index + 1}}"
|
||||
word="{{cardList[index + 1].word}}"
|
||||
color="{{cardList[index + 1].color}}"
|
||||
bind:onDelete="deleteWordCard" />
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class="wrapper">
|
||||
<view
|
||||
id="previewWrapper"
|
||||
class="wrapper {{cardList.length > 0 ? '' : 'hidden'}}">
|
||||
<text class="wrapper-title">预览打印效果</text>
|
||||
<view id="canvasWrapper" class="canvas-wrapper">
|
||||
<canvas
|
||||
type="2d"
|
||||
id="canvasContent"
|
||||
class="canvas-content"
|
||||
style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="empty"></view>
|
||||
</view>
|
||||
<view class="btn-area">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
bindtap="onPrint"
|
||||
wx:if="{{cardList.length > 0}}">
|
||||
打印
|
||||
</button>
|
||||
</view>
|
||||
|
||||
Reference in New Issue
Block a user