fabric.js 实现元素拖拽、引入图片、标注交互

这篇文章距离上次修改已过189天，其中的内容可能已经有所变动。

以下是一个使用fabric.js实现拖拽元素、引入图片并添加标注的简单示例代码。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fabric.js Drag and Drop Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <input type="file" id="fileUploader" accept="image/*" />
 
    <script>
        const canvas = new fabric.Canvas('canvas');
        const fileUploader = document.getElementById('fileUploader');
 
        // 监听文件上传
        fileUploader.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (!file) return;
 
            // 创建图片元素
            const img = new Image();
            img.onload = () => {
                const imgInstance = new fabric.Image(img, {
                    left: 50,
                    top: 50,
                    width: 100,
                    height: 100,
                    originX: 'left',
                    originY: 'top'
                });
                canvas.add(imgInstance);
            };
            img.src = URL.createObjectURL(file);
        });
 
        // 初始化拖拽功能
        canvas.on('object:moving', function(e) {
            e.target.opacity = 0.5;
        });
        canvas.on('object:modified', function(e) {
            e.target.opacity = 1;
        });
 
        // 这段代码用于添加标注，可以根据需要进行扩展
        canvas.on('object:selected', (e) => {
            const text = new fabric.Text('注释', {
                left: e.target.getLeft() + 10,
                top: e.target.getTop() - 20,
                fontSize: 12
            });
            canvas.add(text);
        });
    </script>
</body>
</html>

这段代码首先引入了fabric.js库，并创建了一个<canvas>元素。它还包括了一个文件上传器，允许用户上传图片。上传的图片会被转换成fabric.js图片对象，并添加到画布上。此外，代码还初始化了拖拽功能，并提供了一个简单的标注示例，当选中元素时会添加一个文本标注。

fabric.js 实现元素拖拽、引入图片、标注交互

评论已关闭

推荐阅读