0

以下のリンクをご覧ください。

次のコードがあります。

// hide all anchors
            var children = group.getChildren();
            for(var k=1; k < children.length; k++)
                children[k].hide(); // .remove() would also work, or .destroy()            

            group.on("click", function() {

                var id = this.getId();

                if(imageSelected !== false)
                {
                    // hide all anchors
                    var children = this.getChildren();
                    for(var k=1; k < children.length; k++)
                        children[k].hide(); // .remove() would also work, or .destroy()
                    layer.draw();

                    imageSelected = false;
                }
                else
                {
                    var children = this.getChildren();
                    for(var k=1; k < children.length; k++)
                        children[k].show(); 
                    layer.draw();                    
                    imageSelected = id;                                        
                }            
            });

            group.on("dragend", function() {
                    var children = this.getChildren();
                    for(var k=1; k < children.length; k++)
                        children[k].show(); 
                    layer.draw();     
                    var id = this.getId();               
                    imageSelected = id;                                        
            });

(注: imageSelected には現在のグループ ID のみが含まれている必要があります) 私のコードは少しナシ型になっていると思います。

基本的に、ユーザーがダース ベイダーの画像をクリックした場合、アンカーはダース ベイダーにのみ表示される必要があります。ダース ベイダーの画像をもう一度クリックすると、アンカーが消えます (つまり、画面にアンカーが表示されなくなります)。

ダース ベイダーが選択され、ユーザーがヨーダをクリックすると、ダース ベイダーの周りのアンカーが消える必要があります。その後、ヨーダの周りに表示されます。

これまでのところ、現在のグループのアンカーしか非表示にできません。これはあまり良くありません!

誰が私がどこで間違っているかを見ることができますか?

助けてくれてありがとう！

4

1 に答える 1

2

これが、KineticJS が複数の名前をサポートすることを望む理由です。次のようなものを使用できれば、このメソッドはよりクリーンになります。

get('.anchor')

ただし、各アンカーには複数のインスタンスが存在するため、アンカーに名前を付ける必要があるため、それぞれに ID を割り当てることはできません。

これが私がやった方法です：

bgレイヤーをクリックできるように、id を持つ背景の四角形を追加する必要がありました。

var bg = new Kinetic.Rect({
    width: stage.getWidth(),
    height: stage.getHeight(),
    x: 0,
    y: 0,
    id: 'bg'
});

layer.add(bg);

これでレイヤーをクリックして、targetNode を選択できるようになりました。

layer.on('mousedown', function (e) {
    var node = e.targetNode;
    select(node);
});

function select(node) {
    deselect();

    if (node.parent.nodeType = 'Kinetic.Group') {
        var children = node.parent.children;
        for (i = 1; i < children.length; i++) {
            if (children[i].getName() == 'topLeft' ||
                children[i].getName() == 'topRight' ||
                children[i].getName() == 'bottomRight' ||
                children[i].getName() == 'bottomLeft') {
                children[i].show();

            }
        }
    }
}

function deselect() {
    var children = layer.children;

    for (i = 1; i < children.length; i++) {
        var grandChildren = children[i].children;

        if (grandChildren) {
            for (j = 1; j < grandChildren.length; j++) {
                if (grandChildren[j].getName() == 'topLeft' ||
                    grandChildren[j].getName() == 'topRight' ||
                    grandChildren[j].getName() == 'bottomRight' ||
                    grandChildren[j].getName() == 'bottomLeft') {
                    grandChildren[j].hide();
                    layer.draw();
                }
            }
        }
    }
}

選択時にすべての選択を解除し、クリックしたノードがグループ (形状とアンカーを含む) である場合はアンカーを見つけます。をクリックした場合、アンカーを選択したくありません。bg

これがjsFiddleです

また、注意: アンカーがグループに追加されたら非表示にしたため、init にアンカーが表示されません。

編集： 画像はグループ内の最初の子であり、アンカーが続くためですi=1。j=1

于 2013-07-09T14:41:28.830 に答える