KineticJS - исходное изображение, отображаемое на мобильном устройстве

Из примера здесь: 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();
    }
}   

person Luke Snowden    schedule 27.11.2012    source источник


Ответы (1)


Я видел, как это проверяло мою страницу с помощью Adobe Edge Inspect. Но это происходит только в его браузере. С Google Chrome для Android работает нормально.

person Rodrigo Villani    schedule 01.12.2012