Question

我是Kineticjs的新手，我正在创建一个带有三个图像的画布，1）背景图像2）播放图标3）暂停图标。

背景图片上会有一个播放图标，当我点击播放图标时，它将被替换为暂停图标，mp3将在后台播放。在这里，我的问题是一切正常，正如我预期的那样。即，当我加载页面时，有时候播放图标出现在背景图像的顶部，有时会落后于背景图像。不知道为什么？

请帮助始终显示背景图像顶部的播放图标。提前谢谢。

 var stage = new Kinetic.Stage({
        container: 'container',
        width: 1025,
        height: 770
        });
        var layer = new Kinetic.Layer();
        stage.add(layer);

        var sources = {
            bgimg: {'img_src':'bg.png','x':'0','y':'0','w':'1024','h':'768','id':'bg'},
        };


        $.each(sources, function(key, value){ 
            var imageObj = new Image();
            imageObj.src = value['img_src'];
            imageObj.onload = function() {
                var image = new Kinetic.Image({
                    x: value['x'],
                    y: value['y'],
                    image: imageObj,
                    width: value['w'],
                    height: value['h']
                });

                layer.add(image);
                layer.draw();
            };
        });

        var pauseImageObj = new Image();
        pauseImageObj.src = 'pause.png';
        var paused = false;

        var playImageObj = new Image();
        playImageObj.onload = function() {
            var playImage = new Kinetic.Image({
                x: 500,
                y: 500,
                image: playImageObj,
                width: 64,
                height: 64,
                id: 'play'
            });

            layer.add(playImage);
            layer.draw();

            playImage.on('click', function() {
                if(paused == false){
                    layer.get('#play')[0].setImage(pauseImageObj);
                    paused = true;
                }else{
                    layer.get('#play')[0].setImage(playImageObj);
                    paused = false;
                }
                   layer.draw();
                   togglePlay();
            });

        };
        playImageObj.src = 'play.png';

Answer 1

您在加载图片后插入Kinetic.Image。但是你们中的任何一个图像都可能首先加载（按钮或背景）。你可以用这个：

background.moveToBottom();

或

button.moveToTop();

Kineticjs图像有时显示在顶部，有时不显示

1 个答案: