我正在尝试使用html5 img标签将多个图像加载到画布上。
并且这些图像是可替换的,例如有5组图像。
这些图像也可以拖动。
当点击某个图像时,它会替换同一组中最后上传的图像。
我面临的问题是,当我上传新元素时,它会出现在其他元素之上。
当点击底部元素时,我希望它能够移动到顶部并可以拖动。
我尝试使用KineticJS函数move to top,但没有任何反应... 我也检查了库,它没问题...
由于我的代码太大,我不能把全部代码贴在这里。
这里是我尝试添加move to top功能的部分:
function drawImageOnLayer(layer, img) {
var x = stage.width / 2 - 100 ;
var y = stage.height / 2 - 200 ;
var width = 200;
var height = 400;
var kinecticImg = new Kinetic.Shape(function(){
var context = this.getContext();
context.drawImage(img, x, y, width, height);
// draw invisible detectable path for image
context.beginPath();
context.rect(x, y, width, height);
context.closePath();
});
// enable drag and drop
kinecticImg.draggable(true);
这个函数不起作用
kinecticImg.on("mousedown", function(){
this.moveToTop();
layer.draw();
结束
});
layer.clear();
layer.add(kinecticImg);
layer.draw();
}