有没有一种方法可以分别删除画布对象（一个一个）fabric js

Question

I have add multiple objects(images) to the canvas and i only need to delete some selected object with a button click.Is there a way to do that. And also i need maintain a separate id for each objects which are added to the canvas. Is there a way to do this in fabric js. PS: I want to maintain a list. in that list i want to added object details which are inserted to the canvas.

 function initCanvas() { $('.canvas-container').each(function(index) { var canvasContainer = $(this)[0]; var canvasObject = $("canvas", this)[0]; var imageOffsetX, imageOffsetY; function handleDragStart(e) { [].forEach.call(images, function(img) { img.classList.remove('img_dragging'); }); this.classList.add('img_dragging'); var imageOffset = $(this).offset(); imageOffsetX = e.clientX - imageOffset.left; imageOffsetY = e.clientY - imageOffset.top; } function handleDragOver(e) { if (e.preventDefault) { e.preventDefault(); } e.dataTransfer.dropEffect = 'copy'; return false; } function handleDragEnter(e) { this.classList.add('over'); } function handleDragLeave(e) { this.classList.remove('over'); } function handleDrop(e) { e = e || window.event; if (e.preventDefault) { e.preventDefault(); } if (e.stopPropagation) { e.stopPropagation(); } var img = document.querySelector('.furniture img.img_dragging'); //console.log('event: ', e); var offset = $(canvasObject).offset(); var y = e.clientY - (offset.top + imageOffsetY); var x = e.clientX - (offset.left + imageOffsetX); var newImage = new fabric.Image(img, { width: img.width, height: img.height, left: x, top: y, id: img.id }); canvas.add(newImage); return false; } function handleDragEnd(e) { [].forEach.call(images, function(img) { img.classList.remove('img_dragging'); }); } var images = document.querySelectorAll('.furniture img'); [].forEach.call(images, function(img) { img.addEventListener('dragstart', handleDragStart, false); img.addEventListener('dragend', handleDragEnd, false); }); canvasContainer.addEventListener('dragenter', handleDragEnter, false); canvasContainer.addEventListener('dragover', handleDragOver, false); canvasContainer.addEventListener('dragleave', handleDragLeave, false); canvasContainer.addEventListener('drop', handleDrop, false); }); } initCanvas(); var canvas = new fabric.Canvas('canvas1', { selection: false }); function deleteobject(){ } 

 canvas{ border:1px solid #000; } 

 <div class="fullpage"> <div class="section"> <div class="canvas-container"> <canvas id="canvas1" style="border: 1px solid;width: 500px;height: 500px"></canvas> </div> <div class="furniture" style="padding: 20px;border: 1px solid;width: 460px"> <h3>Drag the image to canvas</h3> <img id="pic1" draggable="true" src="https://www.mve.com/media/Move_logo_-01.png" width="60"> <img id="pic2" draggable="true" src="https://young.scot/media/8787/second-chances-logo-802x644.png" width="60"> </div> </div> <button onclick="deleteobject()">Delete</button> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.6/fabric.min.js'></script> 

Answer 1

Use canvas.remove(selectedObject) to remove an object.

DEMO

 function initCanvas() { $('.canvas-container').each(function(index) { var canvasContainer = $(this)[0]; var canvasObject = $("canvas", this)[0]; var imageOffsetX, imageOffsetY; function handleDragStart(e) { [].forEach.call(images, function(img) { img.classList.remove('img_dragging'); }); this.classList.add('img_dragging'); var imageOffset = $(this).offset(); imageOffsetX = e.clientX - imageOffset.left; imageOffsetY = e.clientY - imageOffset.top; } function handleDragOver(e) { if (e.preventDefault) { e.preventDefault(); } e.dataTransfer.dropEffect = 'copy'; return false; } function handleDragEnter(e) { this.classList.add('over'); } function handleDragLeave(e) { this.classList.remove('over'); } function handleDrop(e) { e = e || window.event; if (e.preventDefault) { e.preventDefault(); } if (e.stopPropagation) { e.stopPropagation(); } var img = document.querySelector('.furniture img.img_dragging'); //console.log('event: ', e); var offset = $(canvasObject).offset(); var y = e.clientY - (offset.top + imageOffsetY); var x = e.clientX - (offset.left + imageOffsetX); var newImage = new fabric.Image(img, { width: img.width, height: img.height, left: x, top: y, id: img.id }); canvas.add(newImage); return false; } function handleDragEnd(e) { [].forEach.call(images, function(img) { img.classList.remove('img_dragging'); }); } var images = document.querySelectorAll('.furniture img'); [].forEach.call(images, function(img) { img.addEventListener('dragstart', handleDragStart, false); img.addEventListener('dragend', handleDragEnd, false); }); canvasContainer.addEventListener('dragenter', handleDragEnter, false); canvasContainer.addEventListener('dragover', handleDragOver, false); canvasContainer.addEventListener('dragleave', handleDragLeave, false); canvasContainer.addEventListener('drop', handleDrop, false); }); } initCanvas(); var canvas = new fabric.Canvas('canvas1', { selection: false }); function deleteobject(){ var selectedObject = canvas.getActiveObject(); selectedObject && canvas.remove(selectedObject); } 

 canvas{ border:1px solid #000; } 

 <div class="fullpage"> <div class="section"> <div class="canvas-container"> <canvas id="canvas1" style="border: 1px solid;width: 500px;height: 500px"></canvas> </div> <div class="furniture" style="padding: 20px;border: 1px solid;width: 460px"> <h3>Drag the image to canvas</h3> <img id="pic1" draggable="true" src="https://www.mve.com/media/Move_logo_-01.png" width="60"> <img id="pic2" draggable="true" src="https://young.scot/media/8787/second-chances-logo-802x644.png" width="60"> </div> </div> <button onclick="deleteobject()">Delete</button> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.6/fabric.min.js'></script>