delete selected objects in fabricjs
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>
JavaScript
var canvas = this.__canvas = new fabric.Canvas('paper',{
preserveObjectStacking: true
});
$(canvas.getElement().parentNode).on('DOMMouseScroll mousewheel', function(e) {
var e = window.event || e; // old IE support
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.originalEvent.detail)));
if (delta > 0) {
canvas.zoomToPoint({ x: canvas.width / 2, y: canvas.height / 2 }, canvas.getZoom() * 1.1);
} else {
canvas.zoomToPoint({ x: canvas.width / 2, y: canvas.height / 2 }, canvas.getZoom() / 1.1);
}
return false;
});
const data = {
red:{
top: 50,
left: 50,
angle: 0,
width: 300,
height: 200
},
yellow:{
top: 50,
left: 50,
angle: 20,
width: 100,
height: 100
}
};
const yellow = new fabric.Rect({
left: data.yellow.left,
top: data.yellow.top,
fill: 'yellow',
angle: data.yellow.angle,
width: data.yellow.width,
height: data.yellow.height,
originX: 'center',
originY: 'center',
opacity: .7
});
yellow.setPositionByOrigin({x:yellow.getLeft() + yellow.getWidth() / 2, y: yellow.getTop() + yellow.getHeight() / 2}, 'center', 'center');
fabric.Image.fromURL('//images.sftcdn.net/images/t_optimized,f_auto/p/85e6f558-9a68-11e6-bdf1-00163ed833e7/1312338326/slack-logo.png', function(img) {
const patternSourceCanvas = new fabric.StaticCanvas();
patternSourceCanvas.enableRetinaScaling = false;
patternSourceCanvas.setBackgroundColor('red', patternSourceCanvas.renderAll.bind(patternSourceCanvas));
patternSourceCanvas.setBackgroundImage(img, patternSourceCanvas.renderAll.bind(patternSourceCanvas), {
top: yellow.getTop() - yellow.getWidth() / 2,
left: yellow.getLeft() - yellow.getHeight() / 2,
width: yellow.getWidth(),
height: yellow.getHeight(),
angle: yellow.getAngle(),
scaleX: 1,
scaleY: 1,
originX: 'center',
originY:...