微信小程式自定義時間顯示器Demo

廢話不多話，還是依舊上圖再說，哈哈

怎麼樣，效果還是不錯的吧，因專案要求，要畫出類似於數碼管顯示的時間樣式，沒辦法，雖然不咋過好弄，但工作畢竟得做，於是乎，樓主，花了3個小時在那裡硬生生的算座標，差不多還是給擼出來，樓主寫成了一個外掛，方便大家以後使用

具體使用方法很簡單

//一如既往的引用方式
var mxDigtial = require('../../utils/mxDigital.js'); 
 var timeShow = new mxDigtial({
      canvasid: "moneyshow",
      value: "--:--:--",
      width: getApp().globalData.width,
      height: getApp().globalData.height * 0.4,
      size: 20,
      color: "#000"
    }) 
 

屬性內容我就不介紹了，字面意思很清楚了

目前只提供幾個引數的設定一個是重畫功能，一個是設定字型粗細，分別為：

  timeShow.setBold(2);				//設定字型粗細
  timeShow.setValue(“1564”);		//設定顯示字型，僅支援數碼管可顯示數字 ，setValue 自帶重畫
   timeShow. invalidate();			//重畫

總體思路

先獲取到畫布正中心的位置，再次計算字型總長度，字型總長度為每個字型的長度乘以字數加上字數減一乘以字間距，用正中心的位置減去字型總長度的一半就是字型開始繪製的位置，這樣子就能保證字型居中顯示啦，然後就是在每個字型的位置繪製數碼管，就繪製7個數碼管，根據不同需求，用不同的顏色來繪製數碼管，數碼管的數字顯示，學硬體的同學都是知道的，廢話不多說，上原始碼：

/**
 * 資料集
 */
var data = {
  pointNumber:0
}
/**
 * wintton
 * 夢辛工作室  靈
 * 2018-11-22
 * @res.canvasid   畫布id
 * @res.data.value      要顯示的值
 * @res.data.width      畫布寬度
 * @res.data.height     畫布高度
 * @res.data.size       字型大小
 * @res.data.color      字型顏色
 */
