canvas文字首行縮排和換行處理

2021-09-12 18:06:58 字數 1304 閱讀 1626

/**

* * @param ctx 2d上下文物件

* @param text 繪製文字

* @param x 座標軸x位置

* @param y 座標軸y位置

* @param options 包含 maxwidth 最大寬度,lineheight 文字行高,row 限制行數,textindent 首行縮排,fontsize 文字大小

*/ function textellipsis(ctx, text, x, y, options)

let defaultopt = ;

let params = object.assign({}, defaultopt, options);

// 分割文字

let textarr = text.split('');

// 文字最終佔據高度

let textheight = 0;

// 每行顯示的文字

let textofline = '';

// 控制行數

let limitrow = params.row;

let rowcount = 0;

// 迴圈分割的文字陣列

for (let i = 0; i < textarr.length; i++) px "microsoft yahei"`;

let width = ctx.measuretext(measuretext).width;

// 首行需要縮排滿足條件

let conditionindent = (params.textindent && rowcount === 0);

let measurewidth = conditionindent ? (width + params.textindent) : width;

// 大於限制寬度且已繪行數不是最後一行,則寫文字

if (measurewidth > params.maxwidth && i > 0 && rowcount !== limitrow)

} else

}if (rowcount !== limitrow)

// 計算文字總高度

let textheightval = rowcount < limitrow ? (textheight + params.lineheight) : textheight;

return textheightval;

}

結果

css文字屬性 首行縮排

css文字屬性 text align center right justify 兩邊對齊 對齊 text decoration line through underline overline 下劃線 text transform uppercase lowercase capitalize 文字轉換...

TextView首行縮排

方法一 settext u3000 u3000 xx 半形 u0020 全形 u3000 方法二 這種方式不同解析度會有問題 settext xx 方法三 是從網上大神看到的,就是首行多寫兩個字,但是顯示時,這兩個字要進行隱藏 spannablestringbuilder span new span...

CSS 首行縮排兩個文字

總是在前面加上8個 因為過去大家對css的概念也不程式設計客棧太熟悉,也不太重視,這種方法實現雖然比較直接,但是文字多的時候會有很多 充斥在 中,如果再有些換行 那 顯著比較zlsycjzopm亂,現在大家開始主動了解css,學習css,你會發現這個問題很容易解決,只需要在相應的位置加入 複製 如下...