let zoom = getSystem.windowWidth / 750 1; // 画布缩放比例赋值
let context = wx.createCanvasContext('outboundOrderCanvas');
let currGoodsName = '货品名称:' + 须要展示的文本内容; // 这是要绘制的货品名称文本

let textSplitArray = currGoodsName.split(""); // 这个方法是将一个字符串分割成字符串数组,一个字便是一个字符,不分中英文
let tempStr = ""; // 临时字符
let newRowArr = []; // 新行文本数组
// 循环把分割的货品名称文本字符,进行拼接换行利用
for (var i = 0; i < textSplitArray.length; i++) {
// 当文本的宽度 < 280 时,拼接分割后天生的字符数组中的字符,280宽度,可根据项目自定
// 把稳:此处判断的宽度比较笔墨的宽度要小,如与笔墨宽度一样的话,会造成字符挤压,字号会变小 。context.measureText 检测字体宽度。
if (context.measureText(tempStr).width < 280zoom) {
tempStr += textSplitArray[i]; // 拼接每行要展示的字符
} else {
// 当文本的宽度 > 280 时,把已拼接的第一行字符插入新行文本数组中,临时字符重置为空,连续第二行笔墨宽度<280时的字符拼接功能,以此类推第3行、第4行...
i--; // 这里添加i--,防止字符丢失
newRowArr.push(tempStr); // 达到一行时,每行字符插入新行文本数组中,成为新行文本数组中的一个字符串
tempStr = ""; // 临时笔墨置空,为下一行笔墨字符拼接做准备
}
}
newRowArr.push(tempStr); // 插入末了一行文本字符串,此时原文本字符以每行字符串形
利用:
// 画布白色背景
context.beginPath(); // 开始创建一个路径
context.save(); // 保存绘图
context.setFillStyle('#ffffff'); // 添补背景色
context.fillRect(0, 0, 514 zoom, 630 zoom); // 添补背景起始位置、宽高
context.restore();
// 画布展示内容
context.setTextAlign('left'); // 设置笔墨左对齐
context.setFillStyle('#040404'); // 字体颜色
context.setFontSize(28 zoom); // 字号
// 每行笔墨与上个笔墨的间距:字号28 + 上间距18 = 46
// 获取第2个标题笔墨(如:货品数量)的y轴位置 = 货品名称文本所有行数(是新行文本数组newRowArr的长度) 笔墨之间的上间距46 + 初始笔墨的y轴高度
let nameEndHeight = newRowArr.length 46 + 98;
let qrcodeStartHeight = nameEndHeight; // 小程序码图片的Y轴位置,默认值为第2个标题笔墨的Y轴位置
// 当货品名称文本行数为1行、2行时,小程序码图片y轴高度赋值,避免行数高/低影响小程序码图片位置不一的情形
if(newRowArr.length == 1) {
qrcodeStartHeight = qrcodeStartHeight + 92;
} else if (newRowArr.length == 2) {
qrcodeStartHeight = qrcodeStartHeight + 46;
}
// 自动换行后,打算设置后面每行笔墨的开始展示位置
// console.log("98 zoom",98 zoom);
for (var i = 0; i < newRowArr.length; i++) {
context.fillText(newRowArr[i], 68 zoom, (98 + i 46) zoom, 380 zoom); // 笔墨x轴、y轴位置和须要绘制的最大宽度 - 如有自适应压缩比例要加上
}
// 当前笔墨的y轴位置打算:上个笔墨Y轴的位置+46(字号28+上间距18=46)
context.fillText('货品编号:' +货品编号内容, 68 zoom, nameEndHeight zoom); // 由于第一行笔墨自动换行的缘故原由,第二行笔墨的y轴位置 = 换行的新文本数组的长笔墨之间的上间距+初始笔墨y轴的高度
context.fillText('上架韶光:' + 上架韶光 68 zoom, (nameEndHeight + 46) zoom); // 从第三行开始及后面行数笔墨的y轴位置要+笔墨之间的上间距,以此类推1,2,3等来打算,第三行1与否不影响
context.drawImage(res.path, 147 zoom, (qrcodeStartHeight + 46 2) zoom, 220 zoom, 220 zoom); // 小程序码路径、起始位置、宽高
context.stroke();