微信小程序 canvas 文字自动换行
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 文字自动换行的更多相关文章
- 微信小程序 canvas 字体自动换行(支持换行符)
微信小程序 canvas 自动适配 自动换行,保存图片分享到朋友圈 https://github.com/richard1015/News 微信IDE演示代码https://developers.w ...
- 微信小程序 canvas 文字居中
drawCanvas: function(ctx) { //... // 昵称 ctx.setFontSize(16) //字体大小 ctx.setFillStyle('#fff') //字体颜色 c ...
- 微信小程序-canvas绘制文字实现自动换行
在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...
- 原创:WeZRender:微信小程序Canvas增强组件
WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...
- 微信小程序--canvas画布实现图片的编辑
技术:微信小程序 概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...
- 微信小程序canvas生成并保存图片
---恢复内容开始--- 微信小程序canvas生成并保存图片,具体实现效果如下图 实现效果需要做以下几步工作 一.先获取用户屏幕大小,然后才能根据屏幕大小来定义canvas的大小 二.获取图 ...
- 技术博客--微信小程序canvas实现图片编辑
技术博客--微信小程序canvas实现图片编辑 我们的这个小程序不仅仅是想给用户提供一个保存和查找的平台,还希望能给用户一个展示自己创意的舞台,因此我们实现了图片的编辑部分.我们对对图片的编辑集成了很 ...
- 微信小程序 canvas 绘图问题总结
业务中碰到微信小程序需要生成海报进行朋友圈分享,这个是非常常见的功能,没想到实际操作的时候花了整整一天一夜才搞好,微信的 canvas 绘图实在是太难用了,官方快点优化一下吧. 业务非常简单,只需要将 ...
- canvas生成圆图和微信小程序canvas圆图
先在HTML中创建 img和canvas并设置id属性 <canvas id="canvas" width="500" height="500& ...
随机推荐
- 02 JVM 从入门到实战 | 什么样的对象需要被 GC
引言 上一篇文章 JVM 基本介绍 我们了解了一些基本的 JVM 知识,本篇开始逐步学习垃圾回收,我们都知道既然叫垃圾回收,那回收的就应该是垃圾,可是我们怎么知道哪些对象是垃圾呢? 哪些对象需要被回收 ...
- 创建一个 Spring Boot 项目,你会几种方法?
我最早是 2016 年底开始写 Spring Boot 相关的博客,当时使用的版本还是 1.4.x ,文章发表在 CSDN 上,阅读量最大的一篇有 42W+,如下图: 2017 年由于种种原因,就没有 ...
- [PHP]引用返回与节省内存
PHP中的引用是什么:1.在 PHP 中引用意味着用不同的名字访问同一个变量内容2.引用可以被看作是 Unix 文件系统中的硬链接. 3.使用unset的话,只是删除他这个名字自身对内容的引用,并没有 ...
- 简述Java中的final关键字
final关键字可用于修饰类.方法和变量,final修饰的类不能被继承:final修饰的方法不可被重写:final修饰的变量不可被改变. 1. final类 final修饰的类不能被继承意思是fina ...
- apktool 简单使用记录
修改APP:车来了 修改内容:首次启动引导页,中间的点素材修改.样式修改 修改前:未选中为白色,选中为蓝色,间距为5dip 修改后:未选中为红色,选中为黑色,间距为0 前后截图如下: 修改过程: ...
- Android项目实战(五十四):zxing 生成二维码图片去除白色内边距的解决方案
目录:zxing->encoding->EncodingHandler类 中修改 createQRCode方法 private static final int BLACK = 0xff0 ...
- 项目中git分支管理策略
- PyCharm 如何远程连接服务器编写程序
写在前面 我之前一直通过mstsc远程服务器桌面修改代码,或者本地修改后上传到远程服务器等,各种不爽,现在改用xshell,但有时候还是感觉不方便.于是乎,自己动手配置PyCharm远程连接服务器,这 ...
- redis缓存清除
1.redis根目录调出命令行(cmd) 2.登录redis:redis-cli -h 127.0.0.1 -p 6379 3.查看所有key值:keys * 4.删除指定索引的值:del key 5 ...
- Django【部署】uwsgi+nginx
uwsgi 遵循wsgi协议的web服务器 uwsgi的安装 pip install uwsgi uwsgi的配置 项目部署时,需要把settings.py文件夹下的: DEBUG = FALSE A ...