小程序分享海報的坑

前情提要

UI小哥給了一張UI圖，讓我實現小程序的分享海報

踩坑以下：

1. canvas繪製文字自動換行
2. canvas繪製文字，首行縮進
3. canvas剪切圓形頭像

1、canvas 繪製文字，自動換行

由於canvas.fillText繪製文字是沒用自動換行的功能的，因此須要本身封裝個函數來實現。

canvas有個APIctx.measureText(string str).width能夠獲取字符串的像素長度

當一行文字的像素長度超過畫布的長度時，就能夠另起一行從新繪製文字

/* lineWidth:一行文字的總長度 str:是要寫入的字符串 initX:初始時，文字距離畫布邊緣的距離 canvasWidth:畫布的寬度 lineHeight:是行高 */
let lineWidth = 0;
for(let i=0;i<str.length;i++){
    lineWidth += ctx.measureText(str[i]).width;//每次增長一個字符的像素長度
    if(lineWidth>canvasWidth-2*initX){
        //減去兩個initX是想在文字兩邊都有相同距離的空白
        ctx,fillText(str.substr(0,i),initX,initY);
        initY+=lineHeight;
        str = str.str.substr(i);
        i = -i;
        lineWidth;
	}
    //若是繪製到字符串的末尾了，還沒超過畫布的寬度
    if(i==str.length-1){
        ctx.fillText(str.substr(0,i+1),initX,initY);
    }
}
複製代碼

2、canvas首行縮進

由於canvas沒有首行縮進的屬性，只能是，繪製的時候，向右偏移兩個字符的長度

/* indent:布爾值，是否縮進 indentWidth:縮進的像素寬度 */
let indent = true;
let indentWidth = 0;
for(let i=0;i<str.length;i++){
    lineWidth += ctx.measureText(str[i]).width;
    if(indent && i==1){
        indentWidth = lineWidth;
    }
    if(indent && lineWidth>canvasWidth-2*initX-indentWidth){
        ctx.fillText(str.substr(0,i),initX+indentWidth,initY);
        initY+=lineHeight;
        lineWidth=0;
        indent = false;
        str = str.substr(i);
        i =-1;
    }
}
複製代碼

小總結，將自動換行和首行縮進，封裝成函數以下

/* ctx：wx.createCanvasContext獲取的畫布上下文 initX:距離畫布左邊緣的距離 initY:距離畫布上部的距離 str:要繪製的字符串 lineHeight:行高 indent:布爾值，是否要首行縮進 */
canvasTextAutoLine(ctx,canvasWidth,str,initX,initY,lineHeight,indent=false){
    let lineWidth =  0;
    let indentWidth=0;
    for(let i=0;i<str.length;i++){
        lineWidth += ctx.measureText(str[i]).width;
        if(indent && i==1){
            indentWidth = lineWidth;
        }
        if(indent && lineWidth>canvasWidth-2*initX-indentWidth){
            ctx.fillText(str.substr(0,i),initX+indentWidth,initY);
            initY+=lineHeight;
            lineWidth=0;
            indent = false;
            str = str.substr(i);
            i =-1; //下次循環i會加1,因此下次循環就是1
        }
        if(lineWidth>canvasWidth-2*initX){
            ctx.fillText(str.substr(0,i),initX,initY);
            initY+=lineHeight;
            str=str.substr(i);
            i=-1;
            lineWidth=0; 
        }
        if(i==str.length-1){
            ctx.fillText(str.substr(0,i+1),initX,initY);
        }
    }
    return initY;
}
複製代碼

3、canvas剪切出圓形的頭像

canvas的APIctx.clip()能夠剪切圖形，使用以下

//1. 在使用clip()要先將以前繪製的圖形保存
ctx.save();
//2. 繪製你要剪切的圖形
ctx.arc(25,25,25,0,Math.PI*2);
//3. 剪切
ctx.clip();
//4. 在剪切的範圍內繪製圖形，超過這個範圍的不顯示
ctx.drawImage(headImg,0,0,25,25);
//5. 繪製完後，釋放以前保存的圖形
ctx.restore();
複製代碼

結語

做者：胡志武

時間：2019/7/17

本人大二，想找個前端實習生的工做。求職中。。。