微信 html 字体自动换行,详解微信小程序-canvas绘制文字实现自动换行

在使用微信小程序canvas绘制文字时，时常会遇到这样的问题：因为canvascontext.filltext参数为

我们只能设置文本的最大宽度，这就产生一定的了问题。如果我们绘制的文本长度不确定或者我们希望文本超出自动换行或者用省略号表示，光靠这个api是无法完成的。下面本人就讲下我在开发中是如何解决这个问题的。

1 wxml代码

2 wxss代码

canvas {

width: 99%;

height: 600rpx;

}

3 js代码

page({

data: {

onload: function (options) {

const context = wx.createcanvascontext('mycanvas')

var text = '这是一段文字用于文本自动换行文本长度自行设置欢迎大家指出缺陷';//这是要绘制的文本

var chr =text.split("");//这个方法是将一个字符串分割成字符串数组

var temp = "";

var row = [];

context.setfontsize(18)

context.setfillstyle("#000")

for (var a = 0; a < chr.length; a++) {

if (context.measuretext(temp).width < 250) {

temp += chr[a];

}

else {

a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比

row.push(temp);

temp = "";

}

row.push(temp);

//如果数组长度大于2 则截取前两个

if (row.length > 2) {

var rowcut = row.slice(0, 2);

var rowpart = rowcut[1];

var test = "";

var empty = [];

for (var a = 0; a < rowpart.length; a++) {

if (context.measuretext(test).width < 220) {

test += rowpart[a];

}

else {

break;

}

empty.push(test);

var group = empty[0] + "..."//这里只显示两行，超出的用...表示

rowcut.splice(1, 1, group);

row = rowcut;

}

for (var b = 0; b < row.length; b++) {

context.filltext(row[b], 10, 30 + b * 30, 300);

}

context.draw()

}

})

4 效果展示

添加了a- -和没有a- -的对比

以上就是换行的方法，如果想设置为不换行超出用省略号显示，也可参照上面的方法，将数组截取为一行再设置，道理是一样的。

以上所述是小编给大家介绍的微信小程序canvas绘制文字实现自动换行详解整合，希望对大家有所帮助

微信 html 字体自动换行,详解微信小程序-canvas绘制文字实现自动换行相关推荐

微信小程序-canvas绘制文字实现自动换行
微信小程序-canvas绘制文字实现自动换行在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为我们只能设置文本的最大宽度,这就产生 ...
微信小程序 canvas描绘文字图片生成图片并保存到本地
在实现这个功能时,遇到以下的问题: 1. canvas绘制文字的换行问题: 如果文字的长度大于你所定的宽度的话,文字会超出你所定宽度: 小程序的CanvasContext.fillText有一个max ...
小程序canvas绘制商品海报实现分享朋友圈
小程序canvas绘制商品海报实现分享朋友圈效果图: 实现步骤就是点击生成图片在canvas画布中画出一张海报然后保存在本地在imags标签中展示,此处尽可能的把canvas组件隐藏但是不能 ...
小程序canvas绘制微信头像
微信小程序canvas是不支持绘制网络图片的,所以逻辑就是先下载到本地,使用本地临时路径去绘制: // 查看是否授权wx.getSetting({success(res) {if (res.authS ...
小程序canvas绘制自定义分享图片并分享给好友
小程序的分享有自己的机制,在页面点击右上角,或者页面中的button 采用open-type=share方式也可以触发onShareAppMessage方法. 文档里面明确说明,分享的图片可以采用网络 ...
小程序Canvas绘制图片太大，自动闪退，安卓会有crash问题
2019独角兽企业重金招聘Python工程师标准>>> 问题说明: 目前小程序Canvas版本还有不少bug,性能较低. 对于图片太大使用ctx.drawImage(imgpath, ...
微信小程序详解(1 小程序账号注册和安装小程序开发软件)
介绍微信小程序其实就是微信里的以前的一个应用号,为了迎合市场的需求,能给微信里那些优秀的公众号提供更好的技术,让他们能给粉丝提供更好更优的服务.可以不用下载,不用安装,却能够实现APP的几乎所有功能 ...
把iconfront的资源放cdn访问_详解mpvue小程序中怎么引入iconfont字体图标
前言 iconfont阿里巴巴矢量图标库是我很喜欢的一个网站,可以下载/在线编辑/上传自己需要的矢量图标,也支持团队协作,那么在mpvue项目中如何引入呢? 将图标加入购物车搜索关键词可以是中文也可 ...
圆头像微信小程序绘图_小程序canvas绘制圆形微信头像
提示:canvas画布绘画图片的时候,图片不能是互联网图片,必需是本地图片才可以正常绘制. 第一步:获取客户受权,下载微信头像图片到本地.pleaseSign: function(event) { w ...

微信 html 字体自动换行,详解微信小程序-canvas绘制文字实现自动换行

微信 html 字体自动换行,详解微信小程序-canvas绘制文字实现自动换行相关推荐

最新文章

热门文章

微信 html 字体 自动换行,详解微信小程序-canvas绘制文字实现自动换行

微信 html 字体 自动换行,详解微信小程序-canvas绘制文字实现自动换行相关推荐

最新文章

热门文章

微信 html 字体自动换行,详解微信小程序-canvas绘制文字实现自动换行

微信 html 字体自动换行,详解微信小程序-canvas绘制文字实现自动换行相关推荐