KineticJS - 删除所选图像

时间:2013-07-10 16:05:26

标签: kineticjs

我的代码在link

具体看:

$d('#delete').click(function(){
        var toRemove = imageSelected;
        if(toRemove !== false)
        {
            var groups = layer.get('Group');
            for(var j=0; j < groups.length; j++)
            {
                var gid = groups[j].getId();

                if(gid == toRemove)
                {           
                    groups[toRemove].destroy();
                    imageSelected = false;
                    layer.clear();
                    deselect();             
                    sources[toRemove] = null;
                    j = groups.length;
                }           
            }
        }       
    }); 

我想做什么: 1)用户应该可以单击任何图像(即出现锚点),然后单击画布下的“删除”链接。然后图像应该消失(我不需要缓存等)。

2)用户应该可以点击“添加猴子” - 在画布下,点击任意图像(包括新添加的猴子)并删除它。

我认为,一旦我实施了上述内容 - 我应该更好地理解动能的运作 - 现在我感到困惑!

非常感谢您的帮助!

1 个答案:

答案 0 :(得分:2)

在我看来,我认为使用名为selectedNode的变量并将其指定为您选择的实际动态节点而不是id更容易。

selectedGroup = new Kinetic.Shape({name:'emptyNode'});

function select(node) {
  ...
  selectedGroup = node.parent;
  ...
}

function deselect() {
  ...
  selectedGroup = new Kinetic.Shape({name:'emptyNode'});
  ...
}

我在init上将selectedGroup命名为name: 'emptyNode'并取消选择,以便您可以判断何时没有选择节点。

现在您已将Kinetic对象存储在变量中,您可以轻松地在该节点上调用destroy()(因为您不想缓存它)。

$d(function() {
  $d('#delete').click(function(){
    if (selectedGroup.getName() !== 'emptyNode') {
        selectedGroup.destroy();
        layer.draw();
    }
  });   
});

工作示例:jsfiddle

注意:我们想破坏群组,因为它包含所有锚点和图像。

哦,因为您在应用程序范围内全局声明var layer;,我必须删除var函数中layer的{​​{1}}声明。这样,Jquery Ready函数可以全局访问initStage