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. 距离度量以及python实现(二)

    接上一篇:http://www.cnblogs.com/denny402/p/7027954.html 7. 夹角余弦(Cosine) 也可以叫余弦相似度. 几何中夹角余弦可用来衡量两个向量方向的差异 ...

  2. 【HADOOP】| 环境搭建:从零开始搭建hadoop大数据平台(单机/伪分布式)-下

    因篇幅过长,故分为两节,上节主要说明hadoop运行环境和必须的基础软件,包括VMware虚拟机软件的说明安装.Xmanager5管理软件以及CentOS操作系统的安装和基本网络配置.具体请参看: [ ...

  3. 图解 sql 事务隔离级别

    sql 事务隔离级别有四种分种为: 一 Read Uncpommitted(未提交读) 二 Read Committed(提交读) 三 Repeated Read(可重复读) 四 Serializab ...

  4. 用CSS画一个带阴影的三角形的示例代码

    1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...

  5. GitLab11.3.9 使用 Crowd3.3.2 的帐号实现 SSO 单点登录,以及GitLab配置腾讯企业邮箱

    GitLab11.3.9 的安装方法: 点击查看.   Crowd3.3.2 的安装方法:点击查看.   需要先在 Crowd 创建应用程序,参考 <Docker 创建 Crowd3.3.2 以 ...

  6. SQL Server统计信息偏差影响表联结方式案例浅析

      我们知道数据库中的统计信息的准确性是非常重要的.它会影响执行计划.一直想写一篇关于统计信息影响执行计划的相关博客,但是都卡在如何构造一个合适的例子上,所以一直拖着没有写.巧合,最近在生产环境中遇到 ...

  7. 第二周Python学习笔记

    分支结构: ①  单分支结构: 非常简单,if 条件语句,如果为true 则输出结果.否则不输出结果 ②  二分支结构: 条件结果为true则执行语句1,否则就执行语句2 If <条件>: ...

  8. LeetCode算法题-Rotated Digits(Java实现)

    这是悦乐书的第316次更新,第337篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第185题(顺位题号是788).如果一个数字经过180度旋转后,变成了一个与原数字不同的 ...

  9. 解决 mac 10.14.4 无法 sublime text 3207 安装 Package Control,以及安装第三方包报错 `Package Control There are no packages available for installation`

    下载最新的 sublime text 3207,无法安装 Package Control. 根据官方提示,手动安装 Package Control. 手动安装 Package Control 后,无法 ...

  10. 致 CODING 用户的元宵问候

    元宵快乐! 感谢您一直以来对 CODING 的理解与支持.2019 年 CODING 也走入了创业的第五个年头,为了将"让开发更简单"的愿景落地,我们做了许多探索,产品完成度也在不 ...