KineticJS - удалить выбранное изображение

Question

Мой код находится в этом 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) Пользователь должен иметь возможность нажать «Добавить обезьяну» - под холстом, щелкнуть любое изображение (включая недавно добавленную обезьяну) и удалить его.

Я думаю, что как только я осуществил вышеизложенное, я должен лучше понять работу кинетики - на данный момент я сбит с толку!

Большое спасибо за помощь!

Answer 1

На мой взгляд, проще всего использовать переменную под названием selectedNode и назначить ее как фактический выбранный вами кинетический узел, а не его id.

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

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

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

я назвал selectedGroup в name: 'emptyNode' по инициализации и отмены выбора, так что вы можете сказать, когда нет выбранного узла.

Теперь, когда у вас есть Кинетический объект, хранящийся в переменной, вы можете легко вызвать destroy() (так как вы не хотите его кэшировать) на этом узле.

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

Рабочий пример: jsfiddle

Примечание: Мы хотим, чтобы уничтожить группу, потому что он содержит все якоря и изображение.

О также, так как вы объявили var layer; во всем мире в Вашей области применения, я должен был удалить var declartion для layer внутри initStage функции. Таким образом, layer доступен по всему миру для вашей функции Jquery Ready.