KineticJS - 원본 이미지 여기 예에서

Question

모바일

에 표시는 : http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-multiple-images-with-kineticjs/

은 내가 폰갭 프로젝트에 대한 몇 가지 테스트 목적으로이를 사용하고 싶었다. 문제는 일단 이미지가 움직이면 원래의 시작 위치에 붙어있는 동일한 이미지가 있다는 것입니다. 이미지가 두 번 생성 된 것과 같습니다. 바탕 화면에서 볼 때 이런 일이 발생하지 않으며, 어느 사람이 어떻게 또는 왜 그런 일이 발생하는지 알고 있습니까?

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(); 
    } 
} 

Answer 1

Adobe Edge Inspect를 사용하여이 페이지를 테스트 해 보았습니다. 하지만 브라우저에서만 발생합니다. Android 용 Chrome을 사용하면 정상적으로 작동합니다.