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

news2024/7/30 2:07:01
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.coloradmin.cn/o/1860555.html

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

相关文章

(上位机APP开发)调用华为云属性修改API接口修改设备属性

一、功能说明 通过调用华为云IOT提供的属性修改API接口,给设备下发属性修改消息。 API接口地址:https://support.huaweicloud.com/api-iothub/iot_06_v5_0034.html 此接口支持在线调试:https://console.huaweicloud.com/apiexplorer/#/openapi/IoTDA/doc?api=UpdatePrope…

基于Java微信小程序火锅店点餐系统设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f;感兴趣的可以先收藏起来&#xff0c;还…

基于电商模式的性能测试(2) —— 使用Jmeter参数化功能+JSR223 PreProcessor+JSON Extractor完成注册登录的数据驱动

1、前置条件 此例使用的是GitHub上一个开源的电商项目mall&#xff0c;需要的可以去GitHub上下载部署&#xff0c;有详细的部署教程&#xff1a; GitHub地址&#xff1a;github.com/macrozheng/…部署教程&#xff1a;macrozheng.github.io/mall-learni… 2、场景抽离 首先要…

全国首场以AI数字内容风控为主题的大会正式官宣,首批演讲嘉宾和议题揭晓!

曾经我们感叹的“AI迎来了iPhone时刻”&#xff0c;如今已变成“iPhone迎来了AI时刻”。前段时间&#xff0c;苹果全球开发者大会的召开&#xff0c;以及闻声而起的资本市场&#xff0c;无一不再次佐证了AI的无穷想象。 从OpenAI直播演示GPT-4o和谷歌的I/O开发者大会2024&…

Qt开发 | Qt界面布局 | 水平布局 | 竖直布局 | 栅格布局 | 分裂器布局 | setLayout使用 | 添加右键菜单 | 布局切换与布局删除重构

文章目录 一、Qt界面布局二、Qt水平布局--QHBoxLayout三、Qt竖直布局四、Qt栅格布局五、分裂器布局代码实现六、setLayout使用说明七、布局切换与布局删除重构1.如何添加右键菜单2.布局切换与布局删除重构 一、Qt界面布局 Qt的界面布局类型可分为如下几种 水平布局&#xff08;…

【ai】tx2 nx :安装torch、torchvision for yolov5

torchvision 是自己本地构建的验证torchvision nvidia@tx2-nx:~/twork/03_yolov5/torchvision$ nvidia@tx2-nx:~/twork/03_yolov5/torchvision$ python3 Python 3.6.9 (default, Mar 10 2023, 16:46:00) [GCC 8.4.0] on linux Type "help", "copyright",…

乐鑫ESP32-WROOM-32E模组设备低功耗控制方案,启明云端乐鑫代理商

在数字化浪潮的推动下&#xff0c;物联网&#xff08;IoT&#xff09;正迅速成为我们日常生活的一部分。而在这个领域中&#xff0c;ESP32-WROOM-32E模组以其卓越的性能和多功能性&#xff0c;成为了开发者和制造商的选择。 ESP32-WROOM-32E模组集成了ESP32-D0WD-V3芯片&#…

迁移学习——CycleGAN——循环一致性对抗网络

CycleGAN 1.导入需要的包2.数据加载&#xff08;1&#xff09;to_img 函数&#xff08;2&#xff09;数据加载&#xff08;3&#xff09;图像转换 3.随机读取图像进行预处理&#xff08;1&#xff09;函数参数&#xff08;2&#xff09;数据路径&#xff08;3&#xff09;读取文…

NAS安全存储怎样实现更精细的数据权限管控?

NAS存储&#xff0c;即网络附属存储&#xff08;Network Attached Storage&#xff09;&#xff0c;是一种专用数据存储服务器&#xff0c;其核心特点在于将数据存储设备与网络相连&#xff0c;实现集中管理数据的功能。 NAS存储具有以下明显优势&#xff0c;而被全球范围内的企…

vncsever ,window 远程ubuntu远程界面安装方式,VNC Viewer安装教程+ linux配置server 操作

linux 端安装 # 安装VNC 服务器软件 sudo apt install autocutsel # 剪切黏贴操作支持的包 sudo apt-get install tightvncserver # 安装的是 VNC 服务器软件,用于远程桌面访问 # 安装Xfce桌面环境 sudo apt-get install xfce4 xfce4-goodies #安装的是 XFCE 桌面环境和其…

