微信小程序生成海报分享:canvas绘制文字溢出如何换行
主要思路:
1、先分割为字符串数组,然后一个字一个字绘图,利用ctx.measureText(string) 方法,获取绘制后的宽度,判断宽度在多少内就另起一行,再将各行拼成一个字符串
2、计算另起的行总数,比如总共3行,也就是说将原来的一个长字符串按宽度分成了3行,然后循环绘制出这3行字符串即可。
注意事项:
就是需要 a-- 那里,防止丢失字符的情况,假如不 a-- 的话,那么每换行时就会少一个字。
ctx.setFontSize()
ctx.fillStyle = "#000"
offsetHeight = that.drawArticle(ctx, item.title, width - , , offsetHeight) // 绘制文字自动换行
drawArticle(ctx, kl, width, x, y) {
let chr = kl.split('') // 分割为字符串数组
let temp = ''
let row = []
for (let a = ; a < chr.length; a++) {
if (ctx.measureText(temp).width < width) {
temp += chr[a]
} else {
a--
row.push(temp)
temp = ''
}
}
row.push(temp) for (var b = ; b < row.length; b++) {
// 控制最多显示2行
if (b < ) {
ctx.fillText(row[b], x, y + b * );
}
}
let _len = row.length > ? : row.length
return y + (_len - ) *
},
微信小程序生成海报分享:canvas绘制文字溢出如何换行的更多相关文章
- 用微信小程序开发的Canvas绘制可配置的转盘抽奖
使用https://github.com/givebest/GB-canvas-turntable代码移植过而来. 其它 微信小程序感觉是个半成品,代码移植过程比较繁琐麻烦.canvas API 部分 ...
- 微信小程序的分享功能-css文字超过两行隐藏
.info{ width:100px; word-break:break-all; display:-webkit-box; -webkit-box-orient:vertical; -webkit- ...
- 微信小程序生成海报保存图片到相册小测试
test.wxml <canvas style="width:{{imageWidth}}px;height:{{imageHeight}}px;" canvas-id=&q ...
- 微信小程序-canvas绘制文字实现自动换行
在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...
- 【朝花夕拾】Android自定义View篇之(三)Canvas绘制文字
前言 转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/10968358.html],谢谢! 前面的文章中在介绍Canvas的时候,提到过后续单独讲Can ...
- 微信小程序中使用canvas
微信小程序中使用canvas会存在的一些问题: 由于小程序在绘制canvas的时候不能加载网络图片 所以需要把网络图片保存到本地之后再进行绘制 downLoadImg: function (netUr ...
- 微信小程序生成太阳码
微信小程序生成太阳码 https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=access_token 必须通过POST提交 而且参数 ...
- mpvue开发微信小程序,分享按钮报错:`Cannot read property 'apply' of null`
用mpvue开发微信小程序,分享按钮报错:Cannot read property 'apply' of null onShareAppMessage 是于微信小程序Pages的生命周期钩子,顾这个方 ...
- 小程序生成海报 canvas
前言 微信小程序需要生成海报进行朋友圈分享,但是不同的手机会有问题, 然后首先是图片的问题 图片 在模拟器上没有报错,可是真机测试却什么也没画出来. canvas.drawImage 是不支持网络图片 ...
随机推荐
- pyqt5界面使用
安装配置了pyuic和pyrcc后再进行下面操作 1.打开: 位置(我的):C:\Users\AppData\Roaming\Python\Python35\site-packages\p ...
- Gson的两种实例化方式:
2018-11-13 09:21:44 Gson的两种实例化方式: 1: 使用new Gson(); 普通实例化方式,不能配置定制化选项 Gson gson = new Gson(); 2: 通过 ...
- scala-Unit-3-Scala基础语法2
一.定义方法.函数.及方法转换为函数 1.方法的定义: def 方法名(参数1:数据类型,参数2:数据类型...):返回值类型 ={ } 2.定义函数: val h1 = (a:Int,b:Int) ...
- 错误: 在类中找不到 main 方法, 请将 main 方法定义为:public static void main(String[] args)否则 JavaFX 应用程序类必须扩展javafx.ap
最近在使用eclipse编写java程序时遇到这样一个问题: 错误在类中找不到main方法,请将main方法定义为 public static void main(String[] args)否则 J ...
- BOM 和 DOM
目录 一.BOM 1.什么是BOM 2. 浏览器内容划分 归BOM管的: 归DOM管的: 3. BOM常见方法 二.DOM 1 什么是DOM 2. DOM常见方法 一.BOM 1.什么是BOM BOM ...
- Python常用模块--configparser
作用: 官方:实现基本配置语言的类,该语言提供类似于Microsoft Windows INI文件中的结构.您可以使用它来编写可由最终用户轻松定制的Python程序. 通俗的说:该模块用于系统配置文件 ...
- checkbox、radio设置自定义样式
老生常谈,做一个简单的记录.浏览器自带的checkbox和radio样式可能不符合项目要求,通常要做一些自定义样式设置,目前基本的解决思路都是将input[type=checkbox/radio]隐藏 ...
- react那些事儿
一.参考链接https://reactjs.org/http://react-china.org/https://doc.react-china.org/https://hulufei.gitbook ...
- 多表查询、可视化工具、pymysql模块
create table dep( id int primary key auto_increment, name varchar(16), work varchar(16) ); create ta ...
- C# 网络编程之基于SMTP发送电子邮件
本文主要讲述基于C#网络编程的发送邮件的编程,邮件发送功能是基于邮件协议的,常见的电子邮件协议有SMTP(简单邮件传输协议).POP3(邮局协议).IMAP(Internet邮件访问协议),文章主要 ...