fabric.js 实现元素拖拽、引入图片、标注交互
以下是一个使用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图片对象，并添加到画布上。此外，代码还初始化了拖拽功能，并提供了一个简单的标注示例，当选中元素时会添加一个文本标注。
评论已关闭