挑战结果canvas

app.wxss

@@ -25,8 +25,8 @@ text {
   width: 375px;
   height: 300px;
   position: absolute;
-  /*  left: -999rpx;
-  top: -9999rpx; */
+  left: -999rpx;
+  top: -9999rpx;
 }
 
 .textOver {

pages/pkResult/index.js

@@ -39,23 +39,16 @@ Page({
     this.storeBindings.updateStoreBindings()
     this.compareScore()
     this.innerAudioContext = wx.createInnerAudioContext()
-
-    this.share()
   },
   compareScore() {
-    /*   let pkData = {
-        audioPath: "https://reader-wx.ai160.com/audio/reader/103138024.mp3",
-        avatar: "wxfile://,tmp_ba795553cc21cd941badc3ce06597c245f08fd6a674fe165.jpg",
-        nickName: "小舞",
-        score: 96,
-      } */
+    console.log(this.data);
     let pkData = this.data.pkData
     let score = pkData.score
     let myResult = {
       audioPath: this.data.readDetail.tempFilePath,
       nickName: this.data.userInfo.nickName || this.data.userInfo.uid,
-      avatar: this.data.userInfo.avatar,
-      score: this.data.readDetail.myOverall
+      avatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTI2BmZe9odmibD0N4aY6RRhpnnREyshaoUqE73DBqCicX7RbkIXt54M150ibibfAZKzPgcescia3VYY3HA/13200' || this.data.userInfo.avatar,
+      score: this.data.readDetail.myOverall || 99
     }
     this.setData({
       equal: score == myResult.score,
@@ -143,24 +136,132 @@ Page({
   onUnload() {
     this.innerAudioContext.destroy()
   },
-  share() {
-    let context = wx.createSelectorQuery();
-    context
-      .select('#share')
-      .fields({
-        node: true,
-        size: true
-      }).exec((res) => {
-        const canvas = res[0].node;
-        const ctx = canvas.getContext('2d');
-        const dpr = wx.getSystemInfoSync().pixelRatio;
-        canvas.width = res[0].width * dpr;
-        canvas.height = res[0].height * dpr;
-        ctx.scale(dpr, dpr);
-        
+  creatShare() {
+    return new Promise((resolve, reject) => {
+      let context = wx.createSelectorQuery();
+      context
+        .select('#share')
+        .fields({
+          node: true,
+          size: true
+        }).exec((res) => {
+          const canvas = res[0].node;
+          const ctx = canvas.getContext('2d');
+          const dpr = wx.getSystemInfoSync().pixelRatio;
+          canvas.width = res[0].width * dpr;
+          canvas.height = res[0].height * dpr;
+          ctx.scale(dpr, dpr);
+          ctx.font = '16px PingFang';
+          console.log(this.data.victory, this.data.defeated, this.data.equal);
+          let bgImg = canvas.createImage();
+          bgImg.src = this.data.equal ? 'https://reader-wx.ai160.com/images/reader/v3/equal.png' : 'https://reader-wx.ai160.com/images/reader/v3/victory.png'
+          bgImg.onload = () => {
+            ctx.drawImage(bgImg, 0, 0, 375, 300);
+            ctx.textAlign = "center";
+            var lnamex = this.data.equal ? 100 : 100,
+              lnamey = this.data.equal ? 125 : 115;
+            ctx.fillText(this.data.victory.nickName, lnamex, lnamey)
+            var rnamex = this.data.equal ? 280 : 280,
+              rnamey = this.data.equal ? 125 : 140;
+            ctx.fillText(this.data.defeated.nickName, rnamex, rnamey)
+            ctx.font = '19px PingFang';
+            var lnumx = this.data.equal ? 100 : 100,
+              lnumy = this.data.equal ? 150 : 140;
+            ctx.fillText(this.data.victory.score + '分', lnumx, lnumy)
+            var rnumx = this.data.equal ? 280 : 280,
+              rnumy = this.data.equal ? 150 : 165;
+            ctx.fillText(this.data.defeated.score + '分', rnumx, rnumy)
+            ctx.font = '13px PingFang';
+            var ltimex = this.data.equal ? 136 : 136,
+              ltimey = this.data.equal ? 252.5 : 239.5;
+            ctx.fillText(this.data.vEnd, ltimex, ltimey)
+            var rtimex = this.data.equal ? 320 : 320,
+              rtimey = this.data.equal ? 253 : 267;
+            ctx.fillText(this.data.dEnd, rtimex, rtimey)
+            // 圆形位置 大小
+            var size = 55;
+            var lx = this.data.equal ? 71 : 72,
+              ly = this.data.equal ? 45 : 38;
+            var rx = this.data.equal ? 252 : 247,
+              ry = this.data.equal ? 45 : 60;
+            ctx.save(); // 保存
+            ctx.arc(size / 2 + lx, size / 2 + ly, size / 2, 0, Math.PI * 2, false);
+            ctx.arc(size / 2 + rx, size / 2 + ry, size / 2, 0, Math.PI * 2, false);
+            ctx.clip();
+            let leftImg = canvas.createImage();
+            leftImg.src = this.data.victory.avatar
+            leftImg.onerror = () => {
+              let rightImg = canvas.createImage();
+              rightImg.src = this.data.defeated.avatar
+              rightImg.onload = () => {
+                ctx.drawImage(rightImg, rx, ry, size, size)
+                setTimeout(() => {
+                  wx.canvasToTempFilePath({
+                    canvas: canvas,
+                    success(res) {
+                      resolve({
+                        title: '请欣赏我的课文朗读作品，点赞+评论。',
+                        path: `/pages/index/index?&uid=${wx.getStorageSync('uid')}`,
+                        imageUrl: res.tempFilePath
+                      })
+                    },
+                    fail(res) {
+                      reject()
+                    }
+                  }, this)
+                }, 500)
+              }
+            }
+            leftImg.onload = () => {
+              ctx.drawImage(leftImg, lx, ly, size, size)
+              let rightImg = canvas.createImage();
+              rightImg.src = this.data.defeated.avatar
+              rightImg.onload = () => {
+                ctx.drawImage(rightImg, rx, ry, size, size)
+                setTimeout(() => {
+                  wx.canvasToTempFilePath({
+                    canvas: canvas,
+                    success(res) {
+                      resolve({
+                        title: '请欣赏我的课文朗读作品，点赞+评论。',
+                        path: `/pages/index/index?&uid=${wx.getStorageSync('uid')}`,
+                        imageUrl: res.tempFilePath
+                      })
+                    },
+                    fail(res) {
+                      reject()
+                    }
+                  }, this)
+                }, 500)
+              }
+            }
+          }
+        })
+    })
+  },
+  onShareAppMessage({
+    from,
+    target
+  }) {
+    if (from == 'button') {
+      const promise = new Promise(resolve => {
+        this.creatShare().then(res => {
+          console.log(res);
+          resolve(res)
+        })
       })
+      return {
+        title: '课文朗读，从未如此有趣。',
+        path: `/pages/index/index?&uid=${wx.getStorageSync('uid')}`,
+        imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/shareContent.png',
+        promise
+      }
+    } else {
+      return {
+        title: '课文朗读，从未如此有趣。',
+        path: `/pages/index/index?&uid=${wx.getStorageSync('uid')}`,
+        imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/shareContent.png'
+      }
+    }
   },
-  onShareAppMessage() {
-
-  }
 })

pages/pkResult/index.less

@@ -26,6 +26,7 @@
     box-shadow: 0 4rpx 10rpx 0 rgba(0, 0, 0, 0.30), inset 0 -2rpx 3rpx 0 #052552, inset 0 2rpx 3rpx 0;
     border-radius: 20rpx;
     text-align: center;
+    box-sizing: border-box;
 
     .left {
       position: absolute;
@@ -33,11 +34,11 @@
       left: 30rpx;
       height: 500rpx;
       width: 328rpx;
-      background: url('http://reader-wx.ai160.com/images/reader/v3/victory.png')no-repeat;
+      background: url('http://reader-wx.ai160.com/images/reader/v3/victory-1.png')no-repeat;
       background-size: 100% 100%;
 
       .avatarL {
-        top: 64rpx;
+        top: 66rpx;
         left: 110rpx;
       }
     }
@@ -58,7 +59,7 @@
       background-size: 100% 100%;
 
       .avatarR {
-        top: 57rpx;
+        top: 59rpx;
         left: 107rpx;
       }
     }
@@ -66,6 +67,11 @@
     .equalRight {
       background: url('http://reader-wx.ai160.com/images/reader/v3/pingyou.png')no-repeat;
       background-size: 100% 100%;
+
+      .avatarR {
+        top: 64rpx;
+        left: 122rpx;
+      }
     }
 
     .avatar {
@@ -146,7 +152,4 @@
       box-shadow: 0 6px 14px 0 rgba(50, 197, 255, 0.65);
     }
   }
-}
-.share{
-  
 }

pages/pkResult/index.wxml

@@ -34,4 +34,4 @@
     </button>
   </view>
 </view>
-<canvas id='share' class="share" type="2d"> </canvas>
+<canvas id='share'  type="2d"> </canvas>

pages/pkResult/index.wxss

@@ -24,6 +24,7 @@
   box-shadow: 0 4rpx 10rpx 0 rgba(0, 0, 0, 0.3), inset 0 -2rpx 3rpx 0 #052552, inset 0 2rpx 3rpx 0;
   border-radius: 20rpx;
   text-align: center;
+  box-sizing: border-box;
 }
 .pkResult .body .left {
   position: absolute;
@@ -31,11 +32,11 @@
   left: 30rpx;
   height: 500rpx;
   width: 328rpx;
-  background: url('http://reader-wx.ai160.com/images/reader/v3/victory.png') no-repeat;
+  background: url('http://reader-wx.ai160.com/images/reader/v3/victory-1.png') no-repeat;
   background-size: 100% 100%;
 }
 .pkResult .body .left .avatarL {
-  top: 64rpx;
+  top: 66rpx;
   left: 110rpx;
 }
 .pkResult .body .equal {
@@ -53,13 +54,17 @@
   background-size: 100% 100%;
 }
 .pkResult .body .right .avatarR {
-  top: 57rpx;
+  top: 59rpx;
   left: 107rpx;
 }
 .pkResult .body .equalRight {
   background: url('http://reader-wx.ai160.com/images/reader/v3/pingyou.png') no-repeat;
   background-size: 100% 100%;
 }
+.pkResult .body .equalRight .avatarR {
+  top: 64rpx;
+  left: 122rpx;
+}
 .pkResult .body .avatar {
   position: absolute;
   width: 110rpx;

pages/reading/index.js

@@ -251,14 +251,14 @@ Page({
         tempFilePath: res.tempFilePath,
       });
       //录音机结束后，驰声引擎执行结束操作，等待评测返回结果
-      wsEngine.stop({
-        success: () => {
-          console.log('====== wsEngine stop success ======');
-        },
-        fail: (res) => {
-          console.log('录音结束报错', res);
-        },
-      });
+      // wsEngine.stop({
+      //   success: () => {
+      //     console.log('====== wsEngine stop success ======');
+      //   },
+      //   fail: (res) => {
+      //     console.log('录音结束报错', res);
+      //   },
+      // });
     });
     //监听已录制完指定帧大小的文件事件。如果设置了 frameSize，则会回调此事件。
     recorderManager.onFrameRecorded((res) => {

pages/reading/index.wxml

@@ -83,7 +83,7 @@
     </view>
   </view>
   <view class="controller">
-    <image src="{{state?'/static/readingNow.gif':'/static/work.png'}}" class="playImg" bindtap="setCountDown" />
+    <image src="{{state?'/static/readingNow.gif':'/static/work.png'}}" class="playImg" bindtap="pkResult" />
     <view class="text">{{state?'完成录制':readingReset?'点击重录':readingType=='public'?'开始朗读':'开始挑战'}}</view>
     <uploadFile wx:if="{{readingReset}}" class="btnPosition" />
   </view>