首页 » SEO优化 » php画布文字换行技巧_Canvas画布字数超出换行笔记

php画布文字换行技巧_Canvas画布字数超出换行笔记

访客 2024-12-19 0

扫一扫用手机浏览

文章目录 [+]

let zoom = getSystem.windowWidth / 750 1; // 画布缩放比例赋值

let context = wx.createCanvasContext('outboundOrderCanvas');

php画布文字换行技巧_Canvas画布字数超出换行笔记

let currGoodsName = '货品名称:' + 须要展示的文本内容; // 这是要绘制的货品名称文本

php画布文字换行技巧_Canvas画布字数超出换行笔记
(图片来自网络侵删)

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();

标签:

相关文章