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

fabric js双击弹出菜单, 双击弹出输入框 修改文字 群组对象

news 2026/3/29 18:48:07 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试1</title><style type="text/css">body {background-color: #ccc;float: left;}#main {background-color: #fff;border: 1px solid #000;}.context-menu {position: absolute;background-color: #fff;border: 1px solid #ccc;padding: 5px;display: none;width: 200px;height: 200px;}</style>
</head>
<body>
<canvas id="main" width="800" height="800"></canvas>
<div id="contextMenu" class="context-menu"><ul><li>删除</li></ul>
</div><button id="button">删除</button><script src="fabric.min.js"></script>
<script type="text/javascript">// 在这里放置您的代码var canvas = new fabric.Canvas('main');var rect = new fabric.Rect({left: 100,top: 100,fill: 'red',width: 300,height: 200});rect.on('mousedblclick', e => {var contextMenu = document.getElementById('contextMenu');contextMenu.style.left = e.pointer.x + 'px';contextMenu.style.top = e.pointer.x + 'px';// 显示菜单contextMenu.style.display = 'block';contextMenu.addEventListener('mouseleave', e => {contextMenu.style.display = 'none';});});var circle = new fabric.Circle({radius: 50,fill: 'green',left: 200,top: 100,});var triangle = new fabric.Triangle({left: 100,top: 100,fill: 'blue',width: 80,height: 100});fabric.Image.fromURL('./T.png', function (img) {img.left = 200;img.scale(0.1);canvas.add(img)});/*var group = new fabric.Group([],{});group.addWithUpdate(rect);group.addWithUpdate(circle);canvas.add(group);*/// 创建文字对象var text = new fabric.Text('Hello, World!', {left: 50,top: 50,fontSize: 24,fontWeight: 'bold',fontFamily: 'Arial',fill: 'black'});text.on('mousedblclick', e => {var input = document.createElement('input');// 设置 input 元素的位置input.style.left = text.left + 'px';input.style.top = text.top + 'px';input.style.position = 'absolute';input.type = 'text';// 监听键盘按键事件input.addEventListener('keydown', function (e) {if (e.keyCode === 13) {// 如果按下的是回车键 (keyCode 为 13)// 销毁 input 元素input.parentNode.removeChild(input);// 获取输入的内容var inputValue = input.value;console.log('输入的内容是：', inputValue);// 在这里进行进一步的处理// 阻止默认行为e.preventDefault();text.text = input.value;canvas.renderAll();}});document.body.appendChild(input);// 自动聚焦到 input 元素input.focus();})canvas.add(text);canvas.add(rect);canvas.add(circle);canvas.add(triangle);function group() {// 获取选中的对象数组var activeObjects = canvas.getActiveObjects();if (activeObjects.length >= 2) {var clonedObjects = [];activeObjects.forEach(function (object) {clonedObjects.push(fabric.util.object.clone(object));});var left = clonedObjects[0].left;var top = clonedObjects[0].top;console.log('left', left)console.log('top', top)for (let i = 1; i < clonedObjects.length; i++) {left = clonedObjects[i].left < left ? clonedObjects[i].left : left;top = clonedObjects[i].top < top ? clonedObjects[i].top : top;}console.log('left', left)console.log('top', top)// 创建一个新的组var group = new fabric.Group(clonedObjects);// 从画布中移除已选中的对象canvas.discardActiveObject();canvas.remove.apply(canvas, activeObjects);// 将组对象添加到画布canvas.add(group);canvas.setActiveObject(group);group.left = left;group.top = top;canvas.requestRenderAll();}}</script>
</body>
</html>

相关文章：

fabric js双击弹出菜单, 双击弹出输入框 修改文字 群组对象

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>测试1</title><style type"text/css">body {background-color: #ccc;float: left;}#main {background-color: #fff;border: 1px…...

编程日记 2023/7/31 12:20:06

路由器工作原理

路由器原理 路由概述 路由&#xff1a;跨越从源主机到目标主机的一个互联网络来转发数据包的过程。&#xff08;为数据包选择路径的过程&#xff09; 作用&#xff1a;路由器是连接不同网段的。 转发依据&#xff1a; 路由表&#xff1a;路径选择全看路由表&#xff0c;根…...

编程日记 2023/7/31 12:19:02

在centos 7系统docker上构建mysql 5.7

一、VM上已经安装centos 7.9&#xff0c;且已完成docker的构建 二、安装mysql5.7 安装镜像&#xff1a;[rootlocalhost lll]# docker pull mysql:5.7 查看镜像[rootlocalhost lll]# docker images 根据镜像id构建mysql容器&#xff0c;且分配端口号[rootlocalhost lll]# dock…...

编程日记 2023/7/31 12:18:01

数据库的介绍和分类

目录 一、数据库的介绍和分类 二、命令行客户端 三、数据操作 四、查询的基本操作 五、条件查询 六、分组和聚合 资料获取方法 一、数据库的介绍和分类 数据库&#xff1a;长期存储在计算机内、有组织的数据集合 数据库的分类&#xff1a; 关系型数据库 以表格的形式…...

编程日记 2023/7/31 12:16:59

职责链模式——请求的链式处理

1、简介 1.1、概述 很多情况下&#xff0c;在一个软件系统中可以处理某个请求的对象不止一个。例如SCM系统中的采购单审批&#xff0c;主任、副董事长、董事长和董事会都可以处理采购单&#xff0c;他们可以构成一条处理采购单的链式结构。采购单沿着这条链进行传递&#xff…...

编程日记 2023/7/31 12:15:58

docker中涉及的挂载点总结

文章目录 1.场景描述2. 容器信息在主机上位置3. 通过docker run 命令4、通过Dockerfile创建挂载点5、容器共享卷&#xff08;挂载点&#xff09;6、最佳实践&#xff1a;数据容器 1.场景描述 在介绍VOLUME指令之前&#xff0c;我们来看下如下场景需求&#xff1a; 1&#xff…...

编程日记 2023/7/31 12:14:57

elasticsearch 官方优化建议

.一般建议 a.不要返回过大的结果集。这个建议对一般数据库都是适用的&#xff0c;如果要获取大量结果&#xff0c;可以使用search_after api&#xff0c;或者scroll &#xff08;新版本中已经不推荐&#xff09;。 b.避免大的文档。 2. 如何提高索引速度 a.使用批量请求。为了…...

编程日记 2023/7/31 12:13:52

Kubernetes(K8s)从入门到精通系列之五：K8s的基本概念和术语之应用类

Kubernetes K8s从入门到精通系列之五：K8s的基本概念和术语之应用类 一、Service与Pod二、Label与标签选择器三、Pod与Deployment四、Service的ClusterIP地址五、Service的外网访问问题六、有状态的应用集群七、批处理应用八、应用配置问题九、应用的运维一、Service与Pod Ser…...

编程日记 2023/7/31 12:12:51

DevOps（四）

CD（二） 1. CDStep 1 - 上传代码Step 2 - 下载代码Step 3 - 检查代码Step 4 - 编译代码Step 5 - 上传仓库Step 6 - 下载软件Step 7 - 制作镜像Step 8 - 上传镜像Step 9 - 部署服务2. 整体预览2.1 预览1. 修改代码2. 查看sonarqube检查结果3. 查看nexus仓库4. 查看harbor仓库5.…...

编程日记 2023/7/31 12:11:50

Element-plus侧边栏踩坑

问题描述 el-menu直接嵌套el-menu-item菜单&#xff0c;折叠时不会出现文字显示和小箭头无法隐藏的问题&#xff0c;但是实际开发需求中难免需要把el-menu-item封装为组件 解决 vue3项目中嵌套两层template <template><template v-for"item in list" :k…...

编程日记 2023/7/31 12:10:50

支持多种通信方式和协议方便接入第三方服务器或云平台

2路RS485串口是一种常用的通信接口&#xff0c;可以支持Modbus Slave协议&#xff0c;并可接入SCADA、HMI、DSC、PLC等上位机。它还支持Modbus RTU Master协议&#xff0c;可用于扩展多达48个Modbus Slave设备&#xff0c;如Modbus RTU远程数据采集模块、电表、水表、柴油发电机…...

编程日记 2023/7/31 12:09:48

使用 OpenCV 进行图像模糊度检测(拉普拉斯方差方法)

写在前面 工作中遇到&#xff0c;简单整理人脸识别中&#xff0c;对于模糊程度较高的图像数据&#xff0c;识别率低&#xff0c;错误率高。虽然使用 AdaFace 模型&#xff0c;对低质量人脸表现尤为突出。但是还是需要对 模糊程度高的图像进行丢弃处理当前通过阈值分类&#xff…...

编程日记 2023/7/31 12:08:46

神经网络简单介绍

人工神经网络(artififial neural network) 简称神经网络&#xff0c;它是一种模仿生物神经网络结构和功能的非线性数学模型。 神经网络通过输入层接受原始特征信息&#xff0c;再通过隐藏层进行特征信息的加工和提取&#xff0c;最后通过输出层输出结果。 根据需要神经网络可以…...

编程日记 2023/7/31 12:07:45

16位S912ZVML32F3MKH、S912ZVML31F1WKF、S912ZVML31F1MKH混合信号MCU，适用于汽车和工业电机控制应用。

S12 MagniV微控制器是易于使用且高度集成的混合信号MCU&#xff0c;非常适合用于汽车和工业应用。S12 MagniV MCU提供单芯片解决方案&#xff0c;是基于成熟的S12技术的完整系统级封装 (SiP) 解决方案&#xff0c;在整个产品组合内软件和工具都兼容。 S12 MagniV系统级封装 (S…...

编程日记 2023/7/31 12:06:44

力扣 509. 斐波那契数

题目来源&#xff1a;https://leetcode.cn/problems/fibonacci-number/description/ C题解1&#xff1a;根据题意&#xff0c;直接用递归函数。 class Solution { public:int fib(int n) {if(n 0) return 0;else if(n 1) return 1;else return(fib(n-1) fib(n-2));} }; C题…...

编程日记 2023/7/31 12:05:40

使用 DolphinDB TopN 函数探索高效的Alpha因子

DolphinDB 已经有非常多的窗口计算函数&#xff0c;例如 m 系列的滑动窗口计算&#xff0c;cum 系列累计窗口计算&#xff0c;tm 系列的的时间窗口滑动计算。但是所有这类函数都是对窗口内的所有记录进行指标计算&#xff0c;难免包含很多噪音。 DolphinDB 的金融领域用户反馈…...

编程日记 2023/7/31 12:04:39

超聚变和厦门大学助力兴业银行构建智慧金融隐私计算平台，助力信用卡业务精准营销...

兴业银行与超聚变数字技术有限公司、厦门大学携手&#xff0c;发挥产学研用一体化整体优势联合建设&#xff0c;厦门大学提供先进的算法模型及科研能力&#xff0c;超聚变提供产品解决方案及工程能力&#xff0c;兴业银行提供金融实践能力&#xff0c;三方发挥各自领域优势&…...

编程日记 2023/7/31 12:03:38

docker 的compose安装

1. Docker Compose 环境安装 Docker Compose 是 Docker 的独立产品&#xff0c;因此需要安装 Docker 之后在单独安装 Docker Compose docker compose 实现单机容器集群编排管理&#xff08;使用一个模板文件定义多个应用容器的启动参数和依赖关系&#xff0c;并使用docker co…...

编程日记 2023/7/31 12:02:36

JavaScript---事件对象event

获取事件对象&#xff1a; 事件对象&#xff1a;是个对象&#xff0c;这个对象里有事件触发时的相关信息&#xff0c;在事件绑定的回调函数的第一个参数就是事件对象&#xff0c;一般命名为event、ev、e eg: 元素.addEventListener(click,function (e){}) 部分常用属性&…...

编程日记 2023/7/31 12:01:33

Day 15 C++对象模型和this指针

目录 C对象模型 类内的成员变量和成员函数分开存储 总结 this指针 概念 示例 用途 当形参和成员变量同名时 在非静态成员函数中&#xff0c;如果希望返回对象本身 例子 空指针访问成员函数 示例 const修饰成员函数 常函数&#xff08;const member function&…...

编程日记 2023/7/31 12:00:31

nli-distilroberta-base效果展示：Entailment/Contradiction/Neutral三类判别置信度热力图

nli-distilroberta-base效果展示&#xff1a;Entailment/Contradiction/Neutral三类判别置信度热力图 1. 项目概述 nli-distilroberta-base是基于DistilRoBERTa模型的自然语言推理(NLI)Web服务&#xff0c;专门用于分析两个句子之间的逻辑关系。这个轻量级模型能够快速准确地…...

编程新知 2026/3/29 18:33:28

Wan2.1-umt5开发环境搭建：IDEA集成与调试技巧详解

Wan2.1-umt5开发环境搭建&#xff1a;IDEA集成与调试技巧详解 如果你是一名Java开发者&#xff0c;最近开始接触Wan2.1-umt5这类模型&#xff0c;可能会觉得有点无从下手。模型本身是用Python写的&#xff0c;各种脚本和命令行操作&#xff0c;跟咱们熟悉的Java开发环境完全是…...

编程新知 2026/3/29 18:29:28

AIGlasses_for_navigation商业应用：社区养老中心盲道安全监测解决方案

AIGlasses_for_navigation商业应用&#xff1a;社区养老中心盲道安全监测解决方案 1. 项目背景与价值 社区养老中心作为老年人日常活动的重要场所&#xff0c;无障碍设施的安全性直接关系到老年人的出行安全。传统的盲道巡检主要依靠人工目视检查&#xff0c;存在效率低、覆盖…...

编程新知 2026/3/29 17:47:10

舞台灯光DIY必备：手把手教你用开源DMX/RDM库驱动摇头灯（STM32平台）

舞台灯光DIY实战&#xff1a;基于STM32的DMX/RDM摇头灯开发指南 灯光艺术与嵌入式技术的碰撞总能激发创客们的无限灵感。想象一下&#xff0c;在自己的工作室里亲手打造一台可编程的摇头灯&#xff0c;通过代码精确控制光束的每一个舞动轨迹——这不仅是舞台灯光爱好者的终极乐…...

编程新知 2026/3/29 17:39:09

OpenClaw省钱方案：自建Qwen3-VL:30B替代高价多模态API

OpenClaw省钱方案&#xff1a;自建Qwen3-VL:30B替代高价多模态API 1. 为什么选择自建多模态模型 去年我在开发一个智能内容分析系统时&#xff0c;每月在商用多模态API上的支出高达数千元。当我尝试用OpenClaw对接本地部署的Qwen3-VL:30B后&#xff0c;成本直接降到了原来的1…...

编程新知 2026/3/29 15:31:59

Harmonyos应用实例233：数独逻辑教练 (综合与实践)

5. 数独逻辑教练 (综合与实践) 功能介绍： 提供一个 4x4 或 6x6 的入门级数独游戏，专为训练逻辑推理设计。系统随机生成题目，用户点击格子填入数字。如果填入错误，系统会给予红色高亮提示。包含“提示”功能，自动填入一个正确数字，帮助学生理解排除法和唯一性原理。 //…...

编程新知 2026/3/29 15:29:57

如何用DiffSynth Studio实现AI舞蹈动作生成与舞台效果可视化：完整指南

如何用DiffSynth Studio实现AI舞蹈动作生成与舞台效果可视化&#xff1a;完整指南 【免费下载链接】DiffSynth-Studio DiffSynth Studio 是一个扩散引擎。我们重组了包括 Text Encoder、UNet、VAE 等在内的架构&#xff0c;保持了与开源社区模型的兼容性&#xff0c;同时提高了…...

编程新知 2026/3/29 14:31:35

从零到一：构建智能AI代理的提示工程实战指南

从零到一&#xff1a;构建智能AI代理的提示工程实战指南 【免费下载链接】Prompt-Engineering-Guide dair-ai/Prompt-Engineering-Guide: 是一个用于指导对话人工智能开发的文档。适合用于学习对话人工智能开发和自然语言处理。特点是提供了详细的指南和参考资料&#xff0c;涵…...

编程新知 2026/3/29 13:47:11

GTE中文文本嵌入模型实战教程：与LangChain集成构建中文RAG流程

GTE中文文本嵌入模型实战教程&#xff1a;与LangChain集成构建中文RAG流程 1. 引言&#xff1a;为什么需要中文文本嵌入模型 在人工智能快速发展的今天&#xff0c;让计算机真正"理解"中文文本变得越来越重要。无论是智能客服、文档检索还是知识问答&#xff0c;都…...

编程新知 2026/3/29 8:23:45

DeepSeek-V3量化黑科技：w4a8精度反超官方！

DeepSeek-V3量化黑科技&#xff1a;w4a8精度反超官方&#xff01; 【免费下载链接】DeepSeek-V3-w4a8-mtp-QuaRot-per-channel 项目地址: https://ai.gitcode.com/Eco-Tech/DeepSeek-V3-w4a8-mtp-QuaRot-per-channel 导语&#xff1a;国内大模型量化技术再获突破&#…...

编程新知 2026/3/29 7:29:25