var mxDigital = function drawFont(res) { 
    data.ctx = wx.createCanvasContext(res.canvasid);
    data.size = res.size;          //字型大小
    data.color = res.color;        //字型顏色
    data.value = res.value;        //要顯示的值
    data.fontSpace = 10;          //字間距
    data.fontoffset = data.size / 8;        //字型寬度 
    data.pointsize = data.size / 4;         //小數點字型大小
    data.length = (res.value + "").length;  //字型數
    data.fontGap = 2;              //數碼管間隙
    data.fontwidth = 10;   //字寬度
    for (var i = 0;i < data.length;i++){
      var str = data.value.charAt(i);
      if (str == ":" || str == "."){
        data.pointNumber++;
      }
    }
  data.allFontlength = data.length * data.size + (data.length - 1) * data.fontSpace - data.pointNumber * data.size;  //字型總長度
    data.width = res.width;          //寬度
    data.height = res.height;        //高度
   data.pointwidth = 0;        //點的間距 
  
  this.invalidate();
}
function drawPoint(startX, startY) {
  data.ctx.setFillStyle(data.color);
  data.ctx.beginPath();
  data.ctx.moveTo(startX, startY + 2 * data.size);
  data.ctx.lineTo(startX +  data.pointsize, startY + 2 * data.size);
  data.ctx.lineTo(startX +  data.pointsize, startY + 2 * data.size +  data.pointsize);
  data.ctx.lineTo(startX, startY + 2 * data.size +  data.pointsize);
  data.ctx.lineTo(startX, startY + 2 * data.size);
  data.ctx.fill();
} 
function drawDoublePoint(startX, startY) {
  data.ctx.setFillStyle(data.color);
  let up = 0.233;
  let down = 0.766;
  data.ctx.beginPath();
  data.ctx.moveTo(startX, startY + 2 * data.size * up);
  data.ctx.lineTo(startX +  data.pointsize, startY + 2 * data.size * up);
  data.ctx.lineTo(startX +  data.pointsize, startY + 2 * data.size * up +  data.pointsize);
  data.ctx.lineTo(startX, startY + 2 * data.size * up +  data.pointsize);
  data.ctx.lineTo(startX, startY + 2 * data.size * up);
  data.ctx.fill();

  data.ctx.beginPath();
  data.ctx.moveTo(startX, startY + 2 * data.size * down);
  data.ctx.lineTo(startX +  data.pointsize, startY + 2 * data.size * down);
  data.ctx.lineTo(startX +  data.pointsize, startY + 2 * data.size * down +  data.pointsize);
  data.ctx.lineTo(startX, startY + 2 * data.size * down +  data.pointsize);
  data.ctx.lineTo(startX, startY + 2 * data.size * down);
  data.ctx.fill();
}
function drawText(datas, startX, startY) {
  var info = [{}, {}, {}, {}, {}, {}, {}];
  //0 從豎線左上第一個開始為0 然後順時針為 1 - 5， 中間為 6
  info["0"].topLeftX = startX;
  info["0"].topLeftY = startY;
  info["0"].topRightX = startX + data.fontoffset;
  info["0"].topRightY = startY + data.fontoffset;
  info["0"].bottomLeftX = startX;
  info["0"].bottomLeftY = startY + data.size;
  info["0"].bottomRightX = startX + data.fontoffset;
  info["0"].bottomRightY = startY + data.size - data.fontoffset;

  //1
  info["1"].topLeftX = startX;
  info["1"].topLeftY = startY - data.fontGap;
  info["1"].topRightX = startX + data.size;
  info["1"].topRightY = startY - data.fontGap;
  info["1"].bottomLeftX = startX + data.fontoffset;
  info["1"].bottomLeftY = startY + data.fontoffset - data.fontGap;
  info["1"].bottomRightX = startX + data.size - data.fontoffset;
  info["1"].bottomRightY = startY + data.fontoffset - data.fontGap;

  //2
  info["2"].topLeftX = startX + data.size - data.fontoffset;
  info["2"].topLeftY = startY + data.fontoffset;
  info["2"].topRightX = startX + data.size;
  info["2"].topRightY = startY;
  info["2"].bottomLeftX = startX + data.size - data.fontoffset;
  info["2"].bottomLeftY = startY + data.size - data.fontoffset;
  info["2"].bottomRightX = startX + data.size;
  info["2"].bottomRightY = startY + data.size;

  //3
  info["3"].topLeftX = startX + data.size - data.fontoffset;
  info["3"].topLeftY = startY + data.size + 2 * data.fontGap + data.fontoffset;
  info["3"].topRightX = startX + data.size;
  info["3"].topRightY = startY + data.size + 2 * data.fontGap;
  info["3"].bottomLeftX = startX + data.size - data.fontoffset;
  info["3"].bottomLeftY = startY + 2 * data.size + 2 * data.fontGap - data.fontoffset;
  info["3"].bottomRightX = startX + data.size;
  info["3"].bottomRightY = startY + 2 * data.size + 2 * data.fontGap;

  //4
  info["4"].topLeftX = startX + data.fontoffset;
  info["4"].topLeftY = startY + 2 * data.size + 3 * data.fontGap - data.fontoffset;
  info["4"].topRightX = startX + data.size - data.fontoffset;
  info["4"].topRightY = startY + 2 * data.size + 3 * data.fontGap - data.fontoffset;
  info["4"].bottomLeftX = startX;
  info["4"].bottomLeftY = startY + 2 * data.size + 3 * data.fontGap;
  info["4"].bottomRightX = startX + data.size;
  info["4"].bottomRightY = startY + 2 * data.size + 3 * data.fontGap;

  //5
  info["5"].topLeftX = startX;
  info["5"].topLeftY = startY + data.size + 2 * data.fontGap;
  info["5"].topRightX = startX + data.fontoffset;
  info["5"].topRightY = startY + data.size + 2 * data.fontGap + data.fontoffset;
  info["5"].bottomLeftX = startX;
  info["5"].bottomLeftY = startY + 2 * data.size + 2 * data.fontGap;
  info["5"].bottomRightX = startX + data.fontoffset;
  info["5"].bottomRightY = startY + 2 * data.size + 2 * data.fontGap - data.fontoffset;

  //6
  info["6"].topLeftX = startX + data.fontoffset / 2;
  info["6"].topLeftY = startY + data.size - data.fontoffset / 2 + data.fontGap;
  info["6"].topRightX = startX + data.size - data.fontoffset / 2;
  info["6"].topRightY = startY + data.size - data.fontoffset / 2 + data.fontGap;
  info["6"].bottomLeftX = startX + data.fontoffset / 2;
  info["6"].bottomLeftY = startY + data.fontoffset / 2 + data.size + data.fontGap;
  info["6"].bottomRightX = startX + data.size - data.fontoffset / 2;
  info["6"].bottomRightY = startY + data.size + data.fontGap + data.fontoffset / 2;
  info["6"].centerLeftX = startX;
  info["6"].centerLeftY = startY + data.size + data.fontGap;
  info["6"].centerRightX = startX + data.size;
  info["6"].centerRightY = startY + data.size + data.fontGap;

  for (var x in datas) {
    if (datas[x] == "1") {
      data.ctx.setFillStyle(data.color);
    } else {
      data.ctx.setFillStyle("#E6E6E6");
    }

    data.ctx.beginPath();
    if (x == 6) {
      data.ctx.moveTo(info[x].centerLeftX, info[x].centerLeftY);
      data.ctx.lineTo(info[x].topLeftX, info[x].topLeftY);
      data.ctx.lineTo(info[x].topRightX, info[x].topRightY);
      data.ctx.lineTo(info[x].centerRightX, info[x].centerRightY);
      data.ctx.lineTo(info[x].bottomRightX, info[x].bottomRightY);
      data.ctx.lineTo(info[x].bottomLeftX, info[x].bottomLeftY);
      data.ctx.lineTo(info[x].centerLeftX, info[x].centerLeftY);
    } else {
      data.ctx.moveTo(info[x].topLeftX, info[x].topLeftY);
      data.ctx.lineTo(info[x].topRightX, info[x].topRightY);
      data.ctx.lineTo(info[x].bottomRightX, info[x].bottomRightY);
      data.ctx.lineTo(info[x].bottomLeftX, info[x].bottomLeftY);
      data.ctx.lineTo(info[x].topLeftX, info[x].topLeftY);
    }
    data.ctx.fill();
  }
}
mxDigital.prototype.setValue = function (value) { 
  data.value = value;
  data.length = (value + "").length
  this.invalidate(); 
} 
mxDigital.prototype.setBold = function (value) {
  data.fontoffset = value; 
  this.invalidate(); 
} 
mxDigital.prototype.invalidate = function(){
  data.pointwidth = 0;
  data.pointNumber = 0;
  for (var i = 0; i < data.length; i++) {
    //先計算開始畫圖的座標  
    var startX = 0;
  
    if (data.pointwidth == 0) {
      startX = data.width / 2 - data.allFontlength / 2 + (data.size + data.fontSpace) * i + data.pointwidth;
    } else {
      startX = data.width / 2 - data.allFontlength / 2 + (data.size + data.fontSpace) * (i - data.pointNumber) + data.pointwidth;
    }

    var startY = data.height / 2 - data.size;

    let charnumber = (data.value + "").charAt(i);

    switch (charnumber) {
      case "0": {
        drawText(["1", "1", "1", "1", "1", "1", "0"], startX, startY);
      }
        break;
      case "1": {
        drawText(["0", "0", "1", "1", "0", "0", "0"], startX, startY);
      }
        break;
      case "2": {
        drawText(["0", "1", "1", "0", "1", "1", "1"], startX, startY);
      }
        break;
      case "3": {
        drawText(["0", "1", "1", "1", "1", "0", "1"], startX, startY);
      }
        break;
      case "4": {
        drawText(["1", "0", "1", "1", "0", "0", "1"], startX, startY);
      }
        break;
      case "5": {
        drawText(["1", "1", "0", "1", "1", "0", "1"], startX, startY);
      }
        break;
      case "6": {
        drawText(["1", "1", "0", "1", "1", "1", "1"], startX, startY);
      }
        break;
      case "7": {
        drawText(["0", "1", "1", "1", "0", "0", "0"], startX, startY);
      }
        break;
      case "8": {
        drawText(["1", "1", "1", "1", "1", "1", "1"], startX, startY);
      }
        break;
      case "9": {
        drawText(["1", "1", "1", "1", "1", "0", "1"], startX, startY);
      }
        break;
      case "-": {
        drawText(["0", "0", "0", "0", "0", "0", "1"], startX, startY);
      }
        break;
      case ".": {
        drawPoint(startX, startY);
        data.pointNumber++;
        data.pointwidth = (data.fontSpace + data.pointsize) * data.pointNumber;
      }
        break;
      case ":": {
        drawDoublePoint(startX, startY);
        data.pointNumber++;
        data.pointwidth = (data.fontSpace + data.pointsize) * data.pointNumber;
      }
        break;
    }
  }
  data.ctx.draw();
}
 
module.exports = mxDigital;
 

我已上傳到我的github了，覺得可以的兄弟還是給個start，多謝支援，總有天我也會變成超級大佬的，O(∩_∩)O哈哈~

歡迎檢視，點這裡去github