从这里的例子：http: //www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-multiple-images-with-kineticjs/
我想在 PhoneGap 项目中将其用于某些测试目的。问题是，一旦图像被移动，就会有相同的图像卡在原始起始位置。就像图像已经创建了两次。从桌面查看时不会发生这种情况，有人知道这是如何发生的或为什么会发生吗？
function loadImages(sources, callback){
var images = {};
var loadedImages = 0;
var numImages = 0;
for (var src in sources) {
numImages++;
}
for (var src in sources) {
images[src] = new Image();
images[src].onload = function(){
if (++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
function initStage(images){
var stage = new Kinetic.Stage("container", wW, wH);
var layer = new Kinetic.Layer();
var darthVaderImg = new Kinetic.Image({
image: images.darthVader,
x: 100,
y: 40
});
darthVaderImg.draggable(true);
darthVaderImg.on("dragstart", function(){
this.moveToTop();
stage.draw();
});
layer.add(darthVaderImg);
// yoda
var yodaImg = new Kinetic.Image({
image: images.yoda,
x: 350,
y: 55,
});
yodaImg.draggable(true);
yodaImg.on("dragstart", function(){
this.moveToTop();
stage.draw();
});
layer.add(yodaImg);
stage.add(layer);
}
var wH = window.innerHeight,
wW = window.innerWidth,
mCanvas = document.getElementById('container'),
app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
app.receivedEvent('deviceready');
var sources = {
darthVader: "img/darth-vader.jpg",
yoda: "img/yoda.jpg"
};
mCanvas.style.width = wW;
mCanvas.style.height = wH;
loadImages(sources, initStage);
},
receivedEvent: function(id) {
}
};
if( typeof PhoneGap !== 'undefined' ) {
app.initialize();
}else{
window.onload = function(){
app.onDeviceReady();
}
}