Page({

    drawCanvas: function(ctx) {// 地址
ctx.setFontSize()
ctx.setFillStyle('#9E7240')
ctx.textAlign="center";
const txHash = this.data.info.txHash ? this.data.info.txHash : '暂无信息'
this.drawText(ctx,txHash,, , ,) // 自动换行 ctx.draw()
ctx.save()
},// 文本自动换行
drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
var lineWidth = ;
var lastSubStrIndex = ; //每次开始截取的字符串的索引
for (let i = ; i < str.length; i++) {
lineWidth += ctx.measureText(str[i]).width;
if (lineWidth > canvasWidth) {
ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分
initHeight += ; //16为字体的高度
lineWidth = ;
lastSubStrIndex = i;
titleHeight += ;
}
if (i == str.length - ) { //绘制剩余部分
ctx.fillText(str.substring(lastSubStrIndex, i + ), leftWidth, initHeight);
}
}
// 标题border-bottom 线距顶部距离
titleHeight = titleHeight + ;
return titleHeight
}, })

微信小程序 canvas 文字自动换行的更多相关文章

  1. 微信小程序 canvas 字体自动换行(支持换行符)

    微信小程序 canvas 自动适配 自动换行,保存图片分享到朋友圈  https://github.com/richard1015/News 微信IDE演示代码https://developers.w ...

  2. 微信小程序 canvas 文字居中

    drawCanvas: function(ctx) { //... // 昵称 ctx.setFontSize(16) //字体大小 ctx.setFillStyle('#fff') //字体颜色 c ...

  3. 微信小程序-canvas绘制文字实现自动换行

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...

  4. 原创:WeZRender:微信小程序Canvas增强组件

    WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...

  5. 微信小程序--canvas画布实现图片的编辑

    技术:微信小程序   概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...

  6. 微信小程序canvas生成并保存图片

    ---恢复内容开始--- 微信小程序canvas生成并保存图片,具体实现效果如下图     实现效果需要做以下几步工作 一.先获取用户屏幕大小,然后才能根据屏幕大小来定义canvas的大小 二.获取图 ...

  7. 技术博客--微信小程序canvas实现图片编辑

    技术博客--微信小程序canvas实现图片编辑 我们的这个小程序不仅仅是想给用户提供一个保存和查找的平台,还希望能给用户一个展示自己创意的舞台,因此我们实现了图片的编辑部分.我们对对图片的编辑集成了很 ...

  8. 微信小程序 canvas 绘图问题总结

    业务中碰到微信小程序需要生成海报进行朋友圈分享,这个是非常常见的功能,没想到实际操作的时候花了整整一天一夜才搞好,微信的 canvas 绘图实在是太难用了,官方快点优化一下吧. 业务非常简单,只需要将 ...

  9. canvas生成圆图和微信小程序canvas圆图

    先在HTML中创建 img和canvas并设置id属性 <canvas id="canvas" width="500" height="500& ...

随机推荐

  1. Spark2.4.0伪分布式环境搭建

    一.搭建环境的前提条件 环境:ubuntu-16.04 hadoop-2.6.0  jdk1.8.0_161. spark-2.4.0-bin-hadoop2.6.这里的环境不一定需要和我一样,基本版 ...

  2. 使用CompletableFuture实现异步编程

    在开发中会碰到一种场景,如下 Object result1 = service1.func1();//执行80ms Object result2 =service2.func2();//执行50ms ...

  3. python中字符串拆分与合并——split()、join()、strip()和replace()

    Python3 split()方法 描述split()通过指定分隔符对字符串进行切片,如果参数num 有指定值,则仅分隔 num 个子字符串 语法split()方法语法: str.split(str= ...

  4. Python档案袋(生成器、迭代器、队列 )

    生成器: 简单的生成器实现: #生成器,将for循环的变量传递到前面的式子进行处理 #生成的并不是一个列表,而是一个存在算数规则的对象 #不能通过下标直接取值,必须一个一个从头到尾取 va=(i*2 ...

  5. Asp.Net Core&钉钉开发系列

    阿里钉钉在商业领域的规模越来越大,基于钉钉办公的企业越来越多,将一个企业内现有用到的工具(如钉钉)能够更融入到他们的工作中,提高工作效率,那便需要开发者不断的学习.应用了,同时,个人也有一个预感,未来 ...

  6. 由dubbo服务禁用system.gc而引起的思考

    我一直都有一个疑问,丰巢业务服务的生产环境jvm参数设置是禁止system.gc的,也就是开启设置:-XX:+DisableExplicitGC,但是生产环境却从来没有出现过堆外内存溢出的情况.说明一 ...

  7. 学习python的第三天

    4.28日总结 一.关于python 1.交互式 说一句解释一句 2.命令行式 1.编写文件并且保存 2.打开python解释器,在pyrhon中打开文本,读入内存(python打开的时候,翻译不是瞬 ...

  8. Postgresql数据库部署之:Postgresql本机启动和Postgresql注册成windows 服务

    1.初始化并创建数据库(一次即可)  initdb \data --locale=chs -U postgres -W  You can now start the database server u ...

  9. iOS 字典转模型Model

    基本原理 利用 runtime 原理,获取模型中所有实例变量列表,根据实例变量以此获取模型中成员变量的名称和属性类型,区分Foundation和自定义属性,需要对NSDictionary和NSArra ...

  10. Windows -- cmd命令: netstat 和 arp

    1. netstat: 显示网络连接.路由表和网络接口信息,可以让用户得知有哪些网络连接正在运作. 命令格式及参数如下: 2. ARP: 可用于查询本机ARP缓存中IP地址和MAC地址的对应关系.添加 ...