小程式利用Canvas繪製圖片和豎排文字

Bug開發者發表於2018-05-14
Canvas

引言

閒暇時間抽個空寫了個三國殺武將手冊的小程式，中間有個需求設計的是合成武將皮膚圖、豎排的武將姓名、以及小程式碼，然後提供儲存圖片到相簿，最終讓使用者可以分享到朋友圈或其他平臺。合成圖片應該按照Canvas的文件來做都沒什麼問題，主要是有個豎排文字的需求，這裡和大家分享一下。

# 廣告 宣傳一下自己的小程式，有喜歡三國殺的可以關注一下，有什麼問題也可以加我微信一起討論。

掃碼體驗小程式

小程式利用Canvas繪製圖片和豎排文字

掃碼新增好友，請備註：三國殺

小程式利用Canvas繪製圖片和豎排文字

正文

首先放一張最終儲存到相簿的圖片吧~

小程式利用Canvas繪製圖片和豎排文字

自我感覺良好，至少達到了我自己的預期吧~~~

下面讓我們一步一步來看看如何實現的吧。

整個圖片分為三個部分：

  1. 武將圖片
  2. 小程式碼
  3. 武將文字資訊

先來看一下wxml裡面的程式碼，主要是放了一個canvas標籤，控制了一下高度和寬度屬性。

<view>
  <canvas class='share-canvas' style="width:100%;height:{{canvasHeight}}px" canvas-id="share_canvas"></canvas>
</view>
複製程式碼

武將圖片

drawHeroImage: function (path) {
    var that = this;
    // 拿到canvas context
    let ctx = wx.createCanvasContext('share_canvas');
    // 為了保證圖片比例以及繪製的位置，先要拿到圖片的大小
    wx.getImageInfo({
      src: path,
      success: function (res) {
			
		  // 計算圖片佔比資訊	
        let maxWidth = Math.min(res.width, that.data.canvasWidth * 0.65);
        let radio = maxWidth / res.width;

        let offsetY = (that.data.canvasHeight - res.height * radio) / 2;
        console.log('offsetY=' + offsetY);
        that.setData({
          imageWidth: res.width * radio,
          imageHeight: res.height * radio,
          offsetY: offsetY,
        });
        
        // 繪製canvas背景，不屬於繪製圖片部分
        ctx.setFillStyle('white')
        ctx.fillRect(0, 0, that.data.canvasWidth, that.data.canvasHeight);
        // 繪製武將圖片，path是本地路徑，不可以傳網路url，如果是網路圖片需要先下載
        ctx.drawImage(path, 10, offsetY, res.width * radio, res.height * radio)
        // 繪製小程式碼
        that.drawQrCodeImage(ctx);
        // 繪製勢力漢字：吳
        that.drawInfluence(ctx, that.data.hero.HERO.INFLUENCE);
        // 繪製武將姓名：陸遜
        that.drawName(ctx, that.data.hero.HERO.NAME);
        // 繪製武將稱號：江陵侯
        that.drawHorner(ctx, that.data.hero.HERO.HORNER);
        // 最終呼叫draw函式，生成預覽圖
        // 一個坑點：只能呼叫一次，否則後面的會覆蓋前面的
        ctx.draw();
      }
    });
  }
複製程式碼

小程式碼

小程式碼和武將圖片是一個型別，無非就是需要計算繪製的位置，這裡就不再展示相關程式碼了。

武將文字資訊

從剛剛的程式碼可以看出，我分了3個部分來繪製，其實吳和陸遜應該是可以放到一起的，但是我在繪製的時候發現，空格在繪製的時候會引起異常，導致空格後面的文字無法繪製出來，所以我這裡吳和陸遜中間的空白是靠位置偏移來做的。

這裡就展示一下如何繪製武將稱號的。

// 繪製武將稱號：江陵侯
drawHorner: function (ctx, text) {
	// 設定字號
    ctx.setFontSize(26);
    // 設定字型顏色
    ctx.setFillStyle("#000000");
    // 計算繪製起點
    let x = this.data.offsetX + 35;
    let y = this.data.offsetY + 10;
    console.log('drawHorner' + text);
    console.log(x);
    console.log(y);
    // 繪製豎排文字，這裡是個Util函式，具體實現請繼續看
    Canvas.drawTextVertical(ctx, text, x, y);
  }
複製程式碼

繪製豎排文字從網上找了個開源的程式碼，需要看原理的請看這裡

