ここの例から: http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-multiple-images-with-kineticjs/
これを PhoneGap プロジェクトでのテスト目的で使用したかったのです。問題は、画像を移動すると、元の開始位置に同じ画像が残ることです。画像が2回作成されたようです。これは、デスクトップから表示している場合には発生しません。これがどのように、またはなぜ起こっているのか知っている人はいますか?
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();
}
}