refine: code

spiritree · May 10, 2019 · b5502f8 · b5502f8
1 parent a7c219d
commit b5502f8
Show file tree

Hide file tree

Showing 20 changed files with 281 additions and 85 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,5 @@
+"use strict";
+App({
+    onLaunch: function () {
+    }
+});
diff --git a/app.json b/app.json
@@ -0,0 +1,9 @@
+{
+  "pages": ["pages/index/index"],
+  "window": {
+    "backgroundTextStyle": "light",
+    "navigationBarBackgroundColor": "#fff",
+    "navigationBarTitleText": "WeChat",
+    "navigationBarTextStyle": "black"
+  }
+}
diff --git a/miniprogram/app.ts → app.ts b/miniprogram/app.ts → app.ts
diff --git a/miniprogram/app.js b/miniprogram/app.js
diff --git a/miniprogram/app.json b/miniprogram/app.json
diff --git a/miniprogram/pages/index/index.json b/miniprogram/pages/index/index.json
diff --git a/miniprogram/pages/index/index.wxml b/miniprogram/pages/index/index.wxml
diff --git a/miniprogram/sitemap.json b/miniprogram/sitemap.json
diff --git a/miniprogram/pages/index/index.js → pages/index/index.js b/miniprogram/pages/index/index.js → pages/index/index.js
diff --git a/pages/index/index.json b/pages/index/index.json
@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "poster": "../../plugin/components/poster/poster"
+  }
+}
diff --git a/pages/index/index.wxml b/pages/index/index.wxml
@@ -0,0 +1 @@
+<poster />
diff --git a/miniprogram/pages/index/index.wxss → pages/index/index.wxss b/miniprogram/pages/index/index.wxss → pages/index/index.wxss
diff --git a/plugin/components/poster/poster.js b/plugin/components/poster/poster.js
@@ -1,61 +1,125 @@
+import { drawRoundImage, fillText, fillmultiLineText } from '../../utils/canvas'
+
+const avatar =
+  'https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83erYOFcEd4wPsUogoJgAPB90GuGDtKe3U4awXonGxh0VTbXHa1lZNoAo3QZKM8xrrFyaiaceW3ImBdQ/132'
+
 Component({
   data: {
-    canvasWidth: '',
-    canvasHeight: '',
+    // canvasWidth: 300,
+    // canvasHeight: 300,
     imgFile: '',
-    showCanvas: true
+    showCanvas: true,
+    posterConfig: {
+      designWidth: 270,
+      designHeight: 480,
+      blocks: [{}],
+      texts: [
+        {
+          text: '深树',
+          x: 66,
+          y: 169,
+          fontSize: 13,
+          color: '#687583'
+        },
+        {
+          text: '邀请你一起打卡·一起进步',
+          x: 66,
+          y: 185,
+          fontSize: 10,
+          color: '#95A1AF'
+        }
+      ],
+      images: [
+        {
+          width: 270,
+          height: 480,
+          x: 0,
+          y: 0,
+          url: 'https://i.loli.net/2019/05/09/5cd43062c7f92.png'
+        },
+        {
+          width: 30,
+          height: 30,
+          x: 27,
+          y: 170,
+          url: avatar,
+          borderRadius: 15
+        }
+      ]
+    }
   },
+
   created() {
     const systemInfo = wx.getSystemInfoSync()
-    this.setData({
-      canvasWidth: systemInfo.screenWidth,
-      canvasHeight: systemInfo.screenHeight
-    })
+    this.setData(
+      {
+        canvasWidth: systemInfo.screenWidth,
+        canvasHeight: systemInfo.screenHeight
+      },
+      () => {
+        this.init()
+      }
+    )
   },
+
   methods: {
-    getImageLocalPath(urlArr) {
-      return Promise.all(
-        urlArr.map((url, i) => {
-          return new Promise((resolve, reject) => {
-            if (url === '') {
-              reject(new Error(`getImageLocalPath : ${url} fail`))
-              this.hide()
-              Toast('下载图片失败，请重试')
-            }
-            wx.getImageInfo({
-              src: url,
-              success: res => {
-                resolve(res)
-              },
-              fail: e => {
-                reject(new Error(`getImageLocalPath : ${url} fail`))
-                this.hide()
-                Toast('下载图片失败，请重试')
-              }
-            })
-          })
+    preloadImages(images) {
+      const loadList = images.map(item => this.getImageTempPath(item))
+      return Promise.all(loadList)
+    },
+
+    init() {
+      const { canvasWidth, canvasHeight, posterConfig } = this.data
+      const canvasId = 'poster-canvas'
+      const ctx = wx.createCanvasContext(canvasId, this)
+      const {
+        texts = [],
+        images = [],
+        lines = [],
+        designWidth = 375,
+        designHeight = 667
+      } = posterConfig
+      this.preloadImages(images).then(() => {
+        const rWidth = canvasWidth / designWidth
+        const rHeight = canvasHeight / designHeight
+        ctx.scale(rWidth, rHeight)
+        console.log(images)
+        images.forEach(item => {
+          ctx.save()
+          ctx.drawImage(item.path, item.x, item.y, item.width, item.height)
+          ctx.restore()
         })
-      )
+        ctx.draw(false, () => {}, this)
+      })
+    },
+
+    getImageTempPath(image) {
+      return new Promise((resolve, reject) => {
+        if (image.url === '') {
+          reject(new Error('no image url'))
+        }
+        wx.getImageInfo({
+          src: image.url,
+          success(res) {
+            image.path = res.path
+            resolve()
+          },
+          fail(err) {
+            reject(err)
+          }
+        })
+      })
     },
 
-    saveCanvas() {
+    canvas2tempFile() {
       wx.canvasToTempFilePath(
         {
           canvasId: 'poster-canvas',
-          quality: 1,
-          success: res => {
-            this.setData({
-              imgFile: res.tempFilePath
-            })
-            wx.saveImageToPhotosAlbum({
-              filePath: res.tempFilePath,
-              success: res => {
-                this.triggerEvent('success', res.tempFilePath)
-              },
-              fail: err => {
-                this.triggerEvent('fail', err)
-              }
-            })
+          success(res) {
+            this.triggerEvent('success', res.tempFilePath)
+          },
+          fail(err) {
+            this.triggerEvent('fail', err)
           }
         },
         this

diff --git a/plugin/components/poster/poster.json b/plugin/components/poster/poster.json
@@ -1,3 +1,3 @@
 {
   "component": true
-}
+}
diff --git a/plugin/components/poster/poster.wxml b/plugin/components/poster/poster.wxml
@@ -1,6 +1,6 @@
 <view>
-  <canvas canvas-id="poster-canvas" class="poster-canvas" hidden="{{!showCanvas}}" 
+  <canvas canvas-id="poster-canvas" class="poster-canvas debug" hidden="{{!showCanvas}}" posterConfig="{{posterConfig}}"
     style="width:{{canvasWidth}}px;height:{{canvasHeight}}px"
   />
-  <button>生成</button>
+  <!-- <button>生成</button> -->
 </view>
diff --git a/plugin/components/poster/poster.wxss b/plugin/components/poster/poster.wxss
@@ -4,4 +4,8 @@
   height: 100%;
   transform: translate3d(100%, 0, 0);
   z-index: 1000；
+}
+
+.poster-canvas.debug {
+  transform: none !important
 }
diff --git a/plugin/utils/canvas.js b/plugin/utils/canvas.js
@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function drawRoundImage(_a) {
+    var ctx = _a.ctx, img = _a.img, x = _a.x, y = _a.y, r = _a.r;
+    ctx.save();
+    var d = 2 * r;
+    var cx = x + r;
+    var cy = y + r;
+    ctx.fill();
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
+    ctx.closePath();
+    ctx.clip();
+    ctx.drawImage(img, x, y, d, d);
+    ctx.restore();
+}
+exports.drawRoundImage = drawRoundImage;
+function fillmultiLineText(_a) {
+    var ctx = _a.ctx, text = _a.text, x = _a.x, y = _a.y, maxWidth = _a.maxWidth, _b = _a.baseLine, baseLine = _b === void 0 ? 'top' : _b, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, _d = _a.fontStyle, fontStyle = _d === void 0 ? 'normal' : _d, _e = _a.fontWeight, fontWeight = _e === void 0 ? 'normal' : _e, fontSize = _a.fontSize, _f = _a.fontFamily, fontFamily = _f === void 0 ? 'sans-serif' : _f, color = _a.color, _g = _a.paddingTop, paddingTop = _g === void 0 ? 0 : _g, firstLineX = _a.firstLineX;
+    ctx.save();
+    var isSingle = true;
+    var finalY = 0;
+    if (firstLineX === undefined)
+        firstLineX = x;
+    ctx.font = fontStyle + " " + fontWeight + " " + fontSize + "px " + fontFamily;
+    ctx.setFillStyle(color);
+    ctx.setTextBaseline(baseLine);
+    ctx.setTextAlign(textAlign);
+    var textArr = text.split('');
+    var singleLine = '';
+    var newTextArr = [];
+    for (var i = 0; i < textArr.length; i++) {
+        var testLine = singleLine + textArr[i];
+        var metrics = ctx.measureText(testLine).width;
+        if (metrics > maxWidth && i > 0) {
+            newTextArr.push(singleLine);
+            singleLine = textArr[i];
+        }
+        else {
+            singleLine = testLine;
+        }
+        if (i === textArr.length - 1) {
+            newTextArr.push(singleLine);
+        }
+    }
+    newTextArr.length === 1 ? (isSingle = true) : (isSingle = false);
+    newTextArr.forEach(function (text, i) {
+        var textX = i === 0 ? firstLineX : x;
+        var textY = isSingle
+            ? y + paddingTop
+            : y + paddingTop + i * (Math.ceil(fontSize / 2) + fontSize);
+        ctx.fillText(text, textX, textY);
+        finalY = y + paddingTop + (i + 1) * (Math.ceil(fontSize / 2) + fontSize);
+    });
+    ctx.restore();
+    return finalY;
+}
+exports.fillmultiLineText = fillmultiLineText;
+function drawRoundRect(_a) {
+    var ctx = _a.ctx, x = _a.x, y = _a.y, width = _a.width, height = _a.height, r = _a.r, _b = _a.type, type = _b === void 0 ? 'stroke' : _b, _c = _a.shape, shape = _c === void 0 ? { tl: true, tr: true, br: true, bl: true } : _c;
+    var PI = Math.PI;
+    ctx.moveTo(x, y + r);
+    ctx.beginPath();
+    shape.tl ? ctx.arc(x + r, y + r, r, PI, 1.5 * PI) : ctx.arc(x, y, 0, 0, 0);
+    shape.tr
+        ? ctx.arc(x + width - r, y + r, r, 1.5 * PI, 2 * PI)
+        : ctx.arc(x + width, y, 0, 0, 0);
+    shape.br
+        ? ctx.arc(x + width - r, y + height - r, r, 0, 0.5 * PI)
+        : ctx.arc(x + width, y + height, 0, 0, 0);
+    shape.bl
+        ? ctx.arc(x + r, y + height - r, r, 0.5 * PI, PI)
+        : ctx.arc(x, y + height, 0, 0, 0);
+    ctx.closePath();
+    var method = type;
+    ctx[method]();
+}
+exports.drawRoundRect = drawRoundRect;
+function fillText(_a) {
+    var ctx = _a.ctx, text = _a.text, x = _a.x, y = _a.y, _b = _a.baseLine, baseLine = _b === void 0 ? 'top' : _b, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, _d = _a.fontStyle, fontStyle = _d === void 0 ? 'normal' : _d, _e = _a.fontWeight, fontWeight = _e === void 0 ? 'normal' : _e, fontSize = _a.fontSize, _f = _a.fontFamily, fontFamily = _f === void 0 ? 'sans-serif' : _f, color = _a.color, _g = _a.returnWidth, returnWidth = _g === void 0 ? false : _g;
+    ctx.save();
+    ctx.font = fontStyle + " " + fontWeight + " " + fontSize + "px " + fontFamily;
+    ctx.setFillStyle(color);
+    ctx.setTextBaseline(baseLine);
+    ctx.setTextAlign(textAlign);
+    ctx.fillText(text, x, y);
+    ctx.restore();
+    if (returnWidth) {
+        return ctx.measureText(text).width;
+    }
+}
+exports.fillText = fillText;
+function drawLine(_a) {
+    var ctx = _a.ctx, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY, lineWidth = _a.lineWidth, color = _a.color;
+    ctx.save();
+    ctx.setStrokeStyle(color);
+    ctx.setLineWidth(lineWidth);
+    ctx.beginPath();
+    ctx.moveTo(startX, startY);
+    ctx.lineTo(endX, endY);
+    ctx.stroke();
+    ctx.closePath();
+    ctx.restore();
+}
+exports.drawLine = drawLine;
diff --git a/plugin/utils/canvas.ts b/plugin/utils/canvas.ts
@@ -183,3 +183,33 @@ export function fillText({
     return ctx.measureText(text).width
   }
 }
+
+export interface IdrawLine {
+  ctx: wx.CanvasContext
+  startX: number
+  startY: number
+  endX: number
+  endY: number
+  lineWidth: number
+  color: string
+}
+
+export function drawLine({
+  ctx,
+  startX,
+  startY,
+  endX,
+  endY,
+  lineWidth,
+  color
+}: IdrawLine) {
+  ctx.save()
+  ctx.setStrokeStyle(color)
+  ctx.setLineWidth(lineWidth)
+  ctx.beginPath()
+  ctx.moveTo(startX, startY)
+  ctx.lineTo(endX, endY)
+  ctx.stroke()
+  ctx.closePath()
+  ctx.restore()
+}