尺寸安装弹窗

Album/js/draw/ProductModal.js

@@ -25,19 +25,19 @@ export default class ProductModal extends Modal {
     //详情
     next = drawImage('images/product_popup/btn_info@2x.png', startX, startY).then((dimension) => {
       if (this.btn_acitve === 'info') {
-        active_btn_startY = dimension.startX - btn_active_offsetY
+        active_btn_startY = dimension.startY - btn_active_offsetY
       }
       context_startX = dimension.endX
       context_width= this.win_dimension.width - 26 - dimension.width
       return drawImage('images/product_popup/btn_combin@2x.png', startX, dimension.endY)
     }).then((dimension) => {
       if (this.btn_acitve === 'combin') {
-        active_btn_startY = dimension.startX - btn_active_offsetY
+        active_btn_startY = dimension.startY - btn_active_offsetY
       }
       return drawImage('images/product_popup/btn_buy@2x.png', startX, dimension.endY)
     }).then((dimension) => {
       if (this.btn_acitve === 'buy') {
-        active_btn_startY = dimension.startX - btn_active_offsetY
+        active_btn_startY = dimension.startY - btn_active_offsetY
       }
       if (this.goodDetail.is_favorite) {
         return drawImage('images/product_popup/btn_fav_active@2x.png', startX, this.win_dimension.endY - 13, 'bottom')

Album/js/draw/SizeModal.js

@@ -0,0 +1,58 @@
+import drawText from '../util/drawText.js'
+import drawImage from '../util/drawImage.js'
+import Modal from './Modal'
+
+export default class SizeModal extends Modal {
+  constructor(context, goodDetail) {
+    super()
+    this.bg_pop_win = 'images/size_popup/bg_win@2x.png'
+    this.context = context
+    this.goodDetail = goodDetail
+    this.btn_acitve = 'size'
+  }
+  drawContent = () => {
+    let ctx = this.context
+    let next
+    let startX = this.win_dimension.startX + 13;
+    let startY = this.win_dimension.startY + 76;
+    let btn_active_offsetX = 25
+    let btn_active_offsetY = 7
+    let active_btn_startX = startX - btn_active_offsetX
+    let active_btn_startY
+    let context_startX
+    let context_width
+    
+    //
+    next = drawImage('images/size_popup/btn_size@2x.png', startX, startY).then((dimension) => {
+      if (this.btn_acitve === 'size') {
+        active_btn_startY = dimension.startY - btn_active_offsetY
+      }
+      context_startX = dimension.endX
+      context_width= this.win_dimension.width - 26 - dimension.width
+      return drawImage('images/size_popup/btn_pic@2x.png', startX, dimension.endY)
+    }).then((dimension) => {
+      if (this.btn_acitve === 'pic') {
+        active_btn_startY = dimension.startY - btn_active_offsetY
+      }
+      return drawImage('images/size_popup/btn_video@2x.png', startX, dimension.endY)
+    }).then((dimension) => {
+      if (this.btn_acitve === 'video') {
+        active_btn_startY = dimension.startY - btn_active_offsetY
+      }
+    })
+
+    //商品图
+    next = next.then(() => {
+      return drawImage(
+        this.goodDetail.upload_img,
+        context_startX,
+        startY,
+        context_width,
+        this.win_dimension.height - 76 - 13)
+    })
+    next = next.then((dimension) => {
+      next = drawImage('images/size_popup/btn_' + this.btn_acitve + '_active@2x.png', active_btn_startX, active_btn_startY)
+    })
+
+  }
+}

Album/js/main.js

@@ -7,6 +7,7 @@ import setPrice from './draw/price.js'
 
 import ContactModal from './draw/ContactModal.js'
 import ProductModal from './draw/ProductModal.js'
+import SizeModal from './draw/SizeModal.js'
 //import canvas from './libs/weapp-adapter.js'
 
 var url = 'https://t6.9026.com/api/album/cat?parent_id=0&store_id=1'//初始顶级目录url
@@ -846,26 +847,28 @@ wx.onTouchStart(((e) => {
         && y >= DetailbtnArea[4].startY
         && y <= DetailbtnArea[4].endY) {
         attrFlag = true
-        Buttonstatus = false
-        let img = new wx.createImage()
-        img.src = GoodsDetail.upload_img
-        img.onload = function () {
-          let ratio = img.width / img.height
-          context.drawImage(img, (screenWidth - (screenHeight - 100) * ratio), 120, (screenHeight - 100) * 2 * ratio, (screenHeight - 100) * 2)
-          context.fillStyle = '#F5F5F5'
-          context.fillRect((screenWidth - (screenHeight - 100) * ratio), 60, (screenHeight - 100) * 2 * ratio, 60)
-          context.fillStyle = '#FFA500'
-          context.fillRect((screenWidth - (screenHeight - 100) * ratio), 118, (screenHeight - 100) * ratio, 2)
-          context.fillStyle = '#696969'
-          context.font = '30px Arial'
-          context.fillText('安装图', screenWidth - 280, 100)
-          context.fillText('尺寸图', screenWidth + 190, 100)
-          let closeImg = wx.createImage()
-          closeImg.src = 'images/close.png'
-          closeImg.onload = function () {
-            context.drawImage(closeImg, screenWidth + (screenHeight - 100) * ratio - 60, 60, 60, 60)
-          }
-        }
+        if (Buttonstatus == true) Buttonstatus = false
+        else Buttonstatus = true
+        // let img = new wx.createImage()
+        // img.src = GoodsDetail.upload_img
+        // img.onload = function () {
+        //   let ratio = img.width / img.height
+        //   context.drawImage(img, (screenWidth - (screenHeight - 100) * ratio), 120, (screenHeight - 100) * 2 * ratio, (screenHeight - 100) * 2)
+        //   context.fillStyle = '#F5F5F5'
+        //   context.fillRect((screenWidth - (screenHeight - 100) * ratio), 60, (screenHeight - 100) * 2 * ratio, 60)
+        //   context.fillStyle = '#FFA500'
+        //   context.fillRect((screenWidth - (screenHeight - 100) * ratio), 118, (screenHeight - 100) * ratio, 2)
+        //   context.fillStyle = '#696969'
+        //   context.font = '30px Arial'
+        //   context.fillText('安装图', screenWidth - 280, 100)
+        //   context.fillText('尺寸图', screenWidth + 190, 100)
+        //   let closeImg = wx.createImage()
+        //   closeImg.src = 'images/close.png'
+        //   closeImg.onload = function () {
+        //     context.drawImage(closeImg, screenWidth + (screenHeight - 100) * ratio - 60, 60, 60, 60)
+        //   }
+        // }
+        new SizeModal(context, GoodsDetail).draw()
       }
       //上一张
       if (x >= DetailbtnArea[5].startX

Album/js/util/drawImage.js

@@ -1,4 +1,4 @@
-export default function drawImage(img, x1, y1, w, h, align) {
+export default function drawImage(img, x1, y1, w, h, align, zoom) {
     return new Promise(function(resolve, reject) {
 
         let image = wx.createImage()
@@ -23,7 +23,12 @@ export default function drawImage(img, x1, y1, w, h, align) {
             } else if (!!align && align.indexOf('bottom') > -1) {
                 y1 = y1 - h
             }
-            context.drawImage(image, x1, y1, w, h)
+            if (zoom) {
+
+                context.drawImage(image, 0, 0, width, width * h/w, x1, y1, w, h)
+            } else {
+                context.drawImage(image, x1, y1, w, h)
+            }
             resolve({
                 startX: x1,
                 startY: y1,