canvas如何让单行文本用...省略

embedded/2024/10/18 14:18:45/
let strWidth = ctx.measureText(this.data.name).width;
const ellipsis ="..."
const ellipsisWidth = ctx.measureText(ellipsis).width;
if(strWidth<=120 || 120<=ellipsisWidth) {ctx.fillText("测试:"+this.data.name, 190*dpr,590*dpr);
}else {var len = this.data.name.length;while (strWidth >= 100 - ellipsisWidth && len-- > 0) {this.data.name = this.data.name.slice(0, len);strWidth = ctx.measureText(this.data.name).width;}let newText =  this.data.name + ellipsis;ctx.fillText("测试:"+newText, 190*dpr,590*dpr);
}

注:这里面的this.data.name内容,里面的涉及数字120或者是100都是最大长度,根据自己需求填写即可

效果展示:


http://www.ppmy.cn/embedded/52569.html

相关文章

规则引擎-Aviator 表达式校验是否成立

目录 介绍特性使用更多文献支持 介绍 Aviator是一个轻量级、高性能的Java表达式执行引擎&#xff0c;它动态地将表达式编译成字节码并运行。 特性 支持绝大多数运算操作符&#xff0c;包括算术操作符、关系运算符、逻辑操作符、位运算符、正则匹配操作符(~)、三元表达式(?:…

Spring Boot基础入门

引言 Spring Boot是一个开源的Java框架&#xff0c;旨在简化Spring应用程序的创建和部署过程。它提供了一种快速和简便的方式来创建独立的、生产级别的基于Spring的应用程序。本文将介绍Spring Boot的基础知识&#xff0c;包括其核心特性、如何开始使用Spring Boot以及构建你的…

JDK 23:Loom改进版发布

1.新版 Loom EA 改进虚拟线程中的监视器&#xff08;同步方法&#xff09; Project Loom 发布了新的抢先体验版本(23-loom4-102 - 2024/5/31)。改进了对象监视器实现&#xff0c;可以防止虚拟线程在以下情况下固定其载体线程&#xff1a; 当进入同步方法/语句时发生阻塞&…

昇思25天学习打卡营第2天|linchenfengxue

传统的计算机视觉方法通常包括图像预处理、特征提取、特征筛选、图像识别等几个步骤。 对于给定的数字图像&#xff0c;计算机在处理时要先执行二次采样、平滑去噪、对比度提升和尺度调整等预处理操作&#xff0c;再对图像中的线条、边缘等全局特征和边角、斑点等局部特征&…

【前端】HTML+CSS复习记录【1】

文章目录 前言一、p、br&#xff08;段落、换行&#xff09;二、短语标签&#xff08;用来呈现为被强调的文本&#xff09;三、sub、sup&#xff08;下标、上标&#xff09;四、b&#xff08;加粗文本&#xff09;五、块级元素与行内元素六、元素嵌套七、html注释系列文章目录 …

【扩散模型(二)】IP-Adapter 从条件分支的视角,快速理解相关的可控生成研究

系列文章目录 【扩散模型&#xff08;一&#xff09;】中介绍了 Stable Diffusion 可以被理解为重建分支&#xff08;reconstruction branch&#xff09;和条件分支&#xff08;condition branch&#xff09;本文将从该视角快速理解 IP-Adapter 以及相关可控生成研究。 文章目…

智能制造uwb高精度定位系统模块,飞睿智能3厘米定位测距芯片,无人机高速传输

在科技日新月异的今天&#xff0c;定位技术已经渗透到我们生活的方方面面。从手机导航到自动驾驶&#xff0c;再到无人机定位&#xff0c;都离不开精准的定位系统。然而&#xff0c;随着应用场景的不断拓展&#xff0c;传统的定位技术如GPS、WiFi定位等&#xff0c;因其定位精度…

【数学建模】—【Python库】—【Numpy】—【学习】

目录 ​编辑 1. NumPy安装 2. ndarray对象 1. 创建ndarray 1.从列表或元组创建&#xff1a; 2.使用内置函数创建&#xff1a; 2. ndarray属性 3. 数组运算 1. 基本运算 2. 数学函数 3.统计函数 4. 数组索引与切片 1. 一维数组索引与切片 2.多维数组索引与切片 5.…