4

こんにちはstackoverflowコミュニティ

KineticJS を使用して画像をレイヤー化しようとしています。残念ながら、それは機能しません。コード スニペットに見られるように、2 つの画像の Z-Index を設定しています。それらをログに記録すると、それらは同じ順序のままです。機能を見ることができますstartClouds(field)。この関数は、実際に機能する 2 の Z-Index を持つ雲を作成します。私はそれを1時間から修正しようとしていますが、なぜ機能しないのか本当にわかりません。

var title = new Image();
var title_p = new Image();
title.src = '/test/images/title_bg.png';
title_p.src = '/test/images/title_pic.png';

title.onload = function(){
    var title_background = new Kinetic.Image({
        x: 0,
        y: 0,
        image: title
    });
    field.add(title_background);
    title_background.setZIndex(1);
    field.draw();
    console.log('Z-Index of background: '+title_background.getZIndex());

    var title_pic = new Kinetic.Image({
        x: 0,
        y: 0,
        image: title_p
    });
    field.add(title_pic);
    title_pic.setZIndex(3);
    field.draw();
    console.log('Z-Index of Title: '+title_pic.getZIndex());

    startClouds(field);

    var start = new Kinetic.Text({
        x: 240,
        y: 160,
        text: '[Press Any Key to Start]',
        fontSize: 22,
        fontFamily: 'Calibri',
        fill: 'white'
    });
    field.add(start);
    field.draw();
    stage.add(field);
}

まっすぐに助けてくれてありがとう

4

2 に答える 2

1

kineticjs では、新しい画像をレイヤーに追加するたびに、インデックスが自動的に設定されます。インデックスは 0 から始まります

まず、次のようにコードを並べ替えます。

 //create objects first
 var title_background = new Kinetic.Image({
    x: 0,
    y: 0,
    image: title
 });
 var title_pic = new Kinetic.Image({
    x: 0,
    y: 0,
    image: title_p
 });
 var start = new Kinetic.Text({
    x: 240,
    y: 160,
    text: '[Press Any Key to Start]',
    fontSize: 22,
    fontFamily: 'Calibri',
    fill: 'white'
});
// now add objects to layer
field.add(title_background);   // z-index of 0
field.add(title_pic);          // z-index of 1
field.add(start);              // z-index of 2

startClouds(field);   // anything created by startClouds() is going to have z-index > 2

z-index の周りに物を移動したい場合は、避けるようにしてください

 .setZIndex()  //note: use this AFTER all the objects have been added to the layer

機能と使用

 .moveToTop() and .moveToBottom() //this way the movement is relative rather than specific.

さらにヘルプが必要な場合は、関数コードを jsfiddle に貼り付けてください。さらにサポートすることができます。

于 2013-01-21T14:52:37.813 に答える
0

この質問の解決に役立った jsFiddle を修正することは可能でしょうか? 私は Kinetic z-Index にかなり混乱しているので、ぜひ見てみたいです。http://www.wallerdeknaller.ch/test/td_functions.jsのようなファイルが存在しなくなったため、ここで受け入れられた回答は壊れたリンクでいっぱいです。

jsFiddle は、必要なすべてのコードと css がラップされた自己カプセル化されている場合に最適に機能すると思います。または、少なくとも CDN からライブラリをロードします。後世のためにフィドルを修復する手間をかけたくない場合は、ファイルを送っていただければ喜んで修復します。

これがSOの回答ガイドラインに従っていないことは承知しています。正解についてコメントする50の評判がありません。ごめんなさい！

于 2013-08-23T11:18:19.583 に答える