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

html 复制代码
<!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双击弹出菜单, 双击弹出输入框 修改文字 群组对象

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