0

わかりましたので、私は 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>

4

1 に答える 1

2

あなたの問題は、関数background_layer内のステージに追加していることです。canvasBackgroundImage.onloadJavascript はスクリプト全体を実行し、question_container_layer最初に をステージに追加します。次に、イメージが読み込まbackground_layerれると、 がステージに追加されます。その結果、背景画像は常に長方形レイヤーの上に表示されます。

これを修正するには、レイヤーを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

于 2013-07-17T03:20:47.067 に答える