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

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

news 2025/8/8 18:24:46

<!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>