介绍 & lt; canvas canvas-id=癿yCanvas",/在 canvas {
,宽度:99%;
,身高:600 rpx;
} 页面({
,数据:{
},
,onLoad: function (选项),{
const 才能;context =, wx.createCanvasContext (& # 39; myCanvas& # 39;)
var 才能;text =, & # 39;这是一段文字用于文本自动换行文本长度自行设置欢迎大家指出缺陷& # 39;;//这是要绘制的文本
var 才能;chr =text.split(“;”);//这个方法是将一个字符串分割成字符串数组
var 才能;temp =,““
var 才能;row =, [];
context.setFontSize才能(18)
context.setFillStyle才能(“# 000“)
for 才能;(var a =, 0;, a & lt;, chr.length;, + +), {
,,if (context.measureText(临时).width & lt;, 250), {
,,,temp +=,空空的[a];
,,}
,,else {
,,,,,,//这里添加了,,是为了防止字符丢失,效果图中有对比
,,,row.push(临时);
,,,temp =,““
,,}
,,}
row.push才能(临时),,//才能如果数组长度大于2,则截取前两个
if 才能;(row.length 祝辞,2),{
,,var rowCut =, row.slice (0, 2);
,,var rowPart =, rowCut [1];
,,var test =,““
,,var empty =, [];
,,for (var a =, 0;, a & lt;, rowPart.length;, + +), {
,,,if (context.measureText(测试).width & lt;, 220), {
,,,,test +=, rowPart [a];
,,,}
,,,else {
,,,,休息;
,,,}
,,}
,,empty.push(测试);
,,var group =,空[0],+,“……“//这里只显示两行,超出的用……表示
,,rowCut.splice(1,, 1,,集团);
,,row =, rowCut;
,,}
for 才能;(var b =, 0;, b & lt;, row.length;, b + +), {
,,context.fillText(行[b], 10日,30日,+,b *, 30岁,300);
,,}
context.draw才能(),,
}大敌;
})
这篇文章主要介绍微信小程序中帆布如何绘制文字实现自动换行,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
在使用微信小程序帆布绘制文字时,时常会遇到这样的问题:因为canvasContext。fillText参数为
我们只能设置文本的最大宽度,这就产生一定的了问题。如果我们绘制的文本长度不确定或者我们希望文本超出自动换行或者用省略号表示,光靠这个API是无法完成的。下面本人就讲下我在开发中是如何解决这个问题的。
1 wxml代码
, 2 wxs代码
3 js代码
4效果展示
添加了一个——和没有一个——的对比
以上是“微信小程序中帆布如何绘制文字实现自动换行”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
