微信小程序-canvas绘制文字实现自动换行
在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为
我们只能设置文本的最大宽度,这就产生一定的了问题。如果我们绘制的文本长度不确定或者我们希望文本超出自动换行或者用 ...我们只能设置文本的最大宽度,这就产生一定的了问题。如果我们绘制的文本长度不确定或者我们希望文本超出自动换行或者用省略号表示,光靠这个API是无法完成的。下面本人就讲下我在开发中是如何解决这个问题的..
1 wxml代码。
<canvas canvas-id="myCanvas" style="border: 1px solid;"/>
2 wxss代码
canvas {
width: %;
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()
context.setFillStyle("#000")
for (var a = ; a < chr.length; a++) {
if (context.measureText(temp).width < ) {
temp += chr[a];
}
else {
a--; //这里添加了a-- 是为了防止字符丢失,效果图中有对比
row.push(temp);
temp = "";
}
}
row.push(temp);
//如果数组长度大于2 则截取前两个
if (row.length > ) {
var rowCut = row.slice(, );
var rowPart = rowCut[];
var test = "";
var empty = [];
for (var a = ; a < rowPart.length; a++) {
if (context.measureText(test).width < ) {
test += rowPart[a];
}
else {
break;
}
}
empty.push(test);
var group = empty[] + "..."//这里只显示两行,超出的用...表示
rowCut.splice(, , group);
row = rowCut;
}
for (var b = ; b < row.length; b++) {
context.fillText(row[b], , + b * , );
}
context.draw()
}
})
以上就是换行的方法。
微信小程序-canvas绘制文字实现自动换行的更多相关文章
- 微信小程序 canvas 绘制圆形状
page({ // 绘制canvas drawCanvas:function(){ const ctx = wx.createCanvasContext('poster') // 画圆形二维码 thi ...
- 微信小程序 canvas 字体自动换行(支持换行符)
微信小程序 canvas 自动适配 自动换行,保存图片分享到朋友圈 https://github.com/richard1015/News 微信IDE演示代码https://developers.w ...
- 微信小程序--canvas画布实现图片的编辑
技术:微信小程序 概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...
- 微信小程序canvas生成并保存图片
---恢复内容开始--- 微信小程序canvas生成并保存图片,具体实现效果如下图 实现效果需要做以下几步工作 一.先获取用户屏幕大小,然后才能根据屏幕大小来定义canvas的大小 二.获取图 ...
- 技术博客--微信小程序canvas实现图片编辑
技术博客--微信小程序canvas实现图片编辑 我们的这个小程序不仅仅是想给用户提供一个保存和查找的平台,还希望能给用户一个展示自己创意的舞台,因此我们实现了图片的编辑部分.我们对对图片的编辑集成了很 ...
- 原创:WeZRender:微信小程序Canvas增强组件
WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...
- 在微信小程序中绘制图表(part2)
本期大纲 1.确定纵坐标的范围并绘制 2.根据真实数据绘制折线 相关阅读:在微信小程序中绘制图表(part1)在微信小程序中绘制图表(part3) 关注我的 github 项目 查看完整代码. 确定纵 ...
- 微信小程序开发语音识别文字教程
微信小程序开发语音识别文字教程 现在后台 添加插件 微信同声传译 然后app.json 加入插件 "plugins": { "WechatSI": { &quo ...
- 小程序canvas绘制纯色圆角区域 setdata数组某一项
小程序canvas绘制纯色圆角区域: //方法: roundRectPath:function(ctx, x, y, w, h, r) { ctx.beginPath(); ctx.moveTo(x ...
随机推荐
- day 35 线程
内容回顾 # 互斥锁 #在同一个进程中连续锁多次 #进程的数据共享 #进程之间可以共享数据 #提供共享数据的类是Manager #但是它提供的list|dict 这些数据类型 #针对+= -= *= ...
- python 基础———— 字符串常用的调用 (图2)
1. replace 2. join 3.split 4 rsplit 5. strip : 去除字符串左右两边特定(指定)的字符 7. rstrip : 去除右边特定(指定)的字符 8. l ...
- php中的问题整理
1.什么是 CSRF 攻击 ?XSS 攻击?如何防范? CSRF,跨站请求伪造,攻击方伪装用户身份发送请求从而窃取信息或者破坏系统.讲述基本原理:用户访问A网站登陆并生成了cookie,再访问B网站, ...
- 每日一练ACM
2019.04.15 第1000题:A+B Problem Problem DescriptionCalculate A + B. InputEach line will contain two in ...
- LOJ-10096(强连通+bfs)
题目链接:传送门 思路: 强连通缩点,重建图,然后广搜找最长路径. #include<iostream> #include<cstdio> #include<cstrin ...
- 关于浏览器cookie的小知识
浏览器对于总的cookie数量是没有限制的,但是对于每个域名的cookie数量是有限制的. 一,不同的浏览器,对于一个域名的cookie数量限制上限是不同的: 1,IE6以下版本,最多20个.IE7以 ...
- bootstrap的引用和注意事项
1,在https://v3.bootcss.com/getting-started/#download下载bootstrap的压缩包: 2,将压缩包解压到自己的工程文件中,会得到如下结果: 3,打开这 ...
- Oracle 12c client with .NET legacy Oracle driver
如果使用Oracle 12c Client和.NET的Oracle driver,你很可能会碰到跟下面一样的问题: https://www.codeproject.com/Questions/8767 ...
- java 基础复习
最近准备阿里巴巴的面试,被提到需要一个比较好的java能力,因此花了点时间,再次把JAVA看了一遍,其中的某些重点记录下来,以便以后复习. (1)& 和&& 的区别 (2)排序 ...
- awk\sed\grep 补充
# awk\sed\grep 补充 以上命令中字符 / 在sed中作为定界符使用,也可以使用任意的定界符 sed's:test:TEXT:g' sed's|test|TEXT|g' 定界符出现在样式内 ...