微信小程序canvas画布绘制文字自动换行

关键步骤介绍:

text为需要绘制的文本,通过换行符将text分割为words数组。

basic_height为第一行文本的高度。

get_canvas_row函数根据行宽限制将输入文本转化为不同的行,实现见下文。

text_size为设置的文本高度,h+text_size*j为每行待绘制文本的高度,绘制完成后更新h。

var words = text.split('\n')
var h = basic_height
for(var i=0;i<words.length;++i){var rows = this.get_canvas_rows(ctx,words[i],canvas.width-10)for(var j=0;j<rows.length;++j){ctx.fillText(rows[j],10,h+text_size*j)}h += rows.length*text_size
}

get_canvas_rows函数参数介绍:

参数1:绘制的画布对象

参数2:绘制的文本

参数3:限制的文本宽度

关键步骤介绍:

步骤1:将输入文本拆分为单个字符数组。

步骤2:将字符数组依次赋予t_line,不断扩大t_line长度,直到达到文本宽度限制,将t_line作为一行文本赋予rows数组,t_line重新计数,直到字符数组最后一个字符。

步骤3:返回rows数组。

    get_canvas_rows(ctx,line,maxWidth){var chars = line.split('')var rows = []var t_line = ''for(var i=0;i<chars.length;++i){var line_w = ctx.measureText(t_line+chars[i]).width    if(line_w>maxWidth){rows.push(t_line)t_line = chars[i]}else{t_line += chars[i]}}rows.push(t_line)return rows},

更多内容欢迎关注、评论、私信博主。

有用的话欢迎打赏~~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/628856.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SAP银企直联报错排查方法与步骤-F110

银企直联的报错排查经常需要利用F110来查询。方法步骤如下&#xff1a; 1、首先要确定报错是哪天的&#xff0c;并且当天那一次跑的付款建议。需要通过表 REGUH来确认(跟据供应商编码、日期) 2、通过REGUH表的信息知道了是2024年1月16号第5个标识&#xff08;也就是第五次跑付…

Mac OS系统 SVN客户端 smartSVN 安装和基础使用

一、下载SVN客户端 官网地址&#xff0c;可以根据自己的系统下载 https://www.smartsvn.com/download/ 二、安装客户端和激活 第一步安装&#xff0c;很简单。 第二步&#xff0c;激活&#xff0c;选择激活文件 创建一个许可文件&#xff0c;例如 smartSvn.license。 内容如…

搜维尔科技:SenseGlove Nova 2力反馈技术手套,虚拟培训的沉浸感达到新高度!

SenseGlove Nova 2-虚拟培训的沉浸感达到新高度&#xff01; 通过集成主动接触反馈&#xff0c;Nova 2 使用户能够在手掌中感知虚拟现实物体的感觉。虚拟训练、研究和多人互动现在感觉比以往更加自然。这项创新增强了与整个手掌接触的任何虚拟物体的真实感。使用第一款也是唯一…

el-date-picker组件设置时间范围限制

需求&#xff1a; 如图所示&#xff0c;下图为新增的一个弹层页面&#xff0c;同时有个需求&#xff0c;日期选择需要限制一个月的时间范围&#xff08;一月默认为30天&#xff09;&#xff1a; 查看官方文档我们需要主要使用到如下表格的一些东西&#xff1a; 参数说明类型可…

Spring Cloud 微服务中 gateway 网关如何设置健康检测端点

主要是为了让 k8s 识别到网关项目已经就绪&#xff0c;但是又不想在里面通过 Controller 实现。因为在 Controller 中这样做并不是最佳实践&#xff0c;因为 Gateway 的设计初衷是专注于路由和过滤&#xff0c;而不是业务逻辑的处理。 在 Gateway 中配置健康检查端点可以通过以…

uniapp 实现tabBar-switchTab之间的传参

一、需求&#xff1a; tabbar之间跳转页面时&#xff0c;需要传递一个参数。 官方文档明确说明: 跳转tabBar栏的页面只能使用 uni.switchTab 并且url 路径后面不能传递参数。 二、解决方法&#xff1a; 方法1&#xff1a;setStorageSync(本地缓存) //index.vue 页 onclick …

最佳实践分享:SQL性能调优

SQL性能调优是一个需要不断探索和实践的过程&#xff0c;旨在确保数据库查询的高效运行。本文将分享一些SQL性能调优的最佳实践&#xff0c;帮助您提升数据库性能&#xff0c;减少查询响应时间。 一、索引优化 索引是提高查询性能的关键。以下是一些关于索引优化的建议&#…

