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. asp.net core系列 57 IS4 使用混合流(OIDC+OAuth2.0)添加API访问

    一.概述 在上篇中,探讨了交互式用户身份验证,使用的是OIDC协议. 在之前篇中对API访问使用的是OAuth2.0协议.这篇把这两个部分放在一起,OpenID Connect和OAuth 2.0组合 ...

  2. .NETCore 基于 dbfirst 体验快速开发项目

    简介 今天出场是进化了多年的生成器工具,根据数据库结构(表.视图.存储过程.外键.各种类型.备注)快速生成一个项目,并自带后台管理系统.篇幅有限本文只讲解快速开发的使用过程,具体开发中的细节日后有空再 ...

  3. Android中一个经典理解误区的剖析

    今天,在Q群中有网友(@广州-包晴天)发出了网上的一个相对经典的问题,问题具体见下图. 本来是无意写此文的,但群里多个网友热情不好推却,于是,撰此文予以分析. 从这个问题的陈述中,我们发现,提问者明显 ...

  4. C# 填充Excel图表、图例背景色

    填充背景色,一般可以选择多种不同样式来填充背景,包括填充为纯色背景.渐变背景.图片背景或者纹理背景等.下面的内容将分别介绍通过C#来设置Excel中图表背景色.以及图表中的图例背景色的方法. 使用工具 ...

  5. linux高级编程

    系统调用 01.什么是系统调用? 02.Linux系统调用之I/O操作(文件操作) 03.文件描述符的复制:dup(), dup2() 多进程实现多任务 04.进程的介绍 05.Linux可执行文件结 ...

  6. 【原】无脑操作:Windows下搭建Kafka运行环境

    Kafka是一种高吞吐量的分布式发布订阅消息系统 1.优点:① 通过磁盘数据结构提供消息的持久化,这种结构对于即使数以TB的消息存储也能够保持长时间的稳定性能.② 高吞吐量:即使是非常普通的硬件Kaf ...

  7. mybatis的时间比较 xml 及不解析<=的写法

    <if test="type ==1"> and DATE_FORMAT(create_date,'%Y-%m-%d') = DATE_FORMAT(now(),'%Y ...

  8. Oracle设置主键自增

    oracle没有mysql那样可以有自增主键,需要自己通过创建序列才能实现自增 /*创建自增序列*/ CREATE SEQUENCE CMB_CHINA_CITYS_ID MINVALUE --最小值 ...

  9. Devops step by step

    接着上次分享的devops历程[Followme Devops实践之路], 大家希望能够出一个step by step手册, 那今天我就来和手把手来一起搭建这么一套环境, 演示整个过程! 实验环境需要 ...

  10. PHP Iterator迭代对象属性

    foreach用法和之前的数组遍历是一样的,只不过这里遍历的key是属性名,value是属性值.在类外部遍历时,只能遍历到public属性的,因为其它的都是受保护的,类外部不可见. class Har ...