feat: 文本绘制测试页面
This commit is contained in:
zhangyi
@@ -3,20 +3,21 @@ Page({
|
||||
ctx: null as RenderingContext | null,
|
||||
data: {
|
||||
characters: ['鱼', '鸟', '牛', '羊'] as const, // 固定汉字类型
|
||||
colorMap: new Map([
|
||||
// 颜色映射关系
|
||||
['鱼', '#2196F3'], // 蓝色
|
||||
['鸟', '#FFEB3B'], // 黄色
|
||||
['牛', '#FF9800'], // 橙色
|
||||
['羊', '#9C27B0'], // 紫色
|
||||
]),
|
||||
colorMap: {
|
||||
鱼: '#2196F3', // 蓝色
|
||||
鸟: '#FFEB3B', // 黄色
|
||||
牛: '#FF9800', // 橙色
|
||||
羊: '#9C27B0', // 紫色
|
||||
} as Record<string, string>,
|
||||
matrix: [] as string[], // 随机汉字矩阵
|
||||
selectedColor: '', // 当前选中颜色
|
||||
selectedChar: '', // 当前选中汉字
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
console.log('textPaint2 onLoad');
|
||||
this.generateMatrix();
|
||||
this.initCanvas();
|
||||
},
|
||||
|
||||
// 生成6列随机矩阵
|
||||
@@ -33,36 +34,59 @@ Page({
|
||||
|
||||
// 初始化A4画布（300DPI）
|
||||
initCanvas() {
|
||||
const dpi = 300;
|
||||
const width = 2480,
|
||||
height = 3508; // A4精确像素
|
||||
|
||||
wx.createSelectorQuery()
|
||||
.select('#canvas')
|
||||
.node()
|
||||
.select('#textCanvas')
|
||||
.fields({
|
||||
node: true,
|
||||
size: true,
|
||||
})
|
||||
.exec((res) => {
|
||||
const canvas = res[0].node;
|
||||
this.canvas = canvas;
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
this.canvas = canvas;
|
||||
this.ctx = ctx;
|
||||
|
||||
// 设置物理尺寸
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
|
||||
// 适配屏幕显示
|
||||
const ratio = wx.getWindowInfo().pixelRatio;
|
||||
canvas.style.width = `${width / ratio}px`;
|
||||
ctx.scale(ratio, ratio);
|
||||
|
||||
this.setCanvasSize(canvas, ctx);
|
||||
// ctx.fillRect(0, 0, 2480, 3508);
|
||||
this.drawGameBoard(ctx);
|
||||
});
|
||||
},
|
||||
|
||||
setCanvasSize(canvas: Canvas, ctx: RenderingContext) {
|
||||
const A4 = {
|
||||
width: 2480,
|
||||
height: 3508,
|
||||
};
|
||||
const { pixelRatio: dpr, windowWidth, windowHeight } = wx.getWindowInfo();
|
||||
// const printWidth = A4.width;
|
||||
// const printHeight = A4.height;
|
||||
// @ts-ignore
|
||||
const originWidth = canvas._width || windowWidth;
|
||||
// @ts-ignore
|
||||
const originHeight = canvas._height || windowHeight;
|
||||
|
||||
console.log('originWidth---:', originWidth);
|
||||
console.log('originHeight---:', originHeight);
|
||||
|
||||
canvas.width = A4.width;
|
||||
canvas.height = A4.height;
|
||||
console.log('canvas----:', canvas);
|
||||
|
||||
// 计算显示比例
|
||||
// const scaleRatio = Math.min(originWidth / printWidth, originHeight / printHeight);
|
||||
// console.log('scaleRatio---:', scaleRatio);
|
||||
// console.log('dpr---:', dpr);
|
||||
// 设置坐标系
|
||||
// ctx.scale(scaleRatio * dpr, scaleRatio * dpr);
|
||||
},
|
||||
|
||||
// 绘制完整游戏界面
|
||||
drawGameBoard(ctx?: RenderingContext) {
|
||||
const canvas = this.canvas as Canvas;
|
||||
ctx = ctx || (this.ctx as RenderingContext);
|
||||
ctx.clearRect(0, 0, 2480, 3508);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = '#333'; // 设置填充色为白色
|
||||
ctx.fillRect(0, 0, 2480, 3508); // 覆盖整个A4画布
|
||||
|
||||
// 绘制标题
|
||||
ctx.font = 'bold 80px "Microsoft Yahei"';
|
||||
@@ -78,11 +102,12 @@ Page({
|
||||
|
||||
// 绘制颜色示例
|
||||
drawColorLegend(ctx: RenderingContext, y: number) {
|
||||
console.log('this.data:', this.data);
|
||||
let x = 500;
|
||||
this.data.characters.forEach((char) => {
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, 50, 0, Math.PI * 2);
|
||||
ctx.fillStyle = this.data.colorMap.get(char) as string;
|
||||
ctx.fillStyle = this.data.colorMap[char] as string;
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = '#333';
|
||||
ctx.lineWidth = 4;
|
||||
@@ -95,8 +120,10 @@ Page({
|
||||
drawCharacterMatrix(ctx: RenderingContext, startY: number) {
|
||||
const cols = 6;
|
||||
const cellSize = 350; // 每个单元格大小
|
||||
const colorMap = this.data.colorMap;
|
||||
|
||||
this.data.matrix.forEach((char, index) => {
|
||||
this.data.matrix.forEach((char: string, index) => {
|
||||
char = char || '';
|
||||
const row = Math.floor(index / cols);
|
||||
const col = index % cols;
|
||||
|
||||
@@ -115,7 +142,7 @@ Page({
|
||||
|
||||
// 绘制汉字
|
||||
ctx.font = 'bold 100px "Microsoft Yahei"';
|
||||
ctx.fillStyle = this.data.colorMap.get(char) || '';
|
||||
ctx.fillStyle = (colorMap[char] as string) || '';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText(char, x, y);
|
||||
@@ -127,7 +154,7 @@ Page({
|
||||
const index = e.currentTarget.dataset.index;
|
||||
const selectedChar = this.data.characters[index];
|
||||
this.setData({
|
||||
selectedColor: this.data.colorMap.get(selectedChar),
|
||||
selectedColor: this.data.colorMap[selectedChar],
|
||||
selectedChar,
|
||||
});
|
||||
},
|
||||
@@ -137,7 +164,9 @@ Page({
|
||||
const index = e.currentTarget.dataset.index;
|
||||
if (!this.data.selectedColor) return;
|
||||
|
||||
const matrix = this.data.matrix.map((char, i) => (i === index ? this.data.selectedChar : char));
|
||||
const matrix = this.data.matrix.map((char, i) =>
|
||||
i === index ? this.data.selectedChar : char,
|
||||
);
|
||||
|
||||
this.setData({ matrix }, () => {
|
||||
this.drawGameBoard();
|
||||
@@ -146,12 +175,18 @@ Page({
|
||||
|
||||
// 导出A4图片
|
||||
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: '保存成功' }),
|
||||
|
||||
Reference in New Issue
Block a user