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