使用 Apache POI 更新/覆盖 特定的单元格

使用 Apache POI 更新特定的单元格 一. 需求二. 实现三. 效果 一. 需求 将以下表中第4行&#xff0c;第4列的单元格由“张宇”更新为“汤家凤”&#xff0c;并将更行后的结果写入新的Excel文件中&#xff1b; 二. 实现 使用Apache POI&#xff0c;可以精确定位到需要更改的单…

22/76-池化

池化&#xff08;最大池化层&#xff1a;选每个kernel中最大的数&#xff09; 填充、步幅、多个通道&#xff1a; 池化层与卷积层类似&#xff0c;都具有填充和步幅。 没有可学习的参数。 在每个输入通道应用池化层以获得相应的输出通道。 输出通道数输入通道数。 平均池化层…

4、操作系统概述、进程管理

文章目录 操作系统1、操作系统的作用2、操作系统的分类3、操作系统的功能4、操作系统的特征5、计算机的启动流程进程管理进程的组成进程的状态前趋图进程资源图阻塞节点非阻塞节点:同步与互斥互斥同步临界资源临界区互斥信号量同步信号量信号量P操作V操作生产者和消费者死锁产生…

LeetCode、2336. 无限集中的最小数字(中等,小顶堆)

文章目录 前言LeetCode、2336. 无限集中的最小数字题目链接及类型思路代码题解 前言 博主所有博客文件目录索引&#xff1a;博客目录索引(持续更新) LeetCode、2336. 无限集中的最小数字 题目链接及类型 题目链接&#xff1a;2336. 无限集中的最小数字 类型&#xff1a;数据…

VC++中使用OpenCV对原图像中的四边形区域做透视变换

VC中使用OpenCV对原图像中的四边形区域做透视变换 最近闲着跟着油管博主murtazahassan&#xff0c;学习了一下LEARN OPENCV C in 4 HOURS | Including 3x Projects | Computer Vision&#xff0c;对应的Github源代码地址为&#xff1a;Learn-OpenCV-cpp-in-4-Hours 视频里面讲…

CharacterEncodingFilter详解

CharacterEncodingFilter详解 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将深入研究一个在Web开发中扮演着重要角色的工具——CharacterEncodingFilter…

ChatGPT新出Team号 年付费

之前一直传的团队版ChatGPT终于来了&#xff0c;这个对拼单的比较合算。每人每月25美元&#xff0c;只能按年支付。 团队版比普通版多的权益有&#xff1a; ◈更多的GPT-4消息上限&#xff0c;三小时100次。 ◈可以创建与团队内部共享的GPTs。 ◈用于工作空间管理的管理员控…

圈小猫游戏HTML源码

源码介绍 圈小猫游戏html源码&#xff0c;HTMLCSSJS,记事本可以打开修改内容&#xff0c;电脑本地双击index.html即可运行&#xff0c;也可以上传到服务器上面运行&#xff0c;喜欢的同学可以拿去使用 下载地址 蓝奏云&#xff1a;https://wfr.lanzout.com/iFkVc1lb5akj CS…

Spring高手之路-Spring事务失效的场景详解

目录 前言 Transactional 应用在非 public 修饰的方法上 同一个类中方法调用&#xff0c;导致Transactional失效 final、static方法 Transactional的用法不对 Transactional 注解属性 propagation 设置不当 Transactional注解属性 rollbackFor 设置错误 用错注解 异常…

QT quick基础:组件gridview

组件gridview与android中gridview布局效果相同。下面记录qt quick该组件的使用方法。 方法一&#xff1a; // ContactModel.qml import QtQuick 2.0ListModel {ListElement {name: "1"portrait: "icons/ic_find.png"}ListElement {name: "2"por…

springboot+vue3+antdesignvue实现文件的导入导出javaguns框架

1.技术要点 mybatisplus;vue3,springboot2;javaguns框架 2实现导入功能 后端实现&#xff1a; ①controller层 RestController ApiResource(name "项目评价") public class ProjectAppraisalController {/*** 导入excel表数据* param file* return*/PostResour…

NineAi 新版AI系统网站源码 ChatGPT

简介: Nine AI.ChatGPT是基于ChatGPT开发的一个人工智能技术驱动的自然语言处理工具,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,真正像人类一样来聊天交流,甚至能完成撰写邮件、视频脚本、文案、翻译、代码,写论文等任务。 NineAi 新版A…