Kinetic JS - 如何隐藏给定组ID的所有锚点 [英] Kinetic JS - how do you hide all the anchors for a given group ID

问题描述

请查看以下链接

我有以下代码：

// 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）
我认为我的代码有有点像梨形。

(Note: imageSelected should only contain the current group ID) I think my code has gone a bit pear-shaped.

基本上，如果用户点击darth vader图像 - 那么锚点必须只出现在darth vader上。
当他们再次点击darth vader图像时 - 锚点必须消失（即屏幕上没有锚点）

Basically, if the user clicks the darth vader image - then the anchors must appear on darth vader only. When they click the darth vader image again - then the anchors must disappear (ie no anchors on the screen)

如果选择darth vader并且用户点击yoda，然后darth vader周围的锚点必须消失。然后它们应该出现在yoda周围。

If darth vader is selected and the user clicks yoda, then the anchors around darth vader must disappear. They should then appear around yoda.

到目前为止，我只能隐藏当前组的锚点 - 这不是很好！

So far I can only hide anchors of the current group - which isn't very good!

谁能看到我出错的地方？

Can anyone see where I have gone wrong?

感谢您的帮助！

推荐答案

这就是为什么我希望KineticJS支持多个名称。如果我们能够使用以下内容，这种方法会更加清晰：

This is why I wish KineticJS supported multiple names. This method would be much cleaner if we were able to use something like:

get（'。anchor'）

但由于我们需要命名锚点，因为每个锚点会有多个实例，我们不能为每个锚点分配一个ID。

But since we need to name the anchors because there will be multiple instances of each anchor, we cannot assign them each an ID.

所以我就是这样做的：

我必须添加一个id bg的背景矩形 以便图层可点击：

I had to add a background rectangle with id bg so that the layer was clickable:

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

layer.add(bg);

现在可以点击图层，我们可以选择targetNode：

Now the layer can be clicked and we can select the 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

On select, we deselect everything and then we find the anchors IF the node we clicked on is a group (containing a shape and the anchors). We don't want to select any anchors if we click on the bg

，我们不想选择任何锚点这是 jsFiddle

Here's the jsFiddle

另请注意：我这些锚点一旦被添加到组中就隐藏了，这就是为什么在初始化时没有显示锚点的原因。

Also note: I hid the anchors once they were added to the group, that's why no anchors are shown on init.

编辑： i = 1 和 j = 1 因为图像是组内的第一个子节点，并且锚点跟随。

i=1 and j=1 because the image is the first child inside the group, and the anchors follow.

这篇关于Kinetic JS - 如何隐藏给定组ID的所有锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！