微信小程序开发：canvas 多行文字换行（二）

微信小程序开发中，canvas画出一篇文章，由于句子长短不一，画起来确实是费劲，查了不少资料，总结一下：

html部分：

<canvas id='secondCanvas' canvas-id='secondCanvas' style='width:{{414}}px;height:{{750}}px;'></canvas>

js部分：

function findBreakPoint(text, width, context) {

var min = 0;

var max = text.length - 1;

while (min <= max) {

var middle = Math.floor((min + max) / 2);

var middleWidth = context.measureText(text.substr(0, middle)).width;

var oneCharWiderThanMiddleWidth = context.measureText(text.substr(0, middle + 1)).width;

if (middleWidth <= width && oneCharWiderThanMiddleWidth > width) {

return middle;

}

if (middleWidth < width) {

min = middle + 1;

} else {

max = middle - 1;

}

}

return -1;

}

function breakLinesForCanvas(context, text, width, font) {

var result = [];

if (font) {

context.font = font;

}

var textArray = text.split('\r\n');

for (let i = 0; i < textArray.length; i++) {

let item = textArray[i];

var breakPoint = 0;

while ((breakPoint = findBreakPoint(item, width, context)) !== -1) {

result.push(item.substr(0, breakPoint));

item = item.substr(breakPoint);

}

if (item) {

result.push(item);

}

}

return result;

}

Page({

/**

* 页面的初始数据

*/

data: {

id: 0,

info: {}

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

var that = this

let info = {

"0": "标题标题标题标题标题标题标题标题",

"1": "内容内容内容内容内容内容内容内容内容内容内容",

"2": "我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是",

};

that.drawInit(info);

},

canvasIdErrorCallback: function (e) {

console.error(e.detail.errMsg)

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function (e) {},

/**

* 绘制图片

*/

drawInit(info){

var that = this

var res = wx.getSystemInfoSync()

var canvasWidth = res.windowWidth

// 获取canvas的的宽 自适应宽（设备宽/750) px

var Rpx = (canvasWidth / 375).toFixed(2)

//画布高度 -底部按钮高度

var canvasHeight = res.windowHeight - Rpx * 59

// 使用 wx.createContext 获取绘图上下文 context

var context = wx.createCanvasContext('secondCanvas')

//设置行高

var lineHeight = Rpx * 30

//左边距

var paddingLeft = Rpx * 20

//右边距

var paddingRight = Rpx * 20

//当前行高

var currentLineHeight = Rpx * 20

var result

for (var i in info){

result = breakLinesForCanvas(context, info[i] || '无内容', canvasWidth - paddingLeft - paddingRight, `${(Rpx * 16).toFixed(0)}px PingFangSC-Regular`)

//字体颜色

context.fillStyle = '#000000'

result.forEach(function (line, index) {

currentLineHeight += Rpx * 30

context.fillText(line, paddingLeft, currentLineHeight) // currentLineHeight 表示文字在整个页面的位置：currentLineHeight + 300 表示整体下移 300px

});

}

context.draw()

}

})

先这样吧。。。