Как удалить изображение (элемент) с холста

Question

Я разрабатываю вид на этаж отеля, используя холст с помощью кинетических js.I хочу предоставить возможность удалять текущее вытащенное, выпавшее изображение на холсте.

это мой код только для перетаскивания изображения, а не с опцией удаления:

// get a reference to the house icon in the toolbar 
// hide the icon until its image has loaded 
var $house=$("#house"); 
$house.hide(); 

// get the offset position of the kinetic container 
var $stageContainer=$("#container"); 
var stageOffset=$stageContainer.offset(); 
var offsetX=stageOffset.left; 
var offsetY=stageOffset.top; 

// create the Kinetic.Stage and layer 
var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 350, 
    height: 350 
}); 
var layer = new Kinetic.Layer(); 
stage.add(layer); 

// start loading the image used in the draggable toolbar element 
// this image will be used in a new Kinetic.Image 
var image1=new Image(); 
image1.onload=function(){ 
    $house.show(); 
} 
image1.src="https://dl.dropboxusercontent.com/u/139992952/multple/4top.png"; 

// make the toolbar image draggable 
$house.draggable({ 
    helper:'clone', 
}); 

// set the data payload 
$house.data("url","house.png"); // key-value pair 
$house.data("width","32"); // key-value pair 
$house.data("height","33"); // key-value pair 
$house.data("image",image1); // key-value pair 

// make the Kinetic Container a dropzone 
$stageContainer.droppable({ 
    drop:dragDrop, 
}); 

// handle a drop into the Kinetic container 
function dragDrop(e,ui){ 

    // get the drop point 
    var x=parseInt(ui.offset.left-offsetX); 
    var y=parseInt(ui.offset.top-offsetY); 

    // get the drop payload (here the payload is the image) 
    var element=ui.draggable; 
    var data=element.data("url"); 
    var theImage=element.data("image"); 

    // create a new Kinetic.Image at the drop point 
    // be sure to adjust for any border width (here border==1) 
    var image = new Kinetic.Image({ 
    name:data, 
    x:x, 
    y:y, 
    image:theImage, 
    draggable: true 
    }); 
    layer.add(image); 
    layer.draw(); 
} 
body{padding:20px;} 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:350px; 
    height:350px; 
} 
#toolbar{ 
    width:350px; 
    height:35px; 
    border:solid 1px blue; 
} 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script> 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> 

<h4>Drag from toolbar onto canvas. Then drag around canvas.</h4> 
<div id="toolbar"> 
    <img id="house" width=32 height=32 src="https://dl.dropboxusercontent.com/u/139992952/multple/4top.png"><br> 
</div> 
<div id="container"></div> 

Answer 1

Вы можете использовать Kinetic для image.remove(), затем layer.draw() освежить холст, подобным же образом, чтобы this answer.

Answer 2

Если вы хотите временно удалить изображение (а затем повторно добавить его) вы используете:

// temporarily remove the image from the layer 
yourImage.remove(); 
yourLayer.draw(); 

// and later re-add it 
yourLayer.add(yourImage); 
yourLayer.draw(); 

Но если вы хотите навсегда удалить изображение (и восстановить все свои ресурсы) вы используете:

// permanently delete the image and reclaim all the resources it used 
yourImage.destroy(); 
yourLayer.draw();