海报页完善一部分

496_dongfengqichen/pages/poster/poster.js

@@ -12,7 +12,9 @@ Page({
     windowScale:0,//屏幕缩放比
     windowW: 0,//屏幕宽度
     windowH: 0,//屏幕高度
-    posterUrl:null,//海报图片
+    posterUrl:[],//海报图片
+    canvasShow: true,//是否渲染canvas
+    swiperCurrent: 0,//swiper选中的元素下标
   },
 
   /**
@@ -32,7 +34,7 @@ Page({
         this.data.windowScale = res.windowWidth / 750;
         this.data.windowW = res.windowWidth;
         this.data.windowH = res.windowHeight;
-        this.posterDrawing();
+        this.posterDrawing(1);
       }
     })
   },
@@ -83,26 +85,22 @@ Page({
     }
   },
   saveImg:function(){//保存到手机
-    wx.chooseImage({
-      success: function (res) {
-        console.log(res);
-        const tempFilePaths = res.tempFilePaths
-        wx.saveFile({
-          tempFilePath: tempFilePaths[0],
-          success(res) {
-            console.log(res);
-            const savedFilePath = res.savedFilePath
-          }
-        })
+    wx.saveFile({
+      tempFilePath: this.data.posterUrl[this.data.swiperCurrent],
+      success(res) {
+        if (res.errMsg== "saveFile:ok"){
+          wx.showToast({
+            title: '保存成功'
+          })
+        }
       }
     })
   },
-  posterDrawing: function () {//海报绘制
-    var ctx = this.data.canvasContron;
-    var scale = this.data.windowScale;
-    console.log(scale);
+  posterDrawing: function (e) {//海报绘制
+    var ctx = this.data.canvasContron;//canvas对象
+    var scale = this.data.windowScale;//屏幕缩放比
     //背景
-    ctx.drawImage(this.data.imgUrl + '/images/tempImg1.jpg', 0, 0, scale * 444, scale * 817);//defaultHead
+    ctx.drawImage(this.data.imgUrl + '/images/tempImg'+e+'.jpg', 0, 0, scale * 444, scale * 817);//defaultHead
     ctx.setFillStyle("#FFFFFF");
     ctx.save();
     ctx.beginPath(); //开始绘制
@@ -118,25 +116,58 @@ Page({
     ctx.fillText("啦啦啦", scale * 102, scale *572);
     //我是第XXX星探
     ctx.drawImage(this.data.imgUrl + '/images/posterNum.png', scale * 50, scale * 598, scale * 333, scale * 74);
+    //排名数字
+    ctx.drawImage(this.data.imgUrl + '/images/nums/8.png', scale * 168, scale * 602, scale * 32, scale * 40);
+    ctx.drawImage(this.data.imgUrl + '/images/nums/9.png', scale * 202, scale * 602, scale * 32, scale * 40);
+    ctx.drawImage(this.data.imgUrl + '/images/nums/0.png', scale * 236, scale * 602, scale * 32, scale * 40);
+    ctx.drawImage(this.data.imgUrl + '/images/nums/8.png', scale * 270, scale * 602, scale * 32, scale * 40);
     //二维码
     ctx.drawImage(this.data.qrCodeUrl, scale * 282, scale * 672, scale * 105, scale* 106);
     //绘制
-    ctx.draw();
+    ctx.draw(false, setTimeout(() => {
+      wx.canvasToTempFilePath({
+        canvasId: 'myCanvas',
+        success: res => {
+          this.data.posterUrl.push(res.tempFilePath);
+          this.setData({
+            posterUrl: this.data.posterUrl
+          })
+          if (e < 3) {
+            this.posterDrawing(e+1);
+          }else{
+            this.setData({
+              canvasShow:false
+            })
+          }
+        }
+      })
+    }, 300));
   },
-  savePoster:function(){//生成海报
-    wx.canvasToTempFilePath({
-      width: 443 * this.windowScale,
-      height: 817 * this.windowScale,
-      destWidth: 443 * this.windowScale *this.data.windowW*3,
-      destHeight: 817 * this.windowScale * this.data.windowH*3,
-      canvasId: 'myCanvas',
-      success: res => {
-        wx.previewImage({
-          urls: [res.tempFilePath] // 需要预览的图片http链接列表
-        })
-        // this.data.posterUrl = res.tempFilePath;
-        // console.log(this.data.posterUrl);
-      }
+  savePoster:function(){//预览海报
+    wx.previewImage({
+      current: this.data.posterUrl[this.data.swiperCurrent],
+      urls: this.data.posterUrl // 需要预览的图片http链接列表
     })
+  },
+  prevImg() {//上一张图片
+    if (this.data.swiperCurrent > 0) {
+      this.setData({
+        swiperCurrent: this.data.swiperCurrent -= 1,
+      })
+    }
+  },
+  nextImg() {//下一张图片
+    if (this.data.swiperCurrent < this.data.posterUrl.length - 1) {
+      this.setData({
+        swiperCurrent: this.data.swiperCurrent += 1,
+      })
+    }
+  },
+  swiperChange(e) {//通过鼠标滑动改变swiper时
+    if (e.detail.source == "touch") {
+      this.setData({
+        swiperCurrent: e.detail.current,
+      })
+    }
   }
 })

496_dongfengqichen/pages/poster/poster.wxml

@@ -1,10 +1,19 @@
 <!--pages/poster/poster.wxml-->
 <view class="all">
   <view class="main">
-    <view class="selectTempFrame">
-      <image class="posterChoose" src="{{imgUrl+'/images/posterChoose.png'}}"></image>
-      <canvas class="canvasDraw" canvas-id="myCanvas"></canvas>
+    <view class="swiperFrame">
+      <swiper class="swiperSty" current="{{swiperCurrent}}" bindchange="swiperChange" previous-margin="130rpx" next-margin="130rpx">
+        <swiper-item wx:for="{{posterUrl}}" wx:key="index">
+          <view class="selectTempFrame {{index==swiperCurrent?'selectTempFrameBorder':''}}">
+            <image style="width:100%;height:100%;" src="{{item}}"></image>
+            <image wx:if="{{index==swiperCurrent}}" class="posterChoose" src="{{imgUrl+'/images/posterChoose.png'}}"></image>
+          </view>
+        </swiper-item>
+      </swiper>
+      <image class="leftArrow" bindtap="prevImg" src="{{imgUrl+'/images/leftArrow.png'}}"></image>
+      <image class="rightArrow" bindtap="nextImg" src="{{imgUrl+'/images/rightArrow.png'}}"></image>
     </view>
+    <canvas wx:if="{{canvasShow}}" class="canvasDraw" canvas-id="myCanvas"></canvas>
     <view class="lookBigPic" bindtap="savePoster">
       <image class="lookBigIcon" src="{{imgUrl+'/images/lookbigIcon.png'}}"></image>
       <view class="lookBigText">查看大图</view>

496_dongfengqichen/pages/poster/poster.wxss

@@ -52,10 +52,13 @@ view{
 .selectTempFrame{
   width:443rpx;
   height:817rpx;
-  border: 10rpx solid #00548C;
   position: relative;
   margin: 0 auto;
   margin-top: 92rpx;
+  box-sizing: border-box;
+}
+.selectTempFrameBorder{
+  border: 10rpx solid #00548C;
 }
 .posterChoose{
   width: 73rpx;
@@ -67,8 +70,12 @@ view{
   z-index: 2;
 }
 .canvasDraw{
-  width:100%;
-  height:100%;
+  width:444rpx;
+  height:817rpx;
+  opacity: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
 }
 .lookBigPic{
   display: flex;
@@ -93,4 +100,29 @@ view{
   height: 68rpx;
   margin: 0 auto;
   margin-top: 20rpx;
+}
+.swiperSty{
+  width: 100%;
+  height: 909rpx;
+}
+.swiperPoster{
+  margin: 0 auto;
+  width: 444rpx;
+  height: 817rpx;
+}
+.leftArrow{
+  position: absolute;
+  top:50%;
+  left: 23rpx;
+  width: 28rpx;
+  height: 118rpx;
+  transform: translateY(-50%);
+}
+.rightArrow{
+  position: absolute;
+  width: 27rpx;
+  height: 118rpx;
+  top:50%;
+  right: 23rpx;
+  transform: translateY(-50%);
 }

496_dongfengqichen/project.config.json

@@ -60,30 +60,30 @@
 					"pathName": "pages/myCenter/myCenter",
 					"query": ""
 				},
-        {
-          "id": -1,
-          "name": "幸运星抓手",
-          "pathName": "pages/luckyStar/luckyStar",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "活动奖品",
-          "pathName": "pages/prizes/prizes",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "海报",
-          "pathName": "pages/poster/poster",
-          "query": ""
-        },
-        {
-          "id": -1,
-          "name": "优惠券",
-          "pathName": "pages/coupon/coupon",
-          "query": ""
-        }
+				{
+					"id": -1,
+					"name": "幸运星抓手",
+					"pathName": "pages/luckyStar/luckyStar",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "活动奖品",
+					"pathName": "pages/prizes/prizes",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "海报",
+					"pathName": "pages/poster/poster",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "优惠券",
+					"pathName": "pages/coupon/coupon",
+					"query": ""
+				}
 			]
 		}
 	}