Question

来自此处的示例：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();
    }
}

Answer 1

我看过这个用Adobe Edge Inspect测试我的页面。但它只发生在它的浏览器上。使用Google Chrome for Android，它可以正常运行。

KineticJS - 移动设备上显示的原始图像

1 个答案: