Kinetic JS - 如何隐藏给定组 ID 的所有锚点

Question

请看下面Link

我有以下代码：

// 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） 我觉得我的代码有点梨形了。

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

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

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

谁能看到我哪里出错了？

感谢您的帮助！

Answer 1

这就是为什么我希望 KineticJS 支持多个名称。如果我们能够使用类似的东西，这种方法会更干净：

get('.anchor')

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

所以我就是这样做的：

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

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

另请注意：一旦将锚添加到组中，我就隐藏了它们，这就是为什么在初始化时没有显示锚。

编辑： i=1 和 j=1 因为图像是组内的第一个孩子，锚点紧随其后。