2012-11-27 66 views
0

从这里开始,例如:http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-multiple-images-with-kineticjs/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(); 
    } 
} 

回答

0

我已经看到这个测试我的网页与Adobe Edge Inspect。但它只发生在浏览器上。使用适用于Android的Google Chrome浏览器可正常运行。