''

app.json

@@ -123,6 +123,13 @@
         "index"
       ]
     },
+    {
+      "root": "src/pages/invitationcard",
+      "name": "invitationcard",
+      "pages": [
+        "index"
+      ]
+    },
     {
       "root": "src/pages/invitation",
       "name": "invitation",

components/canvasdrawer/canvasdrawer.js

+/* global Component wx */
+
+Component({
+  properties: {
+    painting: {
+      type: Object,
+      value: {view: []},
+      observer (newVal, oldVal) {
+        if (!this.data.isPainting) {
+          if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
+            if (newVal && newVal.width && newVal.height) {
+              this.setData({
+                showCanvas: true,
+                isPainting: true
+              })
+              this.readyPigment()
+            }
+          } else {
+            if (newVal && newVal.mode !== 'same') {
+              this.triggerEvent('getImage', {errMsg: 'canvasdrawer:samme params'})
+            }
+          }
+        }
+      }
+    }
+  },
+  data: {
+    showCanvas: false,
+
+    width: 100,
+    height: 100,
+
+    tempFileList: [],
+
+    isPainting: false
+  },
+  ctx: null,
+  cache: {},
+  ready () {
+    wx.removeStorageSync('canvasdrawer_pic_cache')
+    this.cache = wx.getStorageSync('canvasdrawer_pic_cache') || {}
+    this.ctx = wx.createCanvasContext('canvasdrawer', this)
+  },
+  methods: {
+    readyPigment () {
+      const { width, height, views } = this.data.painting
+      this.setData({
+        width,
+        height
+      })
+
+      const inter = setInterval(() => {
+        if (this.ctx) {
+          clearInterval(inter)
+          this.ctx.clearActions()
+          this.ctx.save()
+          this.getImagesInfo(views)
+        }
+      }, 100)
+    },
+    getImagesInfo (views) {
+      const imageList = []
+      for (let i = 0; i < views.length; i++) {
+        if (views[i].type === 'image') {
+          imageList.push(this.getImageInfo(views[i].url))
+        }
+      }
+
+      const loadTask = []
+      for (let i = 0; i < Math.ceil(imageList.length / 8); i++) {
+        loadTask.push(new Promise((resolve, reject) => {
+          Promise.all(imageList.splice(i * 8, 8)).then(res => {
+            resolve(res)
+          }).catch(res => {
+            reject(res)
+          })
+        }))
+      }
+      Promise.all(loadTask).then(res => {
+        let tempFileList = []
+        for (let i = 0; i < res.length; i++) {
+          tempFileList = tempFileList.concat(res[i])
+        }
+        this.setData({
+          tempFileList
+        })
+        this.startPainting()
+      })
+    },
+    startPainting () {
+      const { tempFileList, painting: { views } } = this.data
+      for (let i = 0, imageIndex = 0; i < views.length; i++) {
+        if (views[i].type === 'image') {
+          this.drawImage({
+            ...views[i],
+            url: tempFileList[imageIndex]
+          })
+          imageIndex++
+        } else if (views[i].type === 'text') {
+          if (!this.ctx.measureText) {
+            wx.showModal({
+              title: '提示',
+              content: '当前微信版本过低，无法使用 measureText 功能，请升级到最新微信版本后重试。'
+            })
+            this.triggerEvent('getImage', {errMsg: 'canvasdrawer:version too low'})
+            return
+          } else {
+            this.drawText(views[i])
+          }
+        } else if (views[i].type === 'rect') {
+          this.drawRect(views[i])
+        }
+      }
+      this.ctx.draw(false, () => {
+        wx.setStorageSync('canvasdrawer_pic_cache', this.cache)
+        const system = wx.getSystemInfoSync().system
+        if (/ios/i.test(system)) {
+          this.saveImageToLocal()
+        } else {
+          // 延迟保存图片，解决安卓生成图片错位bug。
+          setTimeout(() => {
+            this.saveImageToLocal()
+          }, 800)
+        }
+      })
+    },
+    drawImage (params) {
+      this.ctx.save()
+      const { url, top = 0, left = 0, width = 0, height = 0, borderRadius = 0, deg = 0 } = params
+      // if (borderRadius) {
+      //   this.ctx.beginPath()
+      //   this.ctx.arc(left + borderRadius, top + borderRadius, borderRadius, 0, 2 * Math.PI)
+      //   this.ctx.clip()
+      //   this.ctx.drawImage(url, left, top, width, height)
+      // } else {
+      if (deg !== 0) {
+        this.ctx.translate(left + width/2, top + height/2)
+        this.ctx.rotate(deg * Math.PI / 180)
+        this.ctx.drawImage(url, -width/2, -height/2, width, height)
+      } else {
+        this.ctx.drawImage(url, left, top, width, height)
+      }
+      // }
+      this.ctx.restore()
+    },
+    drawText (params) {
+      this.ctx.save()
+      const {
+        MaxLineNumber = 2,
+        breakWord = false,
+        color = 'black',
+        content = '',
+        fontSize = 16,
+        top = 0,
+        left = 0,
+        lineHeight = 20,
+        textAlign = 'left',
+        width,
+        bolder = false,
+        textDecoration = 'none'
+      } = params
+      
+      this.ctx.beginPath()
+      this.ctx.setTextBaseline('top')
+      this.ctx.setTextAlign(textAlign)
+      this.ctx.setFillStyle(color)
+      this.ctx.setFontSize(fontSize)
+
+      if (!breakWord) {
+        this.ctx.fillText(content, left, top)
+        this.drawTextLine(left, top, textDecoration, color, fontSize, content)
+      } else {
+        let fillText = ''
+        let fillTop = top
+        let lineNum = 1
+        for (let i = 0; i < content.length; i++) {
+          fillText += [content[i]]
+          if (this.ctx.measureText(fillText).width > width) {
+            if (lineNum === MaxLineNumber) {
+              if (i !== content.length) {
+                fillText = fillText.substring(0, fillText.length - 1) + '...'
+                this.ctx.fillText(fillText, left, fillTop)
+                this.drawTextLine(left, fillTop, textDecoration, color, fontSize, fillText)
+                fillText = ''
+                break
+              }
+            }
+            this.ctx.fillText(fillText, left, fillTop)
+            this.drawTextLine(left, fillTop, textDecoration, color, fontSize, fillText)
+            fillText = ''
+            fillTop += lineHeight
+            lineNum ++
+          }
+        }
+        this.ctx.fillText(fillText, left, fillTop)
+        this.drawTextLine(left, fillTop, textDecoration, color, fontSize, fillText)
+      }
+      
+      this.ctx.restore()
+
+      if (bolder) {
+        this.drawText({
+          ...params,
+          left: left + 0.3,
+          top: top + 0.3,
+          bolder: false,
+          textDecoration: 'none' 
+        })
+      }
+    },
+    drawTextLine (left, top, textDecoration, color, fontSize, content) {
+      if (textDecoration === 'underline') {
+        this.drawRect({
+          background: color,
+          top: top + fontSize * 1.2,
+          left: left - 1,
+          width: this.ctx.measureText(content).width + 3,
+          height: 1
+        })
+      } else if (textDecoration === 'line-through') {
+        this.drawRect({
+          background: color,
+          top: top + fontSize * 0.6,
+          left: left - 1,
+          width: this.ctx.measureText(content).width + 3,
+          height: 1
+        })
+      }
+    },
+    drawRect (params) {
+      this.ctx.save()
+      const { background, top = 0, left = 0, width = 0, height = 0 } = params
+      this.ctx.setFillStyle(background)
+      this.ctx.fillRect(left, top, width, height)
+      this.ctx.restore()
+    },
+    getImageInfo (url) {
+      return new Promise((resolve, reject) => {
+        if (this.cache[url]) {
+          resolve(this.cache[url])
+        } else {
+          const objExp = new RegExp(/^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/)
+          if (objExp.test(url)) {
+            wx.getImageInfo({
+              src: url,
+              complete: res => {
+                if (res.errMsg === 'getImageInfo:ok') {
+                  this.cache[url] = res.path
+                  resolve(res.path)
+                } else {
+                  this.triggerEvent('getImage', {errMsg: 'canvasdrawer:download fail'})
+                  reject(new Error('getImageInfo fail'))
+                }
+              }
+            })
+          } else {
+            this.cache[url] = url
+            resolve(url)
+          }
+        }
+      })
+    },
+    saveImageToLocal () {
+      const { width, height } = this.data
+      wx.canvasToTempFilePath({
+        x: 0,
+        y: 0,
+        width,
+        height,
+        canvasId: 'canvasdrawer',
+        complete: res => {
+          if (res.errMsg === 'canvasToTempFilePath:ok') {
+            this.setData({
+              showCanvas: false,
+              isPainting: false,
+              tempFileList: []
+            })
+            this.triggerEvent('getImage', {tempFilePath: res.tempFilePath, errMsg: 'canvasdrawer:ok'})
+          } else {
+            this.triggerEvent('getImage', {errMsg: 'canvasdrawer:fail'})
+          }
+        }
+      }, this)
+    }
+  }
+})

components/canvasdrawer/canvasdrawer.json

+{
+  "component": true
+}
\ No newline at end of file

components/canvasdrawer/canvasdrawer.wxml

+<canvas canvas-id="canvasdrawer" style="width:{{width}}px;height:{{height}}px;" class="board" wx:if="{{showCanvas}}"></canvas>
\ No newline at end of file

components/canvasdrawer/canvasdrawer.wxss

+.board {
+  position: fixed;
+  top: 2000rpx;
+}
\ No newline at end of file

project.config.json

@@ -41,7 +41,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 131,
+			"current": 133,
 			"list": [
 				{
 					"id": 0,
@@ -973,6 +973,13 @@
 					"pathName": "src/pages/beforeinvitation/index",
 					"query": "tid=186&consumerId=111",
 					"scene": null
+				},
+				{
+					"id": 133,
+					"name": "邀请卡页面",
+					"pathName": "src/pages/invitationcard/index",
+					"query": "tid=186",
+					"scene": null
 				}
 			]
 		}

src/pages/invitationcard/index.json

+{
+  "navigationBarTitleText": "邀请好友一起学习",
+  "usingComponents": {
+    "canvasdrawer": "/components/canvasdrawer/canvasdrawer"
+  }
+}
\ No newline at end of file