當然我這裡為了適用小程式做了些改動，函式原型是這樣子的：

CanvasRenderingContext2D.prototype.letterSpacingText = function (text, x, y, letterSpacing)
複製程式碼

原諒我不是很會js，完全不懂這是個什麼語法，看了一會沒弄懂，感覺像是給類新增新的屬性，不管他。

不管白貓黑貓，能抓到耗子就是好貓

改造後的函式像下面的樣子：

canvas.js

/**
* @author zhangxinxu(.com)
* @licence MIT
* @description http://www.zhangxinxu.com/wordpress/?p=7362
*/
function drawTextVertical(context, text, x, y) {
  var arrText = text.split('');
  var arrWidth = arrText.map(function (letter) {
    return 26;
    // 這裡為了找到那個空格的 bug 做了許多努力，不過似乎是白費力了
    // const metrics = context.measureText(letter);
    // console.log(metrics);
    // const width = metrics.width;
    // return width;
  });
  
  var align = context.textAlign;
  var baseline = context.textBaseline;

  if (align == 'left') {
    x = x + Math.max.apply(null, arrWidth) / 2;
  } else if (align == 'right') {
    x = x - Math.max.apply(null, arrWidth) / 2;
  }
  if (baseline == 'bottom' || baseline == 'alphabetic' || baseline == 'ideographic') {
    y = y - arrWidth[0] / 2;
  } else if (baseline == 'top' || baseline == 'hanging') {
    y = y + arrWidth[0] / 2;
  }

  context.textAlign = 'center';
  context.textBaseline = 'middle';

  // 開始逐字繪製
  arrText.forEach(function (letter, index) {
    // 確定下一個字元的縱座標位置
    var letterWidth = arrWidth[index];
    // 是否需要旋轉判斷
    var code = letter.charCodeAt(0);
    if (code <= 256) {
      context.translate(x, y);
      // 英文字元，旋轉90°
      context.rotate(90 * Math.PI / 180);
      context.translate(-x, -y);
    } else if (index > 0 && text.charCodeAt(index - 1) < 256) {
      // y修正
      y = y + arrWidth[index - 1] / 2;
    }
    context.fillText(letter, x, y);
    // 旋轉座標系還原成初始態
    context.setTransform(1, 0, 0, 1, 0, 0);
    // 確定下一個字元的縱座標位置
    var letterWidth = arrWidth[index];
    y = y + letterWidth;
  });
  // 水平垂直對齊方式還原
  context.textAlign = align;
  context.textBaseline = baseline;
}

module.exports = {
  drawTextVertical: drawTextVertical
}
複製程式碼

繪製網路圖片

由於網路圖片無法直接繪製，所以需要先下載到本地，然後再按住本地圖片繪製的流程走一遍。

downloadHeroImage: function () {
    // 微信不支援非https的圖片下載，這裡了個替換
    let url = this.data.hero.HERO.ICON.replace(/http/, "https");
    var that = this;
    wx.downloadFile({
      url: url,
      success: function (res) {
        // 下載成功後拿到圖片的路徑，然後開始繪製
        var path = res.tempFilePath;
        that.drawHeroImage(path);
      }, fail: function (res) {
        console.log(res)
      }
    });
  }
複製程式碼

儲存圖片

說了這麼多，自然少不了最終的一步，將繪製到canvas的圖片儲存到手機相簿，這裡需要使用者授權，你需要自己處理。

用的是微信給我們提供的介面wx.canvasToTempFilePath。需要我們傳入起點座標(x, y)和畫布大小(width, height)以及canvasId。

saveShareImage: function () {
    wx.showLoading({
      title: '正在儲存圖片..',
    });
    let that = this;
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: that.data.canvasWidth,
      height: that.data.canvasHeight,
      canvasId: 'share_canvas',
      success: function (res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            console.log(res);
            wx.showToast({
              title: '儲存到相簿成功',
              duration: 1500,
            })
          },
          fail(res) {
            console.log(res)
            wx.showToast({
              title: '儲存到相簿失敗',
              icon: 'fail'
            })
          },
          complete(res) {
            console.log(res)
          }
        })
      }
    })
  }
複製程式碼

開源

本著開源的精神，原始碼已經放在Github上，大家可以去上面檢視具體程式碼。

github.com/HistoryZhan…

如果對你有幫助的話，麻煩給個Star吧~

相關文章