KineticJS图像和Rect未正确分层

KineticJS Image and Rect Not Layering Correctly

本文关键字：分层 Rect 图像 KineticJS      更新时间：2023-09-26

好吧，所以我是KineticJS的新手，在玩它的时候，我似乎无法将图像背景与图像上方的矩形相结合。现在，如果我删除背景图像，则显示矩形。即使我把矩形代码放在图像上方，仍然不会显示在顶部。当然，我错过了一些简单的东西，但我似乎不知道它是什么，在stackoverflow上也找不到类似的问题。谢谢你的帮助。

这是我的代码：

<!DOCTYPE HTML>
<html>
<head>
    <style>
    </style>
</head>
<body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>
    <script defer="defer">
        var stage = new Kinetic.Stage({
            container: 'container',
            width: 600,
            height: 450
        });
        //Layer for our background
        var background_layer = new Kinetic.Layer();
        //Canvas background image
        var canvasBackgroundImage = new Image();
        canvasBackgroundImage.onload = function() {
            var backgroundImage = new Kinetic.Image({
                x: 0,
                y: 0,
                image: canvasBackgroundImage,
                width: 600,
                height: 450
            });
            background_layer.add(backgroundImage);
            stage.add(background_layer);
        };
        canvasBackgroundImage.src = 'images/quiz_back.jpg'; //Location of our background
        //Question container
        var question_container_layer = new Kinetic.Layer();
        var question_container = new Kinetic.Rect({
            x: 100,
            y: 100,
            width: 200,
            height: 200,
            fill: 'green',
            stroke: 'black',
            strokeWidth: 2
        });
        question_container_layer.add(question_container);
        stage.add(question_container_layer);
    </script>
</body>

您的问题是将background_layer添加到canvasBackgroundImage.onload函数内的阶段。Javascript将贯穿整个脚本，并首先将question_container_layer添加到stage中，然后当加载图像时，background_layer将添加到stage中。因此，背景图像总是出现在矩形层的顶部。

要解决此问题，请在onload函数之外的阶段中添加层：

<script defer="defer">
    var stage = new Kinetic.Stage({
        container: 'container',
        width: 600,
        height: 450
    });
    //Layer for our background
    var background_layer = new Kinetic.Layer();
    var question_container_layer = new Kinetic.Layer();
    stage.add(background_layer);
    stage.add(question_container_layer);
    //Canvas background image
    var canvasBackgroundImage = new Image();
    canvasBackgroundImage.onload = function() {
        var backgroundImage = new Kinetic.Image({
            x: 0,
            y: 0,
            image: canvasBackgroundImage,
            width: 600,
            height: 450
        });
        background_layer.add(backgroundImage);
        background_layer.draw();
    };
    canvasBackgroundImage.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; //Location of our background
    //Question container
    var question_container = new Kinetic.Rect({
        x: 50,
        y: 50,
        width: 200,
        height: 200,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 2
    });
    question_container_layer.add(question_container);
    question_container_layer.draw();
</script>

为了避免将来出现这种情况，除非有动态层要添加到阶段，否则我建议在执行其他操作之前将所有已知层添加到阶段。这样就可以控制图层的顺序。

或者，也可以使用zIndex特性对图层进行排序。请参阅此处：Kinetic.Container#setZIndex

相关文章：