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周围的锚点必须消失。然后他们应该出现在尤达周围。

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

谁能看到我哪里出错？

感谢您的帮助！

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

另请注意：我将锚点添加到组后隐藏了锚点，这就是为什么init上没有锚点显示的原因。

修改： i=1和j=1，因为图片是该组中的第一个子图片，并且其后有锚点。

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

1 个答案: