当前位置： 首页 > article >正文

01-Canvas-使用fabric初始

article 2026/3/10 1:40:37

fabric官网：

https://fabric5.fabricjs.com/demos/

创建画布并绘制

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Fabric.js Demo</title><script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.2.4/fabric.min.js"></script>
</head><body><canvas id="canvas" width="500" height="500" style="border: 1px solid #000;"></canvas><script>const canvas = new fabric.Canvas('canvas');// 添加矩形const rect = new fabric.Rect({left: 100,top: 100,width: 200,height: 100,fill: 'red',stroke: 'black',strokeWidth: 2,});canvas.add(rect);// 添加文本const text = new fabric.Text('Hello Fabric.js', {left: 50,top: 50,fontSize: 30,fill: 'green'});canvas.add(text);// 监听对象选中事件canvas.on('object:selected', function(e) {console.log('对象被选中:', e.target);});</script>
</body></html>

在这里插入图片描述

canvas相关内容

canvas.on 是用于监听画布（Canvas）或画布上对象（Object）事件的方法。通过 canvas.on，你可以监听用户交互（如点击、拖拽、缩放等）或对象状态变化（如选中、移动、旋转等）的事件。

canvas.on('事件名称', 回调函数);

事件名称：要监听的事件名称，例如 ‘mouse:down’、‘object:selected’ 等。

回调函数：事件触发时执行的回调函数，通常接收一个事件对象 e 作为参数。

 - 画布事件:   mouse:down：鼠标在画布上按下时触发。mouse:move：鼠标在画布上移动时触发。mouse:up：鼠标在画布上释放时触发。object:added：对象被添加到画布时触发。object:removed：对象从画布中移除时触发。- 对象事件:object:selected：对象被选中时触发。object:moving：对象正在移动时触发。object:scaling：对象正在缩放时触发。object:rotating：对象正在旋转时触发。object:modified：对象被修改（移动、缩放、旋转等）后触发。- 选择事件:selection:created：创建选择（选中一个或多个对象）时触发。selection:updated：选择更新时触发。selection:cleared：选择被清除时触发。 - 在回调函数中，事件对象 e 通常包含以下常用属性：
e.target：触发事件的对象（例如被选中的对象）。
e.pointer：鼠标的坐标（{ x, y }）。
e.button：鼠标按钮（左键、右键等）。
e.e：原生事件对象（如 MouseEvent）。 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Fabric.js Demo</title><script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.2.4/fabric.min.js"></script>
</head><body><canvas id="canvas" width="500" height="500" style="border: 1px solid #000;"></canvas><script>const canvas = new fabric.Canvas('canvas');// 添加矩形const rect = new fabric.Rect({left: 100,top: 100,width: 200,height: 100,fill: 'red',stroke: 'black',strokeWidth: 2,});canvas.add(rect);// 监听画布点击事件canvas.on('mouse:down', function (e) {console.log('画布被点击，坐标:', e.pointer);});// 监听对象选中事件canvas.on('object:selected', function (e) {console.log('对象被选中:', e.target);});// 监听对象移动事件canvas.on('object:moving', function (e) {console.log('对象正在移动:', e.target);});// 监听选择事件canvas.on('selection:created', function (e) {console.log('选择被创建:', e.target);});canvas.on('selection:updated', function (e) {console.log('选择被更新:', e.target);});canvas.on('selection:cleared', function (e) {console.log('选择被清除');});</script>
</body></html>

相关文章：

01-Canvas-使用fabric初始

fabric官网&#xff1a; https://fabric5.fabricjs.com/demos/ 创建画布并绘制 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-sca…...

编程日记 2026/2/28 4:20:56

CMake简单入门

简介 CMake 是一个开源的跨平台构建系统生成工具&#xff0c;旨在简化和自动化项目的构建过程。它主要用于管理和控制软件构建的过程&#xff0c;特别是在处理复杂的项目结构和多个平台时。CMake 并不直接进行编译或链接&#xff0c;而是生成本地构建系统所需的文件&#xff0…...

编程日记 2026/2/15 22:09:17

树莓派 连接 PlutoSDR 教程

在树莓派5上安装PlutoSDR&#xff08;ADALM-Pluto&#xff09;的驱动程序&#xff0c;主要需要安装相关的库和工具&#xff0c;以便与PlutoSDR通信&#xff0c;比如libiio和libad9361&#xff0c;并确保系统能够识别设备。由于树莓派5运行的是基于Linux的系统&#xff08;通常是…...

编程日记 2026/3/9 19:37:21

【时时三省】(C语言基础)用printf函数输出数据3

山不在高&#xff0c;有仙则名。水不在深&#xff0c;有龙则灵。 ----CSDN 时时三省 ( 5 ) e格式符。 用格式声明%e指定以指数形式输出实数。如果不指定输出数据所占的宽度和数字部分的小数位数&#xff0c;许多C编译系统&#xff08;如VisualC&#xff09;会自动给出数字部分…...

编程日记 2026/2/15 0:03:07

Git使用（二）--如何配置 GitHub 远程仓库及本地 Git 环境

在日常的开发过程中&#xff0c;使用版本控制工具 Git 是一个非常重要的技能&#xff0c;特别是对于管理和协作开发。通过 GitHub&#xff0c;我们可以轻松地进行代码版本管理和共享。这篇博客将带您一步步学习如何配置 Git 环境并将本地仓库与 GitHub 远程仓库连接起来。 一、…...

编程日记 2026/3/7 13:16:32

在Pycharm配置conda虚拟环境的Python解释器

〇、前言 今天在配置python解释器时遇到了这样的问题 经过一下午自行摸索、上网搜寻后&#xff0c;终于找到的解决的方案&#xff0c;遂将该方法简要的记录下来&#xff0c;以备后用&#xff0c;并希望能帮助到有同样问题或需求的朋友:) 我所使用的软件的版本如下&#xff0c;假…...

编程日记 2026/2/26 8:03:36

CURL一文通

文章目录 1.什么是curl2.curl可以发送什么请求3.常见curl发http相关请求怎么写4.curl带上的参数分别有什么&#xff0c;可以怎么用5.进阶用法6.常见错误以及学习指导建议 1.什么是curl 是利用URL语法在命令行下工作的开源文件传输工具。尤其被广泛应用的在linux系统下。 2.cu…...

编程日记 2026/3/5 23:11:35

零基础keil:设置注释快捷键

1.打开快捷键设置&#xff1a; 在Keil中&#xff0c;选择菜单栏中的“Settings”&#xff0c;然后选择“Shortcuts”来打开快捷键设置界面。 2.选择注释命令&#xff1a; 在快捷键设置界面中&#xff0c;找到与注释相关的命令&#xff0c;如“Comment Selection”&#xff0…...

编程日记 2026/2/20 18:23:28

Java中关于Optional的 orElse 操作，以及 orElse 与 orElseGet 的区别

文章目录 1. 大概说明2. 详细分析2.1 .orElse 操作2.2 .orElse 的作用&#xff1a;避免空指针异常2.3 为什么要用&#xff1f;2.4 orElseGet如何使用2.5 orElse和orElseGet的区别 1. 大概说明 这篇文章的目的是为了说明&#xff1a; orElse 如何使用orElseGet 如何使用两者的…...

编程日记 2026/3/8 18:19:24

TCP/IP协议中三次握手（Three-way Handshake）与四次挥手（Four-way Wave）

TCP/IP协议中三次握手&#xff08;Three-way Handshake&#xff09;与四次挥手&#xff08;Four-way Wave&#xff09; 一、TCP三次握手&#xff08;Three-way Handshake&#xff09;二、TCP四次挥手&#xff08;Four-way Wave&#xff09;三、常见问题解答总结为什么三次握手不…...

编程日记 2026/2/19 15:53:28

python学智能算法（八）|决策树

【1】引言 前序学习进程中&#xff0c;已经对KNN邻近算法有了探索&#xff0c;相关文章链接为&#xff1a; python学智能算法&#xff08;七&#xff09;|KNN邻近算法-CSDN博客 但KNN邻近算法有一个特点是&#xff1a;它在分类的时候&#xff0c;不能知晓每个类别内事物的具…...

编程日记 2026/3/5 9:00:33

【经验】Orin系列Ubuntu远程桌面：VNC、NoMachine、URDC

1、VNC 1.1 Ubuntu端 1）安装VNC服务器 sudo apt install tigervnc-standalone-server2）安装xfce4 桌面 xfce4 用资源较GNOME ，KDE较少。适合老机器，轻量级桌面。与windows界面环境类似。 sudo apt install xfce4 xfce4-goodies也可以使用其它的桌面系统，可以使用如下命…...

编程日记 2026/3/6 13:34:44

【QT：控件】

目录 控件状态&#xff1a;​编辑 geometry : window frame windowlcon: qrc机制 qrc的使用方式&#xff1a; window opacity cursor font: ToolTip focusPolicy: styleSheet: 按钮类控件&#xff1a; PushButton: 给按钮添加图标&#xff1a; 给按钮添加快捷键…...

编程日记 2026/3/9 12:16:00

Python（最新版）集成开发环境PyCharm下载安装详细教程

Python 下载和安装 1.进入Python官网 Download Python | Python.org&#xff0c;点击Downloads&#xff0c;这里以Windows为例 2.选择下载Python 3.13.2 Windows 64位的版本。注意&#xff1a;不能在Windows 7 或更早的版本上使用。 3.打开文件&#xff0c;会自动出现安装界…...

编程日记 2026/2/15 17:28:13

PyTorch 实现 Conditional DCGAN（条件深度卷积生成对抗网络）进行图像到图像转换的示例代码

以下是一个使用 PyTorch 实现 Conditional DCGAN&#xff08;条件深度卷积生成对抗网络&#xff09;进行图像到图像转换的示例代码。该代码包含训练和可视化部分&#xff0c;假设输入为图片和 4 个工艺参数&#xff0c;根据这些输入生成相应的图片。 1. 导入必要的库 import …...

编程日记 2026/2/14 4:25:53

【BERT和GPT的区别】

BERT采用完形填空&#xff08;Masked Language Modeling, MLM&#xff09;与GPT采用自回归生成&#xff08;Autoregressive Generation&#xff09;的差异&#xff0c;本质源于两者对语言建模的不同哲学导向与技术目标的根本分歧。这种选择不仅塑造了模型的架构特性&#xff0c…...

编程日记 2026/2/22 15:26:03

PTA 7-12 排序

题目描述 给定 n 个&#xff08;长整型范围内的&#xff09;整数&#xff0c;要求输出从小到大排序后的结果。 本题旨在测试各种不同的排序算法在各种数据情况下的表现。各组测试数据特点如下&#xff1a; 数据1&#xff1a;只有1个元素&#xff1b;数据2&#xff1a;11个不…...

编程日记 2026/3/7 11:23:10

uniapp 实现的步进指示器组件

采用 uniapp 实现的一款步进指示器组件&#xff0c;展示业务步骤进度等内容&#xff0c;对外提供“前进”、“后退”方法&#xff0c;让用户可高度自定义所需交互&#xff0c;适配 web、H5、微信小程序&#xff08;其他平台小程序未测试过&#xff0c;可自行尝试&#xff09; 可…...

编程日记 2026/2/16 0:23:46

大模型-提示词调优

什么是提示词 提示词&#xff08;Prompt&#xff09;在大模型应用中扮演着关键角色&#xff0c;它是用户输入给模型的一段文本指令 。简单来说&#xff0c;就是我们向大模型提出问题、请求或描述任务时所使用的文字内容。例如&#xff0c;当我们想让模型写一篇关于春天的散文&a…...

编程日记 2026/2/23 3:59:36

【k8s002】k8s健康检查与故障诊断

k8s健康检查与故障诊断 ‌一、集群状态检查‌ ‌检查节点健康状态‌ kubectl get nodes -o wide # 查看节点状态及基本信息 kubectl describe node <node-name> # 分析节点详细事件&#xff08;如资源不足、网络异常&#xff09; kubectl top nodes …...

编程日记 2026/2/16 16:57:24

统计数字字符个数（信息学奥赛一本通-1129）

【题目描述】 输入一行字符&#xff0c;统计出其中数字字符的个数。 【输入】 一行字符串&#xff0c;总长度不超过255。 【输出】 输出为1行&#xff0c;输出字符串里面数字字符的个数。 【输入样例】 Peking University is set up at 1898. 【输出样例】 4 【输出样例】 #in…...

编程日记 2026/2/16 5:19:00

CentOS 6 YUM源切换成国内yum源

由于 CentOS 6 已于 2020 年 11 月进入 EOL&#xff08;End of Life&#xff09;&#xff0c;官方软件源已不再提供更新&#xff0c;因此你可能会遇到 yum makecache 命令失败的问题。以下是解决该问题的详细步骤&#xff1a; ### 解决方案 1. **备份原有 yum 源文件** bash …...

编程日记 2026/2/11 11:05:27

继承知识点—详细

一&#xff1a;普通写法 package extend_;public class Extends01 {public static void main(String[] args) {Pubil pubil new Pubil();pubil.name"小明";pubil.age18;pubil.testing();pubil.setScore(60);pubil.showInfo();System.out.println("-----------…...

编程日记 2026/2/22 15:59:08

设备管理VTY（Telnet、SSH）

实验目的&#xff1a;物理机远程VTY通过telnet协议登录AR1,ssh协议登录AR2和sw 注意配置Cloud1&#xff1a; 注意&#xff01;&#xff01;博主的物理机VMnet8--IP&#xff1a;192.168.160.1&#xff0c;所以AR1路由0/0/0端口才添加IP&#xff1a;192.168.160.3&#xff0c;每个…...

编程日记 2026/2/14 14:05:50

Linux 中 Git 使用指南：从零开始掌握版本控制

目录 1. 什么是 Git&#xff1f; Git 的核心功能&#xff1a; 2. Git 的安装 Ubuntu/Debian 系统&#xff1a; 验证安装&#xff1a; 3.gitee库 4. Git 的首次配置 配置用户名和邮箱&#xff1a; 查看配置&#xff1a; 5. Git 的基本使用 初始化仓库 添加文件到暂存区…...

编程日记 2026/3/8 2:23:27

Linux 中的 likely 和 unlikely

1. 源码 # define likely(x) __builtin_expect(!!(x), 1) # define unlikely(x) __builtin_expect(!!(x), 0) 实际上就是通过GCC 的内建函数 __builtin_expect() 进行编译优化&#xff1a; long __builtin_expect (long exp, long c) 该函数是告诉编译器&#xff1a;参…...

编程日记 2026/3/10 1:30:27

CSS -属性值的计算过程

目录 一、抛出两个问题1.如果我们学过优先级关系&#xff0c;那么请思考如下样式为何会生效2.如果我们学习过继承&#xff0c;那么可以知道color是可以被子元素继承使用的&#xff0c;那么请思考下述情景为何不生效 二、属性值计算过程1.确定声明值2.层叠冲突3.使用继承4.使用默…...

编程日记 2026/3/7 10:41:12

百度贴吧IP和ID是什么意思？怎么查看

在百度贴吧这一充满活力的网络社区中&#xff0c;IP和ID是两个频繁出现的概念。它们各自承载着不同的意义和作用&#xff0c;对于贴吧用户而言&#xff0c;了解这两个概念有助于更好地参与社区互动、保护个人隐私以及维护社区秩序。本文将详细解析百度贴吧中IP和ID的含义&#…...

编程日记 2026/3/7 6:18:16

SpiderX：专为前端JS加密绕过设计的自动化工具

SpiderX 一、工具概述 SpiderX是一款专为解决前端JS加密问题而设计的自动化绕过工具。在网络安全领域&#xff0c;随着前端加密技术的普及&#xff0c;传统的爬虫和自动化测试工具在面对复杂的JS加密时显得力不从心。SpiderX应运而生&#xff0c;旨在通过自动化手段高效绕过前…...

编程日记 2026/3/6 0:54:52

基于银河麒麟系统ARM架构安装达梦数据库并配置主从模式

达梦数据库简要概述 达梦数据库&#xff08;DM Database&#xff09;是一款由武汉达梦公司开发的关系型数据库管理系统&#xff0c;支持多种高可用性和数据同步方案。在主从模式&#xff08;也称为 Master-Slave 或 Primary-Secondary 模式&#xff09;中&#xff0c;主要通过…...

编程日记 2026/3/5 8:57:57