Created
February 16, 2017 16:58
-
-
Save psbolden/d27c0ac9b6cba6821b35e2ea1eecdee0 to your computer and use it in GitHub Desktop.
fabric.js delete selected object
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Source: http://jsfiddle.net/beewayne/z0qn35Lo/ | |
HTMl | |
____ | |
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas> | |
<button id="select">Selection mode</button> | |
<button id="draw">Drawing mode</button> | |
<button id="delete">Delete selected object(s)</button> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
JS | |
___ | |
var canvas = new fabric.Canvas('paper', { isDrawingMode: true }); | |
$("#select").click(function(){ | |
canvas.isDrawingMode = false; | |
}); | |
$("#draw").click(function(){ | |
canvas.isDrawingMode = true; | |
}); | |
$("#delete").click(function(){ | |
canvas.isDrawingMode = false; | |
deleteObjects(); | |
}); | |
// Adding objects to the canvas... | |
// adding text | |
var text = new fabric.Text('Text inside canvas', { | |
left: 40, | |
top: 50 | |
}); | |
text.hasRotatingPoint = true; | |
canvas.add(text); | |
// adding circle | |
var circle = new fabric.Circle({ | |
left: 200, | |
top: 150, | |
radius: 50, | |
fill: "#299b71" | |
}); | |
circle.hasRotatingPoint = true; | |
canvas.add(circle); | |
// adding triangle | |
var triangle = new fabric.Triangle({ | |
left: 130, | |
top: 150, | |
strokeWidth: 1, | |
width:70,height:90, | |
stroke: 'black', | |
fill:'#ff8a1b', | |
selectable: true, | |
originX: 'center' | |
}); | |
triangle.hasRotatingPoint = true; | |
canvas.add(triangle); | |
// select all objects | |
function deleteObjects(){ | |
var activeObject = canvas.getActiveObject(), | |
activeGroup = canvas.getActiveGroup(); | |
if (activeObject) { | |
if (confirm('Are you sure?')) { | |
canvas.remove(activeObject); | |
} | |
} | |
else if (activeGroup) { | |
if (confirm('Are you sure?')) { | |
var objectsInGroup = activeGroup.getObjects(); | |
canvas.discardActiveGroup(); | |
objectsInGroup.forEach(function(object) { | |
canvas.remove(object); | |
}); | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment