微信小程序之canvas

學習微信canvas筆記，封裝了一些實用小方法，但願能幫到你們。

初始化canvas

initCanvas(){
  let ctx = wx.createCanvasContext('canvas-id',this);  //組件內須要傳this
  this.data.ctx = ctx;
  /*  
   * 繪製操做/引入函數
  */
  console.log('初始化canvas');
  ctx.draw();
},
複製代碼

移動端自適應 (iphone7設計圖 750*1334)

rem(px){
    let width = wx.getSystemInfoSync().windowWidth;
    let rem = width/375 * px;
    return rem;
}
複製代碼

繪製矩形（是否填充）

/*  
 * opt.x / opt.y : x,y是矩形的起點;
 * opt.w / opt.h : w,h是矩形的寬高;
 * opt.color : 顏色 -- #ffffff
 * opt.opacity : 透明度 -- 1
 * opt.fill : 是否填充 -- false
*/
drawRect(opt={}){
      opt.color = opt.color || '#ffffff';
      let ctx = this.data.ctx; 
      ctx.save();
      ctx.setGlobalAlpha(opt.opacity || 1); //設置透明度
      ctx.rect(opt.x,opt.y,opt.w,opt.h);
      if( opt.fill ){
        ctx.setFillStyle( opt.color );
        ctx.fill()
      }else{
        ctx.setStrokeStyle( opt.color )
        ctx.stroke()
      }
      ctx.restore(); //恢復以前保存的繪圖上下文
},
複製代碼

繪製換行文字

/*  
 * opt : Object
 * opt.text / opt.x / opt.y 繪製文字的內容和座標
 * opt.align : 用於設置文字的對齊 -- left（可選值 'left'、'center'、'right'）
 * opt.base : 用於設置文字的水平對齊 -- top (可選值 'top'、'bottom'、'middle'、'normal')
 * opt.color : 字體顏色 -- #333333
 * opt.size : 字體大小 -- 16
 * opt.maxWidth : 文字最大寬度
 * opt.lineHeight : 行高 -- 1
 * opt.opacity : 透明度 -- 1
 * opt.isParagraph : 段落模式 -- false 
 * 擴展中...
 * return : 文本的高度 = 行數*行高*字體大小 
*/
drawWrapText( opt={} ){
  console.log(opt)
  let ctx = this.data.ctx;
  ctx.save();
  ctx.beginPath(); //開始繪製
  ctx.setFillStyle(opt.color || '#333333' );
  opt.x = opt.x || 0;
  opt.y = opt.y || 0;
  opt.size = opt.size || 16;
  ctx.setFontSize( opt.size );
  ctx.setTextAlign(opt.align || 'left' );
  ctx.setTextBaseline(opt.base || 'top' );
  ctx.setGlobalAlpha(opt.opacity || 1);
  let isParagraph = opt.isParagraph || false , //是否開始段落模式
      _x = isParagraph ? opt.x + opt.size * 2 : opt.x , //文本首行x偏移量
      line_count = 0 , //行數 
      lineHeight = opt.lineHeight || 1; //行高
  const metrics = ctx.measureText(opt.text); //測量文本尺寸信息，目前僅返回文本寬度。同步接口。
  if( !opt.maxWidth || ( metrics.width <= opt.maxWidth ) ){
    ctx.fillText(opt.text, _x , opt.y ,opt.maxWidth || '');
    line_count++;
  }else {
    // 超過最大寬度，進行換行操做
    opt.text = opt.text.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g,""); // 去掉emoji
    let paragraphArr = opt.text.split("\n"); //拆分段落
    for( let i=0, len = paragraphArr.length; i < len; i++ ){
      let paragraph = paragraphArr[i],  //段落
          text = '', //繪製文字
          count = 0; //段落行數 ，臨時存儲
      for( let j=0, _len = paragraph.length; j < _len; j++ ){
        text += paragraph[j];
        let maxWidth = opt.maxWidth - (count==0? _x-opt.x : 0)
        if( ctx.measureText( text ).width >= maxWidth ){
          //換行
          ctx.fillText( text , count==0? _x : opt.x , opt.y + opt.size * lineHeight * line_count ,maxWidth);
          line_count++;
          count++;
          text = '';
        }
        if( j == _len -1 && text != '' ){
          ctx.fillText( text , opt.x , opt.y + opt.size * lineHeight * line_count ,maxWidth);
          line_count++;
          count++;
          text = '';
        }
      }
    }
  }
  ctx.closePath();
  ctx.restore(); //恢復以前保存的繪圖上下文
  console.log('文本的高度 = 行數*行高*字體大小 = ', line_count * lineHeight * opt.size )
  return line_count * lineHeight * opt.size;
},
複製代碼

圖片繪製（縮放裁剪/圓形）

/* 
 * 注意：圖片需用wx.getImageInfo()處理
 * opt : Object
 * opt.imageResource   所要繪製的圖片資源
 * opt.dx   圖像的左上角在目標canvas上 X 軸的位置
 * opt.dy   圖像的左上角在目標canvas上 Y 軸的位置
 * opt.dWidth   在目標畫布上繪製圖像的寬度，容許對繪製的圖像進行縮放
 * opt.dHeight  在目標畫布上繪製圖像的高度，容許對繪製的圖像進行縮放
 * opt.image  圖片信息 wx.getImageInfo()
 * opt.clip  縮放裁剪圖片
 * opt.align  clip爲true有效：縮放圖片位置  leftTop(左上默認)/center(居中)
 * opt.arc 圓形圖片
*/
drawImage( opt={} ){
  let ctx = this.data.ctx;
  ctx.save();
  ctx.beginPath(); //開始繪製
  if( opt.arc || opt.clip ){
    if(opt.arc){
      // 畫圓 x,y,r 
      ctx.arc(opt.dWidth / 2 + opt.dx, opt.dHeight / 2 + opt.dy, opt.dWidth / 2, 0, Math.PI * 2, false);
    }else if( opt.clip ){
      // 縮放裁剪圖片 
      ctx.rect(opt.dx,opt.dy,opt.dWidth,opt.dHeight);
      // dw/w = dh/h -> dw = dh/h*w 
      //                dh = dw/w*h 
      if( opt.image.width/opt.dWidth <= opt.image.height/opt.dHeight ){
        let h = opt.dWidth/opt.image.width*opt.image.height;
        if( opt.align == 'center' ){
          opt.dy = -( h - opt.dHeight )/2 + opt.dy;
        }
        opt.dHeight = h
        console.log(1,'width <= height',opt.dHeight);
      }else if( opt.image.width/opt.dWidth > opt.image.height/opt.dHeight ){
        let w = opt.dHeight/opt.image.height*opt.image.width;
        if( opt.align == 'center' ){
          opt.dx = -( w - opt.dWidth )/2 + opt.dx;
        }
        opt.dWidth = w;
        console.log(2,'height > width',opt.dHeight);
      }
    }
    ctx.clip();//剪切某個區域，以後的繪圖都會被限制在剪切的區域內，ctx.restore()恢復
  }
  ctx.drawImage(opt.imageResource,opt.dx, opt.dy, opt.dWidth, opt.dHeight,opt.sx, opt.sy, opt.sWidth, opt.sHeight);// 推動去圖片，必須是https圖片
  ctx.restore(); //恢復以前保存的繪圖上下文
},
複製代碼

未完待續...

如需轉載，煩請註明出處：juejin.im/post/5b9423…