diff --git a/.prettierrc b/.prettierrc index 8e37103..9b95825 100644 --- a/.prettierrc +++ b/.prettierrc @@ -2,5 +2,21 @@ "singleQuote": true, "trailingComma": "all", "tabWidth": 4, - "printWidth": 200 + "printWidth": 100, + "formatOnSave": true, + "bracketSameLine": true, + "overrides": [ + { + "files": "*.wxml", + "options": { "parser": "html" } + }, + { + "files": "*.wxss", + "options": { "parser": "css" } + }, + { + "files": "*.wxs", + "options": { "parser": "babel" } + } + ] } diff --git a/miniprogram/app.json b/miniprogram/app.json index a05bcea..28953aa 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -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": { diff --git a/miniprogram/app.less b/miniprogram/app.less index 06c6fc9..101d83c 100644 --- a/miniprogram/app.less +++ b/miniprogram/app.less @@ -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; +// } \ No newline at end of file diff --git a/miniprogram/app.ts b/miniprogram/app.ts index 754e303..6ad7d19 100644 --- a/miniprogram/app.ts +++ b/miniprogram/app.ts @@ -22,7 +22,5 @@ App({ // 发送 res.code 到后台换取 openId, sessionKey, unionId }, }); - - const a = '123'; }, }); diff --git a/miniprogram/demoPages/textPaint2/textPaint.less b/miniprogram/demoPages/textPaint2/textPaint.less index dac798f..93bc016 100644 --- a/miniprogram/demoPages/textPaint2/textPaint.less +++ b/miniprogram/demoPages/textPaint2/textPaint.less @@ -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; } \ No newline at end of file diff --git a/miniprogram/demoPages/textPaint2/textPaint.ts b/miniprogram/demoPages/textPaint2/textPaint.ts index 6b6f4c8..880a2ca 100644 --- a/miniprogram/demoPages/textPaint2/textPaint.ts +++ b/miniprogram/demoPages/textPaint2/textPaint.ts @@ -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, 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: '保存成功' }), diff --git a/miniprogram/demoPages/textPaint2/textPaint.wxml b/miniprogram/demoPages/textPaint2/textPaint.wxml index ed8f887..df1598a 100644 --- a/miniprogram/demoPages/textPaint2/textPaint.wxml +++ b/miniprogram/demoPages/textPaint2/textPaint.wxml @@ -1,6 +1,6 @@ - + - + diff --git a/miniprogram/pages/index/index.ts b/miniprogram/pages/index/index.ts index aef5c37..74d58be 100644 --- a/miniprogram/pages/index/index.ts +++ b/miniprogram/pages/index/index.ts @@ -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 }); + }, }); diff --git a/miniprogram/pages/index/index.wxml b/miniprogram/pages/index/index.wxml index 4e95537..af88b65 100644 --- a/miniprogram/pages/index/index.wxml +++ b/miniprogram/pages/index/index.wxml @@ -2,9 +2,10 @@ {{card.title}} diff --git a/project.config.json b/project.config.json index 761bd12..4f4b886 100644 --- a/project.config.json +++ b/project.config.json @@ -18,7 +18,7 @@ "postcss": false, "minified": true, "minifyWXSS": true, - "enhance": true, + "enhance": false, "showShadowRootInWxmlPanel": false, "packNpmRelationList": [ { @@ -29,7 +29,7 @@ "ignoreUploadUnusedFiles": true, "compileHotReLoad": false, "skylineRenderEnable": true, - "es6": true, + "es6": false, "packNpmManually": true }, "simulatorType": "wechat", diff --git a/project.private.config.json b/project.private.config.json index 9004480..189d573 100644 --- a/project.private.config.json +++ b/project.private.config.json @@ -4,5 +4,23 @@ "setting": { "compileHotReLoad": true }, - "libVersion": "2.32.3" + "libVersion": "3.7.10", + "condition": { + "miniprogram": { + "list": [ + { + "name": "textPaint2", + "pathName": "demoPages/textPaint2/textPaint", + "query": "", + "launchMode": "default", + "scene": null + }, + { + "name": "db guide", + "pathName": "pages/databaseGuide/databaseGuide", + "query": "" + } + ] + } + } } \ No newline at end of file diff --git a/typings/global.d.ts b/typings/global.d.ts index 4f91b2b..31d2d43 100644 --- a/typings/global.d.ts +++ b/typings/global.d.ts @@ -1,3 +1,4 @@ // 全局声明 type Canvas = WechatMiniprogram.Canvas; -type RenderingContext = WechatMiniprogram.CanvasRenderingContext; +type RenderingContext = WechatMiniprogram.CanvasRenderingContext2D; +type TouchEvent = WechatMiniprogram.TouchEvent;