微信小程序开发: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()

}

})

先这样吧。。。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

rem不是神农草,治不了移动端百病

有很多朋友一聊起做移动端重构,第一个问题就是用什么单位合适。%,还是rem?(如果你还不太了解rem是什么单位,可先前往CSS3的REM设置字体大小了解。) 然...

18210
来自专栏IMWeb前端团队

Canvas雾玻璃

本文作者:IMWeb rakuluo 原文出处:IMWeb社区 未经同意,禁止转载 Demo http://lumixraku.github.io/d...

1859
来自专栏Coco的专栏

【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

1417
来自专栏Coco的专栏

使用 position:sticky 实现粘性布局

1734
来自专栏iOS技术

移动端地图:屏幕边沿方向指示图标

在我们打游戏的时候,队友跑出我们的屏幕可视区域外时,经常会有一个头像图标在屏幕的边沿,并且起着指示队友方向的作用。

3299
来自专栏Coding迪斯尼

对Box2D的物理世界进行图像美化和关卡选择设计

我们用Box2D绘制了很多几何图形,例如圆形,矩形,复杂一点就是两个矩形交叉的合在一起,中间再加个圆形。显然这种界面“太素”了,一个丰富多彩,五彩斑斓的游戏世界...

511
来自专栏進无尽的文章

实践-小效果 III

大家都知道这是通过 CAShapeLayer 和 CABasicAnimation 结合起来实现的,可是其中还是有需要注意的地方,实现的步骤大致如下:

862
来自专栏技术总结

iOS实用_可点击部分文字label

2918
来自专栏HT

电信网络拓扑图自动布局

在电信网络拓扑图中,很经常需要用到自动布局的功能,在大数据的层级关系中,通过手工一个一个摆放位置是不太现实的,工作量是相当大的,那么就有了自动布局这个概念,来解...

2098
来自专栏生信宝典

一分钟绘制磷脂双分子层:AI零基础入门和基本图形绘制

Adobe illustrator是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件,是一款非常好的图片处理工具,简称AI。

1553

扫码关注云+社区