小程序canvas多行文本（可以兼容英文）

墨蓝 2022-12-13 09:53 8阅读 0赞

**效果图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70][]

**方法封装：**

/\*\*

\*【drawTxt】canvas 绘制多行文本

\*【TODO: 中英混排且考虑单词截断...】

\* @param \{\*\} context 绘制上下文环境 【必传】

\* @param \{\*\} text 文本内容

\* @param \{\*\} broken 单词是否截断显示  【true  如果不考虑英文单词的完整性 适用于所有情况】 【false  考虑英文单词的完整性 仅适用于纯英文】

\* @param \{\*\} fillStyle 文本颜色

\* @param \{\*\} fontSize 文本大小

\* @param \{\*\} x 文本左上角x坐标

\* @param \{\*\} y 文本左上角y坐标

\* @param \{\*\} lineHeight 行高

\* @param \{\*\} maxWidth 最大宽度

\* @returns  此次绘制文本的高度 单位: px

\*/

drawTxt:function(\{context,...rest\}) \{

if (!context) throw Error('请传入绘制上下文环境context')

// 获取计算后的值

let \{ scale, text, fillStyle, broken, x, y, lineHeight, maxWidth, fontSize\} = \{...rest\}

// 设置字体样式

context.setTextAlign('left');

context.setTextBaseline('top');

context.setFillStyle(fillStyle);

context.setFontSize(fontSize);

// broken: true  如果不考虑英文单词的完整性 适用于所有情况

// broken: false  考虑英文单词的完整性 仅适用于纯英文

//【TODO: 中英混排且考虑单词截断...】

let splitChar = broken ? '' : ' ';

let arrText = text.split(splitChar);

let line = '';

let linesCount = 0;

for (var n = 0; n < arrText.length; n++) \{

let testLine = line + arrText\[n\] + splitChar

let testWidth = context.measureText(testLine).width

if (testWidth > maxWidth && n > 0) \{

// 一行已经绘制完成

linesCount++;

context.fillText(line, x, y);

line = arrText\[n\] + splitChar;

y += lineHeight;

\} else \{

// 一行还未绘制完成

line = testLine;

linesCount++;

context.fillText(line, x, y);

\},

**使用如下**

draw:function()\{

var that = this;

const ctx = wx.createCanvasContext('canvasCon');

ctx.setFontSize(32);

ctx.setFillStyle('\#333333');

ctx.fillText('title',100,100);//商品标题

var text = '@desc一个带参数的函数一个带参数的函数@desc一个带参数的函数 @desc 一个带参数的函数 @desc 一个带参数的函数 @desc 一个带参数的函数 @desc 一个带参数的函数@desc一个带参数的函数一个带参数的函数@desc一个带参数的函数 @desc 一个带参数的函数 @desc 一个带参数的函数 @desc 一个带参数的函数 @desc 一个带参数的函数';

that.drawTxt(\{

context:ctx,

text: text,

broken: true,

fillStyle: '\#ccc',

x: 0,

y: 0,

lineHeight: 20,

maxWidth: 600 / 750 \* wx.getSystemInfoSync().windowWidth,//px转rpx

fontSize: 14

\});

ctx.save();

ctx.draw(0, 0, 400, 400);

\},

参考文档：[https://blog.csdn.net/believeXin/article/details/88741107][https_blog.csdn.net_believeXin_article_details_88741107]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70]: /images/20221123/415d743af436431ab91f3c319cd7ee17.png
[https_blog.csdn.net_believeXin_article_details_88741107]: https://blog.csdn.net/believeXin/article/details/88741107