joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 文本绘制测试页面

Browse Source
This commit is contained in:
zhangyi
2025-03-19 17:51:43 +08:00
parent d6fbf1a6d3
commit adb2652272
12 changed files with 169 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/app.json
+7 -5
View File
@@ -1,9 +1,11 @@
{
"pages": ["pages/index/index", "pages/logs/logs", "demoPages/textPaint/textPaint"],
"window": {
"navigationBarTextStyle": "black",
"navigationStyle": "custom"
},
"pages": [
"pages/index/index",
"pages/logs/logs",
"demoPages/textPaint/textPaint",
"demoPages/textPaint2/textPaint"
],
"window": {},
"style": "v2",
"rendererOptions": {
"skyline": {
miniprogram/app.less
+9 -9
View File
@@ -1,10 +1,10 @@
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
// .container {
// height: 100%;
// display: flex;
// flex-direction: column;
// align-items: center;
// justify-content: space-between;
// padding: 200rpx 0;
// box-sizing: border-box;
// }
miniprogram/app.ts
-2
View File
@@ -22,7 +22,5 @@ App<IAppOption>({
// 发送 res.code 到后台换取 openId, sessionKey, unionId
},
});
const a = '123';
},
});
miniprogram/demoPages/textPaint2/textPaint.less
+34 -17
View File
@@ -1,20 +1,37 @@
.color-picker {
display: flex;
justify-content: center;
padding: 20rpx;
// .color-picker {
// display: flex;
// justify-content: center;
// padding: 20rpx;
// }
// .color-circle {
// width: 80rpx;
// height: 80rpx;
// border-radius: 50%;
// margin: 0 40rpx;
// border: 4rpx solid #333;
// }
// .action-btn {
// width: 60%;
// background: #4CAF50;
// color: white;
// margin: 40rpx auto;
// }
.container {
height: 100vh;
background-color: transparent;
// overflow-y: hidden;
}
.color-circle {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
margin: 0 40rpx;
border: 4rpx solid #333;
}
.action-btn {
width: 60%;
background: #4CAF50;
color: white;
margin: 40rpx auto;
.canvas-container {
margin: 20rpx;
width: calc(100% - 40rpx);
// width: 100%;
height: 86%;
// height: calc(100% - 80rpx);
border: 1rpx solid #333;
background-color: #fff;
box-sizing: border-box;
}
miniprogram/demoPages/textPaint2/textPaint.ts
+65 -30
View File
@@ -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: '保存成功' }),
miniprogram/demoPages/textPaint2/textPaint.wxml
+3 -3
View File
@@ -1,6 +1,6 @@
<view class="container">
<!-- 颜色选择区 -->
<view class="color-picker">
<!-- <view class="color-picker">
<block wx:for="{{characters}}" wx:key="index">
<view
class="color-circle"
@@ -8,10 +8,10 @@
bindtap="handleColorSelect"
data-index="{{index}}"></view>
</block>
</view>
</view> -->
<!-- 画布容器 -->
<canvas type="2d" id="canvas" style="width: 100%; height: 80vh" />
<canvas type="2d" id="textCanvas" class="canvas-container" />
<!-- 操作按钮 -->
<button class="action-btn" bindtap="exportToPrint">导出A4图片</button>
miniprogram/pages/index/index.ts
+8 -2
View File
@@ -8,8 +8,8 @@ Page({
},
{
key: 1,
title: '文本绘制',
url: '/demoPages/textPaint/textPaint',
title: '文本绘制2',
url: '/demoPages/textPaint2/textPaint',
},
{
key: 2,
@@ -23,4 +23,10 @@ Page({
},
],
},
tapCard(e: WechatMiniprogram.TouchEvent) {
const { url } = e.currentTarget.dataset;
console.log('navigateTo url:', url);
wx.navigateTo({ url });
},
});
miniprogram/pages/index/index.wxml
+3 -2
View File
@@ -2,9 +2,10 @@
<scroll-view class="scroll-view" scroll-y type="list">
<view
class="card"
x:for="{{cards}}"
wx:for="{{cards}}"
wx:for-item="card"
bindtap="tabCard"
wx:key="*this"
bindtap="tapCard"
data-url="{{card.url}}">
<view class="card-title">{{card.title}}</view>
</view>