微信小程序开发: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 条评论
登录 后参与评论

相关文章

来自专栏黑泽君的专栏

day01_html学习笔记

871
来自专栏吴小龙同學

Android 画布Canvas

写完 Android 画笔Paint,自然少不了Canvas画布,本文延续上篇风格,一一来过Canvas API。 绘制方法 以drawXXX为主的绘制方...

49310
来自专栏前端小叙

js焦点轮播图

汇集网上焦点轮播图的实现方式,自己试了下,不过鼠标悬浮停止动画和鼠标离开动画播放好像没生效,不太明白,最后两行代码中,为什么可以直接写stop和play。不用加...

45613
来自专栏Youngxj

简单实用的Canvas进度环返回按钮

2106
来自专栏分享达人秀

TextView属性和方法大全

前面简单学习了一些Android UI的一些基础知识,那么接下来我们一起来详细学习Android的UI界面基本组件。 一、认识TextView 我们知道前面学习...

2095
来自专栏Android干货

安卓开发小效果--走马灯

26212
来自专栏编程直播室

Canvas的HelloWorld文本的样式文本的测量总结

2326
来自专栏流浪猫的golang

go Http Post 发送文件流

水滴石穿。这里把Go Http Post 参数的函数也贴了处理主要对比两者不同之处。

623
来自专栏Android常用基础

自定义View(九)-View的工作原理- View的layout()和draw()

上一节我们将View的测量流程理的差不多了,这篇我们来看下View的剩下的2大流程layout(布局)和draw(绘制)。相对测量来说,布局与绘制就简单了许多,...

952
来自专栏前端杂货铺

响应式web布局中iframe的自适应

困境           在响应式布局中,我们应该小心对待iframe元素,iframe元素的width和height属性设置了其宽度和高度,但是当包含块的宽度...

35212

扫码关注云+社区