让用户删除选定的fabric js对象
Let user delete a selected fabric js object
我有一个简单的基于fabric js的应用程序,我将让用户添加形状连接它们和动画。
以下是我的JSvar canvas;
window.newAnimation = function(){
canvas = new fabric.Canvas('canvas');
}
window.addRect = function(){
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20,
});
canvas.add(rect);
}
window.addCircle = function(){
var circle = new fabric.Circle({
radius: 20, fill: 'green', left: 100, top: 100
});
canvas.add(circle);
}
这是我的小提琴。现在你可以点击新建动画,然后添加对象。
我希望用户选择一些对象,然后也能够删除它,我不确定如何。我在html5的fabric.js画布上一次发现了这个删除多个对象,但我无法成功地实现它。我希望用户能够选择一个对象并删除它
由于新版本的fabric.js已经发布-你应该使用:
canvas.remove(canvas.getActiveObject());
编辑:这是现在的旧版本。
你可以使用remove()方法,例如
window.deleteObject = function() {
canvas.getActiveObject().remove();
}
jsfiddle
删除所有选中的对象:
canvas.getActiveObjects().forEach((obj) => {
canvas.remove(obj)
});
canvas.discardActiveObject().renderAll()
我使用的是Fabric JS 2.3.6.
我希望允许用户在画布上选择一个或多个对象,并通过单击delete按钮删除它们。
从旧版本删除方法
自activesselection引入以来,以下方法不再可用:
setActiveGroup(group);
getActiveGroup();
deactivateAll();
discardActiveGroup();
deactivateAllWithDispatch();
这是我的代码,对我来说很好,希望你也是。
$('html').keyup(function(e){
if(e.keyCode == 46) {
deleteSelectedObjectsFromCanvas();
}
});
function deleteSelectedObjectsFromCanvas(){
var selection = canvas.getActiveObject();
if (selection.type === 'activeSelection') {
selection.forEachObject(function(element) {
console.log(element);
canvas.remove(element);
});
}
else{
canvas.remove(selection);
}
canvas.discardActiveObject();
canvas.requestRenderAll();
}
其实很简单。
只需使用Fabric的事件处理来管理对象选择,然后为所选择的对象触发delete函数。
我使用画布选择事件来覆盖画布的所有对象。我们的想法是添加一个删除按钮,除非需要,否则将其隐藏,然后处理其在画布选择事件上的显示。
在Fabric库的remove属性的帮助下,删除变得很容易,当点击删除按钮时,它显然会触发。
下面是一些示例代码来演示我上面所说的内容。
// Grab the required elements
var canvas = new fabric.Canvas('c'),
delBtn = document.getElementById('delete')
// Hide the delete button until needed
delBtn.style.display = 'none'
// Initialize a rectangle object
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 100,
height: 50
})
// Initialize a circle object
var circle = new fabric.Circle({
left: 250,
top: 100,
radius: 20,
fill: 'purple'
})
// Add objects to the canvas
canvas.add(rect)
canvas.add(circle)
// When a selection is being made
canvas.on({
'selection:created': () => {
delBtn.style.display = 'inline-block'
}
})
// When a selection is cleared
canvas.on({
'selection:cleared': () => {
delBtn.style.display = 'none'
}
})
// Rmove the active object on clicking the delete button
delBtn.addEventListener('click', e => {
canvas.remove(canvas.getActiveObject())
})
body {
background-color: #eee;
color: #333;
}
#c {
background-color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.4.0/fabric.min.js"></script>
<h4>Select an object</h4>
<canvas id="c" width="600" height="200"></canvas>
<input type="button" id="delete" value="Delete selection">
很容易,不是吗?干杯! 在进一步改进@Rahul答案的基础上,我们还可以支持使用'Delete', 'Backscape'等关键事件删除选定对象。
// Grab the required elements
var canvas = new fabric.Canvas('c'),
delBtn = document.getElementById('delete'),
wrapper= document.getElementById('canvasWrapper')
// Hide the delete button until needed
delBtn.style.display = 'none'
// Initialize a rectangle object
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 100,
height: 50
})
// Initialize a circle object
var circle = new fabric.Circle({
left: 250,
top: 100,
radius: 20,
fill: 'purple'
})
// Add objects to the canvas
canvas.add(rect)
canvas.add(circle)
// When a selection is being made
canvas.on({
'selection:created': () => {
delBtn.style.display = 'inline-block'
}
})
// When a selection is cleared
canvas.on({
'selection:cleared': () => {
delBtn.style.display = 'none'
}
})
// Rmove the active object on clicking the delete button
delBtn.addEventListener('click', e => {
canvas.remove(canvas.getActiveObject())
})
//Remove using keyboard events
wrapper.addEventListener('keyup', e => {
if (
e.keyCode == 46 ||
e.key == 'Delete' ||
e.code == 'Delete' ||
e.key == 'Backspace'
) {
if (canvas.getActiveObject()) {
if (canvas.getActiveObject().isEditing) {
return
}
canvas.remove(canvas.getActiveObject())
}
}
})
body {
background-color: #eee;
color: #333;
}
#c {
background-color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.4.0/fabric.min.js"></script>
<h4>Select an object</h4>
<div tabIndex="1000"id="canvasWrapper" @keyup="checkDelete($event)" >
<canvas id="c" width="600" height="200"></canvas>
</div>
<input type="button" id="delete" value="Delete selection">
删除Fabricjs中的对象。
this.canvas.getActiveObjects().forEach((o) => {
this.canvas.remove(o);
})
this.canvas.discardActiveObject() // Removes selection box
您可以使用退格键来删除活动对象
$(document).keydown(function(event){
if (event.which == 8) {
if (canvas.getActiveObject()) {
canvas.getActiveObject().remove();
}
}
});
相关文章:
- 使用fabric.js从矩形区域获取对象,并将该区域绘制到画布上
- Fabric.js-更改矩形填充
- Dropdown在fabric js的Materialize设计中不起作用
- 如何在fabric js中向多边形添加图像
- fabric js多边形集合坐标
- 在fabric.js中以PNG格式下载Canvas,给出网络错误
- 在fabric.js中使用一个组作为遮罩
- 以编程方式将fabric-js-canvas的图像替换为hq图像,并重新计算其他对象的坐标和大小
- 如何通过Fabric.js只点击实际内容来选择对象
- Cufon-builder-font-js文件在Fabric.js中不起作用
- fabric.js中的文本对齐方式未按预期工作
- fabric.js:使用 Image.set() 调整图像大小是否会降低图像质量
- 使用Fabric.js选择画布上的所有对象
- Canvas仅使用fabric.js在点击事件时渲染自定义Web字体
- drawImage() in fabric js
- Fabric.js函数将对象从A点移动到B点
- Fabric.js文本转换不起作用
- 检查Fabric.js中的Canvas是否为空
- 如何在Fabric.js上获取鼠标坐标
- 如何使用Fabric.js创建多个形状