EXCEL表格怎么批量删除日期后的时间?

竞价师最近有点忙了&#xff0c;因为百度新出来一个“线索有效性诊断”功能 一、下载电话、表单、咨询表格 二、选中整列 三、选中ctrlf 进行替换&#xff0c;日期输入空格&#xff0c;时间输入*&#xff0c;替换为空即可&#xff01; 四、整列单元格格式“日期”拉倒底部&…

正则表达式以及文本三剑客grep、sed、awk

正则表达式匹配的是文本内容&#xff0c;文本三剑客都是针对文本内容。 grep&#xff1a;过滤文本内容 sed&#xff1a;针对文本内容进行增删改查 awk&#xff1a;按行取列 一、grep grep的作用使用正则表达式来匹配文本内容 1、grep选项 -m&#xff1a;匹配几次之后停止…

知识付费小程序源码系统 构建知识交易新平台 带完整的安装代码包+搭建部署教程

系统概述 随着互联网技术的不断发展&#xff0c;人们获取信息的方式发生了巨大改变。传统的知识传播方式已经无法满足人们日益多样化的需求&#xff0c;知识付费逐渐成为一种趋势。同时&#xff0c;移动互联网的普及使得小程序成为人们生活中不可或缺的一部分&#xff0c;利用…

拓扑排序-体育课测验(二)

目录 一、问题描述 二、解答思路 三、代码实现 四、刷题链接 一、问题描述 二、解答思路 拓扑排序&#xff1a; 1.设置一个入度数组&#xff0c;构建图的邻接矩阵的同时对入度数组进行初始化 2.执行结点个数次的循环&#xff0c;每次循环都统计入度数组中的入度为0的结点P&…

如何以管理员身份运行CMD?

好久没更新博客了&#xff0c;今天在日常使用中遇到了一个问题&#xff0c;顺便记录下来。 据说国内的谷歌浏览器 Chrome 可以自动升级了&#xff0c;终于不用每次都自己跑去官网下载最新版本&#xff0c;然后安装迁移&#xff0c;重复劳动。下一篇讲如何讲迁移 Chrome&#x…

面试-java并发与多线程的部分函数

1.sleep和wait的区别 基本的差别&#xff1a; Sleep是Thread的方法。Wait是object方法。Wait不传参&#xff0c;最终也是调用wait(native)的传参方法。 Sleep方法可以在任何地方使用。 Wait方法只能在synchronized方法或synchronized方法块中使用。 最主要的本质区别&#xf…

pdf压缩,pdf压缩在线,pdf文件太大怎么变小

在数字化时代&#xff0c;PDF文档因其跨平台、保持原样、易于阅读和打印等特点&#xff0c;成为了我们日常工作和生活中不可或缺的一部分。然而&#xff0c;随着PDF文件的不断累积&#xff0c;存储空间逐渐变得紧张&#xff0c;特别是在处理大量大型PDF文件时&#xff0c;如何有…

qlv格式转换成mp4格式,qlv转换成mp4格式软件工具转换器

在当今的互联网时代&#xff0c;视频格式转换已成为我们日常生活中的一项常见任务。其中&#xff0c;qlv转MP4的需求尤为突出&#xff0c;本文将详细介绍qlv转MP4的几种方法&#xff0c;帮助大家转换视频格式&#xff0c;我们一起来看下。 方法一&#xff1a; 1、使用 "小…

突发!OpenAI停止不支持国家API,7月9日开始执行

6月25日凌晨&#xff0c;有部分开发者收到了OpenAI的信&#xff0c;“根据数据显示&#xff0c;你的组织有来自OpenAl目前不支持的地区的API流量。从7月9日起&#xff0c;将采取额外措施&#xff0c;停止来自不在OpenAI支持的国家、地区名单上的API使用。” 但这位网友表示&am…

如何申请免费SSL证书以消除访问网站显示连接不安全提醒

在当今互联网时代&#xff0c;网络安全已成为一个不可忽视的问题。当用户浏览一些网站时&#xff0c;有时会看到浏览器地址栏出现“不安全”的提示&#xff0c;这意味着该网站没有安装SSL证书&#xff0c;数据传输可能存在风险。那么&#xff0c;如何消除这种不安全提醒&#x…