微信小程序 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& ...
随机推荐
- SASS 中变量的默认值
SASS 中定义的变量,后设置的值会覆盖旧的值. $color: red; $color: blue; .btn { color: $color; } 编译后为: .btn { color: blue ...
- 深入javascript的主流的模块规范
文章首发于sau交流学习社区 一.前言 目前主流的模块规范: 1.UMD通用模块 2.CommonJs 3.es6 module 二.UMD模块(通用模块) (function (global, fa ...
- 『随笔』.Net 底层 数组[] 的 基本设计探秘 512 子数组
static void Main(string[] args) { Console.ReadKey(); //初始化数组 不会立即开辟内存字节, 只有实际给数组赋值时 才会开辟内存 // //猜测数组 ...
- 使用 Premiere 制作视频简介
Premiere 简介 经常上B站或其他视频网站,有很多个人制作的有趣视频.也会想要自己制作视频.目前网上常见的视频剪辑软件有很多种,神剪辑.爱剪辑.会声会影.EDIUS等.但在专业视频剪辑师中,使用 ...
- 扒一扒.NET Core的环境配置提供程序
很久之前,在玩Docker的时候顺便扒了扒,最近,终于下定决心花了些时间整理并成文,希望能够给大家一些帮助. 目录 .NET Core中的配置 ASP.NET Core中的配置 扒一扒环境变量提供程序 ...
- 前端笔记之HTML
前端三层:内容层(结构层)HTML.样式层(表现层)CSS.行为层JavaScript 层 语言 含义 结构层 HTML 由 HTML 或 XHTML之类的标记语言负责创建.标签,也就是那些出现在尖括 ...
- HIVE扩展GIS函数
按项目日益增长的gis数据量要求,需要在大数据集群中部署HIVE的扩展函数. Apache Hive是一个建立在Hadoop架构之上的数据仓库.它能够提供数据的精炼,查询和分析.([引 ...
- SQL Server 安装后部分选项初始化脚本
SQL Server安装后,根据对应的业务场景,数据库实例的部分选项需要调整,例如实例的最大内存.tempdb 文件的增长量.Job执行记录数等等,但这一步经常被大家忽略掉. 其实很多选项初始化都可以 ...
- Linux:Day20(下) http基础
Web Service Port number: 0-1023:众所周知,永久的分配给固定的应用使用,22/tcp(ssh),80/tcp(http),443/tcp(https) 1024-4195 ...
- Python中的音频和数字信号处理(DSP)
翻译自Python For Engineers. 1. 创建一个正弦波 在这个项目中,我们将创建一个正弦波,并将其保存为wav文件. 但在此之前,你应该知道一些理论. 频率:频率是正弦波重复一秒的次数 ...