feat: textPaint
This commit is contained in:
zhangyi
@@ -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
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"navigationBarTitleText": "文本绘制 示例",
|
||||
"navigationBarBackgroundColor": "#d2e7d8",
|
||||
"homeButton": true,
|
||||
"backgroundColor": "#e8eddb",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
<view class="container">
|
||||
<canvas canvas-id="myCanvas" style="width: 100%; height: 100vh;"></canvas>
|
||||
<button class="input-button" bindtap="showInput">输入文本</button>
|
||||
<view wx:if="{{showModal}}" class="modal">
|
||||
<view class="modal-content">
|
||||
<input placeholder="输入第一个文本" bindinput="updateText" data-index="0" />
|
||||
<input placeholder="输入第二个文本" bindinput="updateText" data-index="1" />
|
||||
<input placeholder="输入第三个文本" bindinput="updateText" data-index="2" />
|
||||
<input placeholder="输入第四个文本" bindinput="updateText" data-index="3" />
|
||||
<button bindtap="confirmInput">确认</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -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%;
|
||||
}
|
||||
@@ -1,5 +1,7 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
"navigationBarTitleText": "首页",
|
||||
"navigationBarBackgroundColor": "#d2e7d8",
|
||||
"homeButton": true,
|
||||
"backgroundColor": "#e8eddb",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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<string, any>) => {
|
||||
// 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',
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
<!--index.wxml-->
|
||||
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
|
||||
<scroll-view class="scrollarea" scroll-y type="list">
|
||||
<view bind:tap="test">测试点击</view>
|
||||
<scroll-view class="scroll-view" scroll-y type="list">
|
||||
<view
|
||||
class="card"
|
||||
x:for="{{cards}}"
|
||||
wx:for-item="card"
|
||||
bindtap="tabCard"
|
||||
data-url="{{card.url}}">
|
||||
<view class="card-title">{{card.title}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
+1
-1
@@ -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"
|
||||
}
|
||||
|
||||
+8
-2
@@ -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": {},
|
||||
|
||||
Reference in New Issue
Block a user