devbox
秋刀鱼在做梦
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序 画图 canvas 进阶版_wxs canvas

作者：秋刀鱼在做梦 | 2024-08-09 20:42:01

赞

踩

wxs canvas

微信小程序 canvas 页面布局效果

 实现功能：

1、落笔的时候开始计时

2、色卡：点击色卡，选择画笔的颜色

3、文本：文本可以选择格式

4、画笔：画笔粗细和透明度选择

5、把画布生成图片，并上传到服务器

借助mini-color-picker组件实现色卡的选择

  1. <view class="page_view" style="margin-top:{{navBarHeight*2+0}}rpx;">
  2.   <canvas canvas-id="myCanvas" class="canvasBox _box-shadow" bindtouchstart="start" bindtouchmove="move"></canvas>
  3.   <view class="bottomBox" bindtap="closeDialog">
  4.     <view class="brushDialog" hidden="{{brushDialogHidden}}" catchtap="preventevents">
  5.       <view class="brushWidthBox">
  6.         <image bindtap="checkBrush" data-value="{{item.value}}" wx:for="{{brushList}}" wx:key="index" src="../../images/img/{{item.url}}" mode="heightFix"/>
  7.       </view>
  8.       <view class="sliderBg" style="margin: 20rpx 30rpx;">
  9.         <view class="setBgOpacity" style="background-image: linear-gradient(to right, {{tools.setOpacticy(strokeStyle, 0)}}, {{tools.setOpacticy(strokeStyle, 1)}});"></view>
  10.         <slider value="{{globalAlpha}}" class="globalAlphaBox" bindchanging="sliderchange" bindchange="sliderchange" min="0" max="1" step="0.01" block-size="20" activeColor="rgba(255,255,255,0)" backgroundColor="rgba(255,255,255,0)"/>
  11.       </view>
  12.     </view>
  13.     <view class="canvasToll _box-shadow">
  14.       <image src="../../images/img/colorSwatches.png" mode="heightFix" bindtap="openColorDialog" />
  15.       <image src="../../images/img/text.png" mode="heightFix" bindtap="chengeText" />
  16.       <!-- <image src="../../images/img/bucket.png" mode="heightFix"/> -->
  17.       <image src="../../images/img/brush.png" mode="heightFix" catchtap="openBrushDialog"/>
  18.     </view>
  19.     <view class="btnBox">
  20.       <button hidden="{{!hiddenFormat}}" class="btn" bindtap="submit">确定完成</button>
  21.     </view>
  22.   </view>
  23.   <input focus="{{focus}}" value="{{inputValue}}" type="text" class="textInput" bindinput="bindKeyInput" bindconfirm="confirmInput" hidden="{{hiddenFormat}}" />
  24. </view>
  25.  
  26. <view class="countdownBox" style="top:{{navBarHeight*2+100}}rpx;">
  27.   <image src="/images/img/alarmClock.png" mode="heightFix"/>{{timerValue.text}}
  28. </view>
  29.  
  30. <view class="textFormat" hidden="{{hiddenFormat}}" bindtap="openFormat">格式</view>
  31.  
  32. <view class="maskBackground" wx:if="{{showDialog}}" bindtap="hideMask">
  33.   <view class="pickerBox" catchtap="preventevents" style="background-color: {{showDialog == 2 ? '#fff' : '#F4F6F4'}};">
  34.     <view class="maskTitle">
  35.       <view class="">{{showDialog == 2 ? '格式' : '颜色'}}</view>
  36.       <image src="../../images/img/guan.png" mode="widthFix" class="guanImg" bindtap="hideMask" />
  37.     </view>
  38.     <view wx:if="{{showDialog == 2}}" class="formatContent">
  39.       <view wx:for="{{formatList}}" wx:key="index" bindtap="changeFormat" data-value="{{item}}">{{item}}</view>
  40.     </view>
  41.     <view wx:if="{{showDialog == 1}}" class="colorContent">
  42.       <color-picker bindchangeColor="pickColor" initColor="{{strokeStyle}}" />
  43.       <view class="opticyLabel">不透明度</view>
  44.       <view class="sliderBox">
  45.         <view class="sliderBg">
  46.             <view class="setBgOpacity" style="background-image: linear-gradient(to right, {{tools.setOpacticy(strokeStyle, 0)}}, {{tools.setOpacticy(strokeStyle, 1)}});"></view>
  47.             <slider value="{{globalAlpha}}" class="globalAlphaBoxInColor" bindchanging="sliderchange" bindchange="sliderchange" min="0" max="1" step="0.01" block-size="28" activeColor="rgba(255,255,255,0)" backgroundColor="rgba(255,255,255,0)" />
  48.         </view>
  49.         <view class="slideValue _box-shadow">{{tools.integer(globalAlpha * 100)}}%</view>
  50.       </view>
  51.       <view class="colorBottomBox">
  52.         <view class="activeColorBox" style="background-color: {{strokeStyle}};opacity: {{globalAlpha}};"></view>
  53.         <view class="activeColorArr">
  54.           <view wx:for="{{activeColorList}}" wx:key="index" class="activeColor _box-shadow" style="background-color: {{item}}; margin-top: {{index > 4 ? '32rpx' : 0}}" bindtap="checkCorlor" data-color="{{item}}"></view>
  55.           <image bindtap="addColor" class="activeColor" src="../../images/img/increase.png" mode="widthFix" style="margin-top: {{activeColorList.length > 4 ? '32rpx' : 0}}"/>
  56.         </view>
  57.       </view>
  58.     </view>
  59.   </view>
  60. </view>
  61.  
  62. <wxs src = "../../utils/tools.wxs" module="tools"></wxs>
  1. /* treatmentPages/drawingCanvas/drawingCanvas.wxss */
  2. .viewPadd {
  3.   background-color: #fff;
  4.   padding: 0 30rpx;
  5.   border-radius: 14rpx;
  6.   margin-top: 46rpx;
  7.   box-shadow: 0 0 4rpx 6rpx #ededed;
  8. }
  9. .viewHeader {
  10.   height: 94rpx;
  11.   line-height: 94rpx;
  12.   border-bottom: 1rpx solid #DCDCDC;
  13.   position: relative;
  14.   font-size: 32rpx;
  15.   font-weight: bold;
  16.   color: #53545F;
  17.   padding-left: 48rpx;
  18. }
  19. .viewHeader::before {
  20.   content: '';
  21.   position: absolute;
  22.   top: 50%;
  23.   left: 15rpx;
  24.   transform: translateY(-50%);
  25.   background-color: #007AFF;
  26.   width: 10rpx;
  27.   height: 30rpx;
  28.   border-radius: 5rpx;
  29.   border: none;
  30.   display: block;
  31. }
  32. .viewContent {
  33.   padding: 44rpx 20rpx 100rpx;
  34.   color: #666666;
  35.   font-size: 30rpx;
  36.   line-height: 48rpx;
  37. }
  38. .btnBox {
  39.   height: 80rpx;
  40. }
  41. .btn {
  42.   background-color: #007AFF;
  43.   border-radius: 14rpx;
  44.   color: #fff;
  45.   font-size: 32rpx;
  46.   border: none;
  47. }
  48. .canvasBox {
  49.   width: 100%;
  50.   height: calc(100vh - 520rpx);
  51.   background-color: #fff;
  52.   border-radius: 14rpx;
  53. }
  54. .canvasToll {
  55.   width: 100%;
  56.   background-color: #fff;
  57.   height: 124rpx;
  58.   border-radius: 14rpx;
  59.   margin: 46rpx 0;
  60.   display: flex;
  61.   justify-content: space-around;
  62.   align-items: center;
  63. }
  64. .canvasToll image {
  65.   height: 52rpx;
  66. }
  67. .bottomBox {
  68.   position: fixed;
  69.   bottom: 50rpx;
  70.   left: 30rpx;
  71.   right: 30rpx;
  72.   z-index: 2;
  73. }
  74. .countdownBox {
  75.   background-color: #fff;
  76.   position: fixed;
  77.   right: 0;
  78.   top: 400rpx;
  79.   border-radius: 30rpx 0 0 30rpx;
  80.   display: flex;
  81.   justify-content: center;
  82.   align-items: center;
  83.   width: 176rpx;
  84.   height: 60rpx;
  85.   color: #666666;
  86.   font-size: 24rpx;
  87.   box-shadow: -2rpx 0 16rpx 10rpx rgba(144, 138, 131, 0.35);
  88. }
  89. .countdownBox image {
  90.   height: 35rpx;
  91.   margin-right: 14rpx;
  92. }
  93. .textInput {
  94.   position: fixed;
  95.   bottom: 50rpx;
  96.   left: 30rpx;
  97.   right: 30rpx;
  98.   height: 80rpx;
  99.   z-index: 10;
  100.   /* border: none; */
  101. }
  102. .textFormat {
  103.   background-color: #fff;
  104.   position: fixed;
  105.   bottom: 200rpx;
  106.   left: 0;
  107.   border-radius: 0 30rpx 30rpx 0;
  108.   display: flex;
  109.   justify-content: center;
  110.   align-items: center;
  111.   width: 100rpx;
  112.   height: 60rpx;
  113.   color: #666666;
  114.   font-size: 24rpx;
  115.   box-shadow: -2rpx 0 16rpx 10rpx rgba(144, 138, 131, 0.35);
  116.   z-index: 3;
  117. }
  118. .maskBackground {
  119.   background-color: rgba(144, 138, 131, 0.1);
  120. }
  121. .pickerBox {
  122.   position: absolute;
  123.   width: 100%;
  124.   bottom: 0;
  125.   left: 0;
  126.   box-sizing: border-box;
  127.   z-index: 9;
  128.   border-radius: 34rpx 34rpx 0 0;
  129.   overflow: hidden;
  130.   box-shadow: 0rpx 0rpx 4rpx 10rpx #14010128;
  131.   max-height: 80%;
  132.   overflow-y: auto;
  133. }
  134. .maskTitle {
  135.   line-height: 120rpx;
  136.   font-weight: bold;
  137.   font-size: 40rpx;
  138.   padding: 0 30rpx;
  139.   display: flex;
  140.   align-items: center;
  141.   justify-content: space-between;
  142.   color: #000000;
  143. }
  144. .guanImg {
  145.   width: 51rpx;
  146. }
  147. .formatContent {
  148.   display: flex;
  149.   align-items: center;
  150.   justify-content: space-between;
  151.   margin: 50rpx 30rpx 100rpx;
  152. }
  153. .formatContent view {
  154.   width: 168rpx;
  155.   height: 114rpx;
  156.   line-height: 114rpx;
  157.   text-align: center;
  158.   background-color: #F1F1F6;
  159.   font-weight: bold;
  160. }
  161. .formatContent view:nth-child(1) {
  162.   border-radius: 20rpx 0 0 20rpx;
  163. }
  164. .formatContent view:nth-child(3) {
  165.   text-decoration: underline;
  166. }
  167. .formatContent view:nth-child(4) {
  168.   border-radius: 0 20rpx 20rpx 0;
  169.   text-decoration: line-through;
  170. }
  171. .brushDialog {
  172.   background-color: #fff;
  173.   width: 442rpx;
  174.   border-radius: 20rpx;
  175.   position: absolute;
  176.   right: -10rpx;
  177.   top: -180rpx;
  178.   box-shadow: 2rpx 4rpx 8rpx 6rpx rgba(122, 122, 122, 0.40);
  179.   z-index: 3;
  180. }
  181. .brushWidthBox {
  182.   display: flex;
  183.   justify-content: space-around;
  184.   padding: 28rpx 0;
  185.   border-bottom: 1rpx solid #C6C6C7;
  186. }
  187. .brushWidthBox image {
  188.   height: 46rpx;
  189. }
  190. .globalAlphaBox {
  191.   width: 100%;
  192.   margin: 0;
  193. }
  194. .brushDialog::after {
  195.   content: "";
  196.   position: absolute;
  197.   bottom: -0rpx;
  198.   right: 85rpx;
  199.   width: 60rpx;
  200.   height: 30rpx;
  201.   background-color: #fff;
  202. } 
  203. .brushDialog::before {
  204.   content: "";
  205.   position: absolute;
  206.   bottom: -20rpx;
  207.   right: 96rpx;
  208.   box-shadow: 2rpx 4rpx 8rpx 6rpx rgba(122, 122, 122, 0.40);
  209.   border-radius: 6rpx;
  210.   width: 40rpx;
  211.   height: 40rpx;
  212.   background: #fff;
  213.   transform: rotate(45deg);
  214. }
  215.  
  216. .globalAlphaBox .wx-slider-handle-wrapper {
  217.   height: 40rpx;
  218.   border-radius: 40rpx !important;
  219. }
  220. .globalAlphaBoxInColor {
  221.   width: 510rpx;
  222.   margin: 0;
  223. }
  224. .globalAlphaBoxInColor .wx-slider-handle-wrapper {
  225.   height: 70rpx;
  226.   border-radius: 70rpx !important;
  227. }
  228. .sliderBg {
  229.     margin: 20rpx 0rpx;
  230.     position: relative;
  231. }
  232. .setBgOpacity {
  233.     position: absolute;
  234.     top: 20rpx;
  235.     left: 0;
  236.     bottom: 20rpx;
  237.     width: 100%;
  238.     border-radius: 40rpx;
  239. }
  240. .sliderBox {
  241.   display: flex;
  242.   align-items: center;
  243.   justify-content: space-between;
  244.   padding: 0 30rpx;
  245.   box-sizing: border-box;
  246. }
  247. .opticyLabel {
  248.   padding: 70rpx 30rpx 0;
  249.   color: #666666;
  250.   font-size: 24rpx;
  251. }
  252. .slideValue {
  253.   width: 144rpx;
  254.   height: 70rpx;
  255.   line-height: 70rpx;
  256.   text-align: center;
  257.   background-color: #fff;
  258.   border-radius: 13rpx;
  259.   color: #666666;
  260.   font-size: 32rpx;
  261. }
  262. .colorBottomBox {
  263.   margin: 20rpx 30rpx 80rpx;
  264.   padding: 46rpx 30rpx 46rpx 0;
  265.   border-top: 1rpx solid #C6C6C7;
  266.   display: flex;
  267.   justify-content: space-between;
  268. }
  269. .activeColorBox {
  270.   width: 146rpx;
  271.   height: 146rpx;
  272.   border-radius: 16rpx;
  273. }
  274. .activeColorArr {
  275.   width: 470rpx;
  276.   height: 146rpx;
  277.   display: flex;
  278.   flex-wrap: wrap;
  279. }
  280. .activeColor {
  281.   width: 60rpx;
  282.   height: 60rpx;
  283.   border-radius: 50%;
  284.   margin-left: 34rpx;
  285. }
  286. .colorContent {
  287.     height: calc(100% - 120rpx);
  288.     overflow-y: scroll;
  289. }
  1. {
  2.   "usingComponents": {
  3.     "color-picker":"../components/mini-color-picker/color-picker" 
  4.   }
  5. }
  1. var app = getApp()
  2. Page({
  3.  
  4.   /**
  5.    * 页面的初始数据
  6.    */
  7.   data: {
  8.     navBarHeight: app.globalData.navBarHeight,
  9.     navBarObj: {
  10.       bgColor: '#fff',
  11.       showBackBtn: true,
  12.       showHomeBtn: true,
  13.       title: '心理绘画'
  14.     },
  15.     appraisalPlanid: null,  //患者疗愈计划id
  16.     id: null,    //疗愈具体数据的id
  17.     x: 0,  //开始的位置
  18.     y: 0,
  19.     newx: 0,   //移动的位置
  20.     newy: 0,
  21.     timerValue: {
  22.       text: '00:00:00',   //显示的时间
  23.       seconds: 0     //秒数
  24.     },
  25.     timer: null,   //计时器
  26.     canvasType: 1,   // 1 线  2 文本
  27.     inputValue: '',   //文本内容
  28.     hiddenFormat: true,
  29.     focus: false,
  30.     showDialog: false,   //底部的弹窗  1 颜色  2  文本格式
  31.     formatList: ['B', '/', 'U', 'S'],
  32.     textFormat: null, //选中的文本格式
  33.     brushList: [
  34.       {url: 'brushLine1.png', value: 1},
  35.       {url: 'brushLine2.png', value: 5},
  36.       {url: 'brushLine3.png', value: 10},
  37.       {url: 'brushLine4.png', value: 15},
  38.       {url: 'brushLine5.png', value: 20}
  39.     ],
  40.     lineWidth: 1,   //线的宽度
  41.     globalAlpha: '1',   //笔的透明度   范围 0-1
  42.     brushDialogHidden: true,
  43.     activeColorList: [],
  44.     strokeStyle: 'rgb(0,0,0)',//线的颜色 初始值
  45.     pick: true
  46.   },
  47.  
  48.   /**
  49.    * 生命周期函数--监听页面加载
  50.    */
  51.   onLoad(options) {
  52.     this.setData({
  53.       appraisalPlanid: options.appraisalplanid,
  54.       id: options.id
  55.     })
  56.     this._canvasInit();
  57.     this.getDrawingColor()
  58.   },
  59.   getDrawingColor() {
  60.     wx.request({
  61.       url: app.globalData.serverAddress + '/hcHealRemind/getUserDrawingColor',
  62.       method: 'GET',
  63.       data: {
  64.         userId: app.globalData.userid
  65.       },
  66.       success: (res) => {
  67.         if(res.data.code !== 0) {
  68.           return wx.showToast({
  69.             title: res.data.msg || '获取用户画板颜色数据失败',
  70.             icon: 'none'
  71.           })
  72.         }
  73.         this.setData({
  74.           activeColorList: res.data.data
  75.         })
  76.       }
  77.     })
  78.   },
  79.  
  80.   _starTimer() {
  81.     let that = this;
  82.     if(that.data.timer) return
  83.     let setSeconds = `timerValue.seconds`
  84.     let textTime = `timerValue.text`
  85.     that.data.timer = setInterval(() => {
  86.       let seconds = that.data.timerValue.seconds + 1;
  87.       that.setData({
  88.         [setSeconds]: seconds,
  89.         [textTime]: that._getTimeBySecond(seconds)
  90.       })
  91.     }, 1000);
  92.   },
  93.   _endTimer() {
  94.     const that = this;
  95.     if(that.data.timer) {
  96.       clearInterval(that.data.timer)
  97.     }
  98.   },
  99.   // 秒转时间
  100.   _getTimeBySecond(seconds) {
  101.     let hour = Math.floor(seconds / 3600);
  102.     let minute = Math.floor(seconds % 3600 / 60);
  103.     let second = seconds % 3600 % 60
  104.     hour < 10 ? hour = '0' + hour : '';
  105.     minute < 10 ? minute = '0' + minute : '';
  106.     second < 10 ? second = '0' + second : '';
  107.     return hour + ":" + minute + ":" + second
  108.   },
  109.   _canvasInit() {
  110.     var ctx = wx.createCanvasContext('myCanvas');
  111.     ctx.setFontSize(16)   //设置字体的字号
  112.     this.ctx = ctx
  113.   },
  114.   //触摸开始
  115.   start(e) {
  116.     this._starTimer(10);
  117.     let startx = e.changedTouches[0].x;
  118.     let starty = e.changedTouches[0].y;
  119.     this.setData({
  120.       x: startx,
  121.       y: starty
  122.     })
  123.     this.hideBrushDialog();
  124.     if(this.data.canvasType == 2) {  //文本
  125.       this.setData({
  126.         hiddenFormat: false,
  127.         focus: true
  128.       })
  129.     }
  130.   },
  131.   //触摸移动
  132.   move(e) {
  133.     if(this.data.canvasType == 2) {  //文本
  134.       return
  135.     }
  136.     let movex = e.changedTouches[0].x;
  137.     let movey = e.changedTouches[0].y;
  138.     this.setData({
  139.       newx: movex,
  140.       newy: movey
  141.     })
  142.     this._drawingLine(this.data.x, this.data.y, this.data.newx, this.data.newy)
  143.     this.setData({
  144.       x: movex,
  145.       y: movey
  146.     })
  147.   },
  148.   // 画线方法
  149.   _drawingLine(startx, starty, movex, movey) {
  150.     // 设置线
  151.     if(this.data.canvasType == 2) { //文本里面的线
  152.       this.ctx.setLineWidth(1)
  153.       this.ctx.strokeStyle = "rgb(0,0,0)"
  154.       this.ctx.setGlobalAlpha(1)
  155.     } else {
  156.       this.ctx.setLineWidth(this.data.lineWidth)
  157.       this.ctx.strokeStyle = this.data.strokeStyle
  158.       this.ctx.setGlobalAlpha(this.data.globalAlpha)
  159.     }
  160.     this.ctx.beginPath()   //开始定义路径
  161.     this.ctx.moveTo(startx, starty)   //起始点
  162.     this.ctx.lineTo(movex, movey)     //连接到的坐标点
  163.     this.ctx.stroke()     //沿着绘制的坐标点路径绘制直线
  164.     this.ctx.draw(true)    //将之前在绘图上下文中画到 canvas 中
  165.   },
  166.   //绘制文本
  167.   _drawingText() {
  168.     let textFormat = this.data.textFormat;
  169.     this.ctx.font = "normal 16px Arial"
  170.     if(textFormat == 'B') {
  171.       this.ctx.font = "bold 16px Arial"    //加粗
  172.     } else if(textFormat == '/') {
  173.       this.ctx.font = "italic 16px Arial"  //倾斜
  174.     } else if(textFormat == 'U') {   //下划线
  175.       let textWidth = this.ctx.measureText(this.data.inputValue).width;
  176.       this._drawingLine(this.data.x, this.data.y + 5, this.data.x + textWidth, this.data.y + 5)
  177.     } else if(textFormat == 'S') {  //删除线
  178.       let textWidth = this.ctx.measureText(this.data.inputValue).width;
  179.       this._drawingLine(this.data.x, this.data.y - 5, this.data.x + textWidth, this.data.y - 5)
  180.     }
  181.     // this.ctx.setFillStyle('blue')   //设置填充色
  182.     this.ctx.fillText(this.data.inputValue, this.data.x, this.data.y)   //在画布上输出的文本   内容  x   y
  183.     this.ctx.draw(true)
  184.   },
  185.   //点击文本
  186.   chengeText() {
  187.     this.setData({
  188.       canvasType: 2,
  189.       textFormat: null
  190.     })
  191.   },
  192.   //输入框
  193.   bindKeyInput(e) {
  194.     this.setData({
  195.       inputValue: e.detail.value
  196.     })
  197.   },
  198.   //输入框点击完成按钮
  199.   confirmInput(e) {
  200.     this._drawingText()
  201.     this.setData({
  202.       canvasType: 1,
  203.       hiddenFormat: true,
  204.       focus: false,
  205.       inputValue: ''
  206.     })
  207.   },
  208.   //点击格式
  209.   openFormat() {
  210.     this.setData({
  211.       showDialog: 2
  212.     })
  213.   },
  214.   //选中绘本文字的格式
  215.   changeFormat(e) {
  216.     this.setData({
  217.       textFormat: e.currentTarget.dataset.value
  218.     })
  219.     this.hideMask()
  220.   },
  221.   preventevents() {},
  222.   hideMask() {
  223.     if(this.data.showDialog == 1) {
  224.         this.addColor()
  225.     }
  226.     this.setData({
  227.       showDialog: false
  228.     })
  229.     if(this.data.canvasType == 2) {
  230.       this.setData({
  231.         focus: true
  232.       })
  233.     }
  234.   },
  235.   //打开画笔弹窗
  236.   openBrushDialog() {
  237.     this.setData({
  238.       brushDialogHidden: !this.data.brushDialogHidden,
  239.       hiddenFormat: true
  240.     })
  241.   },
  242.   //关闭画笔的弹窗
  243.   hideBrushDialog() {
  244.     if(!this.data.brushDialogHidden) {
  245.       this.setData({
  246.         brushDialogHidden: true
  247.       })
  248.     }
  249.   },
  250.   //点击底部区域
  251.   closeDialog() {
  252.     this.hideBrushDialog();
  253.     this.setData({
  254.       hiddenFormat: true
  255.     })
  256.   },
  257.   //选择画笔
  258.   checkBrush(e) {
  259.     this.setData({
  260.       lineWidth: e.currentTarget.dataset.value
  261.     })
  262.   },
  263.   // 画笔透明度
  264.   sliderchange(e) {
  265.     this.setData({
  266.       globalAlpha: e.detail.value
  267.     })
  268.   },
  269.   //打开颜色对话框
  270.   openColorDialog() {
  271.     this.setData({
  272.       showDialog: 1
  273.     })
  274.   },
  275.    //取色结果回调
  276.    pickColor(e) {
  277.     let rgb = e.detail.color;
  278.     this.setData({
  279.       strokeStyle: rgb
  280.     })
  281.   },
  282.   checkCorlor(e) {
  283.     this.setData({
  284.       strokeStyle: e.currentTarget.dataset.color,
  285.       showDialog: false
  286.     })
  287.   },
  288. // 保存用户画板颜色
  289. addColor() {
  290.     wx.request({
  291.         url: app.globalData.serverAddress + '/hcHealRemind/insertUserDrawingColor',
  292.         method: 'POST',
  293.         data: {
  294.           userId: app.globalData.userid,
  295.           drawingColor: this.data.strokeStyle
  296.         },
  297.         success: (res) => {
  298.           if(res.data.code !== 0) {
  299.             return wx.showToast({
  300.               title: res.data.msg || '保存用户画板颜色失败',
  301.               icon: 'none'
  302.             })
  303.           }
  304.           this.setData({
  305.             activeColorList: res.data.data
  306.           })
  307.         }
  308.     })
  309.   },
  310.   submit() {
  311.     let that = this;
  312.     that._endTimer();
  313.     wx.showLoading({
  314.       title: '图片生成中...',
  315.     })
  316.     wx.canvasToTempFilePath({
  317.       x: 0,
  318.       y: 0,
  319.       canvasId: 'myCanvas',
  320.       success(res) {
  321.         wx.uploadFile({
  322.           url: app.globalData.serverAddress + '/hcHealRemind/finishPsychologyDrawing',
  323.           filePath: res.tempFilePath,
  324.           name: 'file',
  325.           formData: {
  326.             appraisalPlanid: that.data.appraisalPlanid,
  327.             remindId: that.data.id,
  328.             workingHours: that.data.timerValue.seconds
  329.           },
  330.           success (res){
  331.             wx.switchTab({
  332.               url: '/pages/healing/index',
  333.             })
  334.           },
  335.           complete() {
  336.             wx.hideLoading()
  337.           }
  338.         })
  339.       }
  340.     })
  341.   },
  342.   /**
  343.    * 生命周期函数--监听页面初次渲染完成
  344.    */
  345.   onReady() {
  346.     
  347.   },
  348.  
  349.   /**
  350.    * 生命周期函数--监听页面显示
  351.    */
  352.   onShow() {
  353.    
  354.   },
  355.  
  356.   /**
  357.    * 生命周期函数--监听页面隐藏
  358.    */
  359.   onHide() {
  360.  
  361.   },
  362.  
  363.   /**
  364.    * 生命周期函数--监听页面卸载
  365.    */
  366.   onUnload() {
  367.     this._endTimer();
  368.   },
  369.  
  370.   /**
  371.    * 页面相关事件处理函数--监听用户下拉动作
  372.    */
  373.   onPullDownRefresh() {
  374.  
  375.   },
  376.  
  377.   /**
  378.    * 页面上拉触底事件的处理函数
  379.    */
  380.   onReachBottom() {
  381.  
  382.   },
  383.  
  384.   /**
  385.    * 用户点击右上角分享
  386.    */
  387.   onShareAppMessage() {
  388.  
  389.   }
  390. })

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/955089
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号