直接上代码
Page({ /**
* 渲染文字
*
* @param {Object} obj
*/
drawText: function (obj) { console.log('渲染文字') this.ctx.save(); this.ctx.setFillStyle(obj.color); this.ctx.setFontSize(obj.size); this.ctx.setTextAlign(obj.align); this.ctx.setTextBaseline(obj.baseline); if (obj.bold) { console.log('字体加粗') this.ctx.fillText(obj.text, obj.x, obj.y - 0.5); this.ctx.fillText(obj.text, obj.x - 0.5, obj.y);
} this.ctx.fillText(obj.text, obj.x, obj.y); if (obj.bold) { this.ctx.fillText(obj.text, obj.x, obj.y + 0.5); this.ctx.fillText(obj.text, obj.x + 0.5, obj.y);
} this.ctx.restore();
}, /**
* 文本换行
*
* @param {Object} obj
*/
textWrap: function (obj) { console.log('文本换行') var td = Math.ceil(obj.width / (obj.size)); var tr = Math.ceil(obj.text.length / td); for (var i = 0; i < tr; i++) { var txt = { x: obj.x, y: obj.y + (i * obj.height), color: obj.color, size: obj.size, align: obj.align, baseline: obj.baseline, text: obj.text.substring(i * td, (i + 1) * td), bold: obj.bold
}; if (i < obj.line) { if (i == obj.line-1){
txt.text = txt.text.substring(0, txt.text.length - 3) +'......';
} this.drawText(txt);
}
}
},
})参数说明
drawText：
let title = { x: 40, y: 524, color: '#333333', size: 32, align: 'left', baseline: 'top', text: '哈哈哈哈，加粗', bold: true};this.drawText(title);| 参数 | 类型 | 说明 |
|---|---|---|
| x | Number | 绘制文本的左上角x坐标位置 |
| y | Number | 绘制文本的左上角y坐标位置 |
| color | Color | 字体的颜色 |
| size | Number | 字体的字号 |
| align | String | 文字的对齐，可选值 'left'、'center'、'right' |
| baseline | String | 设置文字的水平对齐，可选值 'top'、'bottom'、'middle'、'normal' |
| text | String | 在画布上绘制被填充的文本。 |
| bold | Boolean | 是否加粗 |
textWrap:
let details = { x: 40, y: 576, width: 520, height: 40, line: 2, color: '#666666', size: 24, align: 'left', baseline: 'top', text: '新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，给你的项目起一个好听的名字。', bold: false}this.drawText(title);| 参数 | 类型 | 说明 |
|---|---|---|
| x | Number | 绘制文本的左上角x坐标位置 |
| y | Number | 绘制文本的左上角y坐标位置 |
| width | Number | 文本区域宽度 |
| height | Number | 文本行高 |
| line | Number | 最多显示几行 |
| color | Color | 字体的颜色 |
| size | Number | 字体的字号 |
| align | String | 文字的对齐，可选值 'left'、'center'、'right' |
| baseline | String | 设置文字的水平对齐，可选值 'top'、'bottom'、'middle'、'normal' |
| text | String | 在画布上绘制被填充的文本。 |
| bold | Boolean | 是否加粗 |
效果
生成图片效果
注意，以上是简单的实现，所以如果有英文会计算不精确，解决方法如下：
优化原理：通过基础库 1.9.90 开始支持的measureText接口返回的文本宽度，把每个字符宽度不断累加，精确计算在哪个位置应该换行去实现这个功能。
/**
* 获取文本折行
* @param {Object} obj
* @return {Array} arrTr
*/getTextLine: function(obj){ this.ctx.setFontSize(obj.size); let arrText = obj.text.split(''); let line = ''; let arrTr = []; for (let i = 0; i < arrText.length; i++) { var testLine = line + arrText[i]; var metrics = this.ctx.measureText(testLine); var width = metrics.width; if (width > obj.width && i > 0) {
arrTr.push(line);
line = arrText[i];
} else {
line = testLine;
} if (i == arrText.length - 1) {
arrTr.push(line);
}
} return arrTr;
},| 参数 | 类型 | 说明 |
|---|---|---|
| width | Number | 文本区域宽度 |
| size | Number | 字体的字号 |
| text | String | 在画布上绘制被填充的文本。 |
之后，textWrap方法改为：
/**
* 文本换行
*
* @param {Object} obj
*/textWrap: function (obj) { console.log('文本换行') let tr = this.getTextLine(obj); for (let i = 0; i < tr.length; i++) { if (i < obj.line){ let txt = { x: obj.x, y: obj.y + (i * obj.height), color: obj.color, size: obj.size, align: obj.align, baseline: obj.baseline, text: tr[i], bold: obj.bold
}; if (i == obj.line - 1) {
txt.text = txt.text.substring(0, txt.text.length - 3) + '......';
} this.drawText(txt);
}
}
},效果
有英文字母生成图片效果
注：在开发工具截取圆形会失效，这张是开发者工具生成的，第一张是真机生成的。
优化前后对比
优化前后对比
补充，字体加粗
基础库 1.9.90 开始支持设置字体样式 canvasContext.font
canvasContext.font = value
value 支持的属性有：
| 属性 | 说明 |
|---|---|
| style | 字体样式。仅支持 italic, oblique, normal |
| weight | 字体粗细。仅支持 normal, bold |
| size | 字体大小 |
| family | 字体族名。注意确认各平台所支持的字体 |
加粗如果是不需要兼容的话直接用这个属性就好了，如果需要兼容低版本库，就用重复渲染的方式，希望小程序后续支持多行文本换行吧~
优化待续...
作者：不二很纯洁
链接：https://www.jianshu.com/p/8cadcd731c9f