canvas+fabric实现时间刻度尺(一)
前言
需求:显示一个时间刻度尺,鼠标移动会显示当前时间
技术:我们采用canvas+fabric进行实现
效果


实现
1.创建canvas(设置宽高)设为全局变量
2.引入fabric包
3.画时间刻度尺(长方形+横线)
4.增加鼠标移动事件并画虚线时间显示
5.增加鼠标离开事件并销毁虚线时间
<template><div><canvas id="rulerCanvas" width="1200" height="400"></canvas></div>
</template>
<script setup>
import * as fabric from 'fabric';
import {ref, onMounted} from 'vue';const canvas = ref(null);onMounted(() => {drawRuler();
});let movDummyLine = null;
let movDummyLineText = null;const onMouseMove = (options) => {if (options.pointer.x >= 40) {if (movDummyLine) {canvas.value.remove(movDummyLine);canvas.value.remove(movDummyLineText);}// 添加虚线movDummyLine = new fabric.Line([0, 800, 1, 0], {stroke: 'red',strokeDashArray: [5, 5],strokeWidth: 1,selectable: false,}).set({ left: options.pointer.x, top: 36 });canvas.value.add(movDummyLine);// group.add(movDummyLine);// 添加文字 (options.pointer.x)let startNumber = options.pointer.x - 40 + 20;let timeNumber = parseInt(startNumber / 20);movDummyLineText = new fabric.Text(timeToStr(timeNumber), {fontSize: 12,fill: 'black',selectable: false,textAlign: 'center',}).set({ left: options.pointer.x - 12, top: 20 });canvas.value.add(movDummyLineText);// group.add(movDummyLineText);}};const drawRuler = () => {canvas.value = new fabric.Canvas('rulerCanvas');// 鼠标事件canvas.value.on('mouse:move', onMouseMove);canvas.value.on('mouse:out', () => {if (movDummyLine) {canvas.value.remove(movDummyLine);canvas.value.remove(movDummyLineText);movDummyLine = null;movDummyLineText = null;}});// 时间刻度const startHour = 0;const startMinute = 0;const intervalMinutes = 5; // 间隔const totalHours = 1; // 当前刻度时间let currentMinute = startMinute;let currentHour = startHour;// 长方形const rect = new fabric.Rect({left: 0,top: 0,width: 1100,height: 40,fill: '#fff',strokeWidth: 1, // 边框宽度selectable: false,});canvas.value.add(rect);// 底部边框const bottomBorder = new fabric.Line([0, 40, 1200, 40], {stroke: '#000000',strokeWidth: 1,selectable: false,});canvas.value.add(bottomBorder);// 时间刻度for (let i = 0; i <= totalHours * 60; i += intervalMinutes) {const x = (i / (totalHours * 60)) * canvas.value.width + 40;const timeText = formatTime(currentHour, currentMinute);// 画刻度线const b = new fabric.Line([x, 50, x, 60], {stroke: 'black',strokeWidth: 1,selectable: false,}).set({ left: x, top: 28 });canvas.value.add(b);// 添加时间文本const a = new fabric.Text(timeText, {fontSize: 12,fill: 'black',selectable: false,textAlign: 'center',}).set({ left: x-14, top: 10 });canvas.value.add(a);// 更新分钟和小时currentMinute += intervalMinutes;if (currentMinute >= 60) {currentMinute = 0;currentHour++;}}
};const formatTime = (hour, minute) => {return `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
};const timeToStr = (seconds) => {const minutes = Math.floor(seconds / 60);const secs = seconds % 60;const paddedMinutes = String(minutes).padStart(2, '0');const paddedSeconds = String(secs).padStart(2, '0');return `${paddedMinutes}:${paddedSeconds}`;
};
</script>
<style>#rulerCanvas {border: 1px solid black;}
</style>
如果侵权请联系我删除。
相关文章:
canvas+fabric实现时间刻度尺(一)
前言 需求:显示一个时间刻度尺,鼠标移动会显示当前时间 技术:我们采用canvasfabric进行实现 效果 实现 1.创建canvas(设置宽高)设为全局变量 2.引入fabric包 3.画时间刻度尺(长方形横线) …...
傲雷亮相2024中国时尚体育季(珠海站),展现户外移动照明风采
2024年12月28-29日,2024中国时尚体育季(珠海站)国家级轮滑比赛在珠海金山体育公园成功举办。作为户外创新型移动照明领域的领导品牌,傲雷受邀参加了本次珠海金湾运动生活嘉年华的展览单元,与众多户外运动品牌同台展示。…...
YOLOv10-1.1部分代码阅读笔记-block.py
block.py ultralytics\nn\modules\block.py 目录 block.py 1.所需的库和模块 2.class DFL(nn.Module): 3.class Proto(nn.Module): 4.class HGStem(nn.Module): 5.class HGBlock(nn.Module): 6.class SPP(nn.Module): 7.class SPPF(nn.Module): 8.class C1(nn…...
@RestControllerAdvice注解
RestControllerAdvice 是 Spring 4 引入的一个组合注解,它结合了 ControllerAdvice 和 ResponseBody,专门用于处理 RestController 类型的控制器中的全局异常、全局数据绑定和全局模型属性等问题。在 Spring Boot 中,RestControllerAdvice 通…...
Enum枚举类与静态变量和静态数组的区别
Enum枚举类与静态变量和静态数组的区别 组成结构Enum枚举类静态变量静态数组 组成结构的区别相同之处不同之处 用法使用相同之处不同之处 组成结构 先来看下Enum枚举类,静态变量,静态数组的初始化过程,以下面为例子: public enu…...
uniapp——微信小程序读取bin文件,解析文件的数据内容(三)
微信小程序读取bin文件内容 读取用户选择bin文件,并解析数据内容,分包发送给蓝牙设备; 文章目录 微信小程序读取bin文件内容读取文件读取内容返回格式 API文档: getFileSystemManager 关于App端读取bin文件,请查看&…...
SpringBoot集成ECDH密钥交换
简介 对称加解密算法都需要一把秘钥,但是很多情况下,互联网环境不适合传输这把对称密码,有密钥泄露的风险,为了解决这个问题ECDH密钥交换应运而生 EC:Elliptic Curve——椭圆曲线,生成密钥的方法 DH&…...
python文件操作相关(excel)
python文件操作相关(excel) 1. openpyxl 库openpyxl其他用法创建与删除操作单元格追加数据格式化单元格合并单元格插入图片公式打印设置保护工作表其他功能 2. pandas 库3. xlrd 和 xlwt 库4. xlsxwriter 库5. pyxlsb 库应用场景参考资料 在 Python 中&a…...
探索React与Microi吾码的完美结合:快速搭建项目,低代码便捷开发教程
一、摘要 在当今的数字化时代,软件开发就像是一场探险,每个开发者都是探险家,探索着代码的奥秘。React作为前端开发的领军框架,其组件化和高效的渲染机制为开发者提供了强大的工具。而Microi吾码低代码平台的出现,则为…...
【面试系列】深入浅出 Spring Boot
熟悉SpringBoot,对常用注解、自动装配原理、Jar启动流程、自定义Starter有一定的理解; 面试题 Spring Boot 的核心注解是哪个?它主要由哪几个注解组成的?Spring Boot的自动配置原理是什么?你如何理解 Spring Boot 配置…...
@colyseus/social 模块详解
@colyseus/social 模块介绍 @colyseus/social 是一个适用于 Colyseus 游戏框架的扩展模块,提供了社交功能的支持,帮助开发者在多人游戏中快速实现玩家之间的社交互动。它主要提供了玩家账户管理、好友系统、好友请求、组队和聊天功能等,旨在简化游戏中社交功能的实现。 核心…...
石岩路边理发好去处
周末带娃去罗租公园玩,罗租公园旁边就是百佳华和如意豪庭小区,发现如意豪庭小区对面挺多路边理发摊点 理发摊点聚焦在这里的原因是刚好前面城管来了暂时避避,例如还有一个阿姨剪到一半就跟着过来。这里的城管只是拍了一处没有摊位的地方&…...
ROS 2中的DDS中间件
文章目录 一、简介二、默认支持的 DDS (Data Distribution Service) 实现三、切换DDS实现小结 一、简介 中间件是一个软件层,通常用于连接不同的应用程序、服务或系统,以便它们能够相互通信和交换数据。中间件并不直接向用户暴露,而是在系统…...
「下载」智慧文旅运营综合平台解决方案:整体架构,核心功能设计
智慧文旅运营综合平台,旨在通过集成大数据、云计算、物联网、人工智能等先进技术,为景区、旅游企业及相关管理机构提供一站式的智慧化运营服务。 智慧文旅运营综合平台不仅能够提升游客的游览体验,还能帮助景区管理者实现资源的优化配置和业务…...
NVR小程序接入平台EasyNVR使用FFmpeg取流时提示错误是什么原因呢?
在视频监控系统中,FFmpeg常用于从各种源(如摄像头、文件、网络流等)获取流媒体数据,这个过程通常称为“取流”。 在EasyNVR平台中,使用FFmpeg取流是一种常见的操作。FFmpeg作为一款强大的开源多媒体处理工具ÿ…...
计算机因进程结束导致白屏
问题场景: 计算机卡顿利用(右击计算机桌面底部任务栏->打开任务管理器->结束任务->或进程被意外结束导致白屏) 问题描述 白屏 原因分析: 在结束进程时,导致 文件资源管理器 进程崩溃。 解决方案…...
OpenGL入门最后一章观察矩阵(照相机)
前面的一篇文章笔者向大家介绍了模型变化矩阵,投影矩阵。现在只剩下最后一个观察矩阵没有和大家讲了。此片文章就为大家介绍OpenGL入门篇的最后一个内容。 观察矩阵 前面的篇章当中,我们看到了即使没有观察矩阵,我们也能对绘制出来的模型有一…...
ES6中定义私有属性详解
在ES6中,定义私有属性的方式相对传统的JavaScript有所不同。ES6并没有提供直接的语法来定义私有属性,但可以通过几种方法间接实现私有属性。 1. 使用Symbol来模拟私有属性 Symbol是一种新的数据类型,可以作为对象的键,并且它的值…...
工业5G路由器让无人机数据传输 “飞” 起来
无人机上搭载5G通信模块,该模块与工业5G路由器通过5G网络建立连接。无人机的飞控系统、传感器以及摄像头等设备采集到的数据,如飞行姿态、高度、速度、环境图像、温度湿度等,经过编码、加密、调制等处理后转换为适合5G网络传输的信号形式。 …...
面试经典150题——滑动窗口
文章目录 1、长度最小的子数组1.1 题目链接1.2 题目描述1.3 解题代码1.4 解题思路 2、无重复字符的最长子串2.1 题目链接2.2 题目描述2.3 解题代码2.4 解题思路 3、串联所有单词的子串3.1 题目链接3.2 题目描述3.3 解题代码3.4 解题思路 4、最小覆盖子串4.1 题目链接4.2 题目描…...
Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误
HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误,它们的含义、原因和解决方法都有显著区别。以下是详细对比: 1. HTTP 406 (Not Acceptable) 含义: 客户端请求的内容类型与服务器支持的内容类型不匹…...
鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/
使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题:docker pull 失败 网络不同,需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...
2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)
安全领域各种资源,学习文档,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具,欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...
根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要
根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分: 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...
9-Oracle 23 ai Vector Search 特性 知识准备
很多小伙伴是不是参加了 免费认证课程(限时至2025/5/15) Oracle AI Vector Search 1Z0-184-25考试,都顺利拿到certified了没。 各行各业的AI 大模型的到来,传统的数据库中的SQL还能不能打,结构化和非结构的话数据如何和…...
SpringAI实战:ChatModel智能对话全解
一、引言:Spring AI 与 Chat Model 的核心价值 🚀 在 Java 生态中集成大模型能力,Spring AI 提供了高效的解决方案 🤖。其中 Chat Model 作为核心交互组件,通过标准化接口简化了与大语言模型(LLM࿰…...
云原生周刊:k0s 成为 CNCF 沙箱项目
开源项目推荐 HAMi HAMi(原名 k8s‑vGPU‑scheduler)是一款 CNCF Sandbox 级别的开源 K8s 中间件,通过虚拟化 GPU/NPU 等异构设备并支持内存、计算核心时间片隔离及共享调度,为容器提供统一接口,实现细粒度资源配额…...
【无标题】湖北理元理律师事务所:债务优化中的生活保障与法律平衡之道
文/法律实务观察组 在债务重组领域,专业机构的核心价值不仅在于减轻债务数字,更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明,合法债务优化需同步实现三重平衡: 法律刚性(债…...
es6+和css3新增的特性有哪些
一:ECMAScript 新特性(ES6) ES6 (2015) - 革命性更新 1,记住的方法,从一个方法里面用到了哪些技术 1,let /const块级作用域声明2,**默认参数**:函数参数可以设置默认值。3&#x…...
简单介绍C++中 string与wstring
在C中,string和wstring是两种用于处理不同字符编码的字符串类型,分别基于char和wchar_t字符类型。以下是它们的详细说明和对比: 1. 基础定义 string 类型:std::string 字符类型:char(通常为8位)…...
