From e4e9f6d527ec5981135ad32f029f19c67d5347d8 Mon Sep 17 00:00:00 2001 From: zhangyi Date: Mon, 17 Mar 2025 17:50:44 +0800 Subject: [PATCH] feat: textPaint --- miniprogram/app.json | 5 +- miniprogram/demoPages/textPaint/textPaint.js | 54 +++++++++++++ .../demoPages/textPaint/textPaint.json | 7 ++ .../demoPages/textPaint/textPaint.wxml | 13 +++ .../demoPages/textPaint/textPaint.wxss | 34 ++++++++ miniprogram/pages/index/index.json | 10 ++- miniprogram/pages/index/index.less | 80 ++++++------------- miniprogram/pages/index/index.ts | 65 ++++++--------- miniprogram/pages/index/index.wxml | 12 ++- package.json | 2 +- project.config.json | 10 ++- 11 files changed, 185 insertions(+), 107 deletions(-) create mode 100644 miniprogram/demoPages/textPaint/textPaint.js create mode 100644 miniprogram/demoPages/textPaint/textPaint.json create mode 100644 miniprogram/demoPages/textPaint/textPaint.wxml create mode 100644 miniprogram/demoPages/textPaint/textPaint.wxss diff --git a/miniprogram/app.json b/miniprogram/app.json index 8a63a78..a05bcea 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -1,5 +1,5 @@ { - "pages": ["pages/index/index", "pages/logs/logs"], + "pages": ["pages/index/index", "pages/logs/logs", "demoPages/textPaint/textPaint"], "window": { "navigationBarTextStyle": "black", "navigationStyle": "custom" @@ -15,5 +15,6 @@ }, "componentFramework": "glass-easel", "sitemapLocation": "sitemap.json", - "lazyCodeLoading": "requiredComponents" + "lazyCodeLoading": "requiredComponents", + "enablePullDownRefresh": false } diff --git a/miniprogram/demoPages/textPaint/textPaint.js b/miniprogram/demoPages/textPaint/textPaint.js new file mode 100644 index 0000000..ddd7a59 --- /dev/null +++ b/miniprogram/demoPages/textPaint/textPaint.js @@ -0,0 +1,54 @@ +Page({ + data: { + showModal: false, + texts: ['', '', '', ''], + }, + + onReady: function () { + this.drawCircles(); + }, + + drawCircles: function () { + const ctx = wx.createCanvasContext('myCanvas'); + const { texts } = this.data; + + // 绘制4个圆圈 + for (let i = 0; i < 4; i++) { + const x = 50 + i * 100; + const y = 50; + ctx.beginPath(); + ctx.arc(x, y, 40, 0, 2 * Math.PI); + ctx.setFillStyle('white'); + ctx.fill(); + ctx.setStrokeStyle('black'); + ctx.stroke(); + + if (texts[i]) { + ctx.setFillStyle('black'); + ctx.setFontSize(20); + ctx.setTextAlign('center'); + ctx.setTextBaseline('middle'); + ctx.fillText(texts[i], x, y); + } + } + + ctx.draw(); + }, + + showInput: function () { + this.setData({ showModal: true }); + }, + + updateText: function (e) { + const index = e.currentTarget.dataset.index; + const value = e.detail.value; + const { texts } = this.data; + texts[index] = value; + this.setData({ texts }); + }, + + confirmInput: function () { + this.setData({ showModal: false }); + this.drawCircles(); + }, +}); diff --git a/miniprogram/demoPages/textPaint/textPaint.json b/miniprogram/demoPages/textPaint/textPaint.json new file mode 100644 index 0000000..24d9d2c --- /dev/null +++ b/miniprogram/demoPages/textPaint/textPaint.json @@ -0,0 +1,7 @@ +{ + "navigationBarTitleText": "文本绘制 示例", + "navigationBarBackgroundColor": "#d2e7d8", + "homeButton": true, + "backgroundColor": "#e8eddb", + "enablePullDownRefresh": false +} diff --git a/miniprogram/demoPages/textPaint/textPaint.wxml b/miniprogram/demoPages/textPaint/textPaint.wxml new file mode 100644 index 0000000..c1f49ae --- /dev/null +++ b/miniprogram/demoPages/textPaint/textPaint.wxml @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/demoPages/textPaint/textPaint.wxss b/miniprogram/demoPages/textPaint/textPaint.wxss new file mode 100644 index 0000000..d245ef4 --- /dev/null +++ b/miniprogram/demoPages/textPaint/textPaint.wxss @@ -0,0 +1,34 @@ +.container { + position: relative; +} + +canvas { + width: 100%; + height: 100vh; +} + +.input-button { + position: absolute; + bottom: 20px; + right: 20px; + z-index: 10; +} + +.modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; +} + +.modal-content { + background-color: white; + padding: 20px; + border-radius: 10px; + width: 80%; +} diff --git a/miniprogram/pages/index/index.json b/miniprogram/pages/index/index.json index aa3f1b0..76f0ed5 100644 --- a/miniprogram/pages/index/index.json +++ b/miniprogram/pages/index/index.json @@ -1,5 +1,7 @@ { - "usingComponents": { - "navigation-bar": "/components/navigation-bar/navigation-bar" - } -} \ No newline at end of file + "navigationBarTitleText": "首页", + "navigationBarBackgroundColor": "#d2e7d8", + "homeButton": true, + "backgroundColor": "#e8eddb", + "enablePullDownRefresh": false +} diff --git a/miniprogram/pages/index/index.less b/miniprogram/pages/index/index.less index f42417f..51c5884 100644 --- a/miniprogram/pages/index/index.less +++ b/miniprogram/pages/index/index.less @@ -1,61 +1,33 @@ /**index.less**/ page { - height: 100vh; - display: flex; - flex-direction: column; -} -.scrollarea { - flex: 1; - overflow-y: hidden; + height: 100vh; + display: flex; + flex-direction: column; } -.userinfo { - display: flex; - flex-direction: column; - align-items: center; - color: #aaa; - width: 80%; +.scroll-view { + flex: 1; + overflow-y: hidden; } -.userinfo-avatar { - overflow: hidden; - width: 128rpx; - height: 128rpx; - margin: 20rpx; - border-radius: 50%; -} +.card { + margin: 10px; + padding: 10px; + background-color: #fff; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + width: calc(33.33% - 20px); + /* Adjust width for three cards per row */ + box-sizing: border-box; + /* Ensure padding and margin are included in the width */ + display: inline-block; + /* Allow cards to sit next to each other */ + vertical-align: top; + /* Align cards to the top */ -.usermotto { - margin-top: 200px; -} -.avatar-wrapper { - padding: 0; - width: 56px !important; - border-radius: 8px; - margin-top: 40px; - margin-bottom: 40px; -} - -.avatar { - display: block; - width: 56px; - height: 56px; -} - -.nickname-wrapper { - display: flex; - width: 100%; - padding: 16px; - box-sizing: border-box; - border-top: .5px solid rgba(0, 0, 0, 0.1); - border-bottom: .5px solid rgba(0, 0, 0, 0.1); - color: black; -} - -.nickname-label { - width: 105px; -} - -.nickname-input { - flex: 1; -} + .card-title { + font-size: 18px; + font-weight: bold; + color: #333; + } +} \ No newline at end of file diff --git a/miniprogram/pages/index/index.ts b/miniprogram/pages/index/index.ts index d65fa81..aef5c37 100644 --- a/miniprogram/pages/index/index.ts +++ b/miniprogram/pages/index/index.ts @@ -1,43 +1,26 @@ -// index.ts -import callCloud from '../../base/callCloud'; - -// 获取应用实例 -Component({ - data: {}, - methods: { - test() { - console.log('1test'); - this.getOpenId(); - }, - async getOpenId() { - const res = await callCloud('getOpenId'); - console.log('res-----:', res); - - // const areaIds = await callCloud('createArea'); - // console.log('areaIds-----:', areaIds); - - // const stationIds = await callCloud('createStation'); - const reslut = await callCloud('createPDF'); - console.log('reslut-----:', reslut); - // wx.cloud - // .callFunction({ - // name: 'user', - // data: { - // type: 'getOpenId', - // }, - // }) - // .then((resp: Record) => { - // console.log('resp-----:', resp); - // this.setData({ - // haveGetOpenId: true, - // openId: resp.result.openid, - // }); - // wx.hideLoading(); - // }) - // .catch((error: any) => { - // console.log('error:', error); - // wx.hideLoading(); - // }); - }, +Page({ + data: { + cards: [ + { + key: 0, + title: '文本绘制', + url: '/demoPages/textPaint/textPaint', + }, + { + key: 1, + title: '文本绘制', + url: '/demoPages/textPaint/textPaint', + }, + { + key: 2, + title: '文本绘制', + url: '/demoPages/textPaint/textPaint', + }, + { + key: 3, + title: '文本绘制', + url: '/demoPages/textPaint/textPaint', + }, + ], }, }); diff --git a/miniprogram/pages/index/index.wxml b/miniprogram/pages/index/index.wxml index 30a9ab6..4e95537 100644 --- a/miniprogram/pages/index/index.wxml +++ b/miniprogram/pages/index/index.wxml @@ -1,5 +1,11 @@ - - - 测试点击 + + + {{card.title}} + diff --git a/package.json b/package.json index cce9b27..c95c730 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "eslint-config-prettier": "9.1.0", "eslint-plugin-prettier": "5.2.1", "globals": "^15.14.0", - "miniprogram-api-typings": "^4.0.2", + "miniprogram-api-typings": "^4.0.5", "prettier": "3.4.2", "typescript-eslint": "^8.18.1" } diff --git a/project.config.json b/project.config.json index 0bbbac7..761bd12 100644 --- a/project.config.json +++ b/project.config.json @@ -20,11 +20,17 @@ "minifyWXSS": true, "enhance": true, "showShadowRootInWxmlPanel": false, - "packNpmRelationList": [], + "packNpmRelationList": [ + { + "packageJsonPath": "./package.json", + "miniprogramNpmDistDir": "./miniprogram/" + } + ], "ignoreUploadUnusedFiles": true, "compileHotReLoad": false, "skylineRenderEnable": true, - "es6": true + "es6": true, + "packNpmManually": true }, "simulatorType": "wechat", "simulatorPluginLibVersion": {},