小程式 canvas繪製多行文字多餘的省略號表示

2021-09-29 10:16:59 字數 851 閱讀 7569

下面這個方法是返回有幾行:

/**

* canvas繪圖相關,把文字轉化成只能行數,多餘顯示省略號

* ctx: 當前的canvas

* text: 文字

* contentwidth: 文字最大寬度

* linenumber: 顯示幾行

*/function transformcontenttomultilinetext(ctx, text, contentwidth, linenumber) else

} row.push(temp);

// 如果陣列長度大於2,則擷取前兩個

if (row.length > linenumber) else

}empty.push(test); // 處理後面加省略號

var group = empty[0] + '...'

rowcut.splice(linenumber - 1, 1, group);

row = rowcut;

} return row;

}

返回了有幾行以後,需要逐行繪製

var row = util.transformcontenttomultilinetext(ctx, text, contentwidth, 4);

var contenttexty = 0; // 這段文字起始的y位置

var leftspace = 0; // 這段文字起始的x位置

var textlineheight = 20; // 一行文字加一行行間距

for (var b = 0; b < row.length; b++)

微信小程式 canvas繪製多行文字(文字換行)

drawtxt canvas 繪製多行文字 todo 中英混排且考慮單詞截斷.param context 繪製上下文環境 必傳 param scale 縮放比 windowwidth 750 param text 文字內容 param broken 單詞是否截斷顯示 true 如果不考慮英文單詞的完...

使用DrawTextEx繪製多行文字

使用gidplus進行文字繪製時,大家經常需要把多行文字繪製在乙個矩形框中,通常採用的繪製介面是drawtext和drawtextex。這個兩個函式確實可以實現矩形框中的多行繪製,但是,它們都沒有辦法在一次繪製中定製文字行距。為了實現文字多行繪製的同時,可以定製行距,可以採用drawtextex方法...

Canvas 繪製文字

filltext text,x,y maxwidth 填充文字 stroketext text,x,y maxwidth 描邊文字 font font 10px sans serif 預設 text anchor start 預設,文字對齊界線開始的地方 左對齊指本地從左向右,右對齊指本地從右向左 ...