如何消除canvas中的图像重叠（kineticjs）

我正在使用kinetic在动力学js的帮助下开发酒店楼层的视图。 但是因为我在canvas上得到了彼此重叠的图像。 帮助我消除canvas中图像的重叠。

这是我的代码：

// 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; }    
Drag from toolbar onto canvas. Then drag around canvas.