如何移除KineticJs中的對象？

大家好，如何移除KineticJs中的對象？

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 1230, 
    height: 40 
    }); 

    var layer = new Kinetic.Layer(); 
    var rectHeight = 30; 
    var rectWidth = 100; 
    var rectY = (stage.getHeight() - rectHeight)/2; 

    var triangle = new Kinetic.RegularPolygon({ 
     x: 25, 
     y: 25, 
     sides: 3, 
     radius: 20, 
     fill: '#00D2FF', 
     stroke: 'black', 
     strokeWidth: 2, 
     draggable: true, 
     dragBoundFunc: function(pos) { 
      return { 
       x: pos.x, 
       y: this.getAbsolutePosition().y 
      } 
     } 
    }); 

    // add cursor styling 
    triangle.on('mouseover', function() { 
     document.body.style.cursor = 'pointer'; 
    }); 
    triangle.on('mouseout', function() { 
     document.body.style.cursor = 'default'; 
    }); 

    triangle.on('dblclick', function(){ 
     //alert("down"); 
     layer.clear(); 
     stage.clear(); 
    }); 

    layer.add(triangle); 
    stage.add(layer); 
}

這是我的代碼片段。這將創建一個可拖動的三角形（從教程http://kineticjs.com/中獲得）。

目的：我想要它刪除三角形時，我雙擊它。

問題：

i。三角形可以被刪除，但是當您重繪三角形時，我會在當前位置下面繪製它被刪除的位置。當它被移除並重復重繪時，也會發生同樣的事情。經過幾次重繪後，它會在我的屏幕底部結束。

ii。 Alert（）用於彈出通知對嗎？當我使用alert（）時，三角形可以從屏幕上移除。如果不是，它就停留在那裏。

是否有通過鼠標事件刪除對象，當另一個鼠標事件發生時，它會將對象繪製在同一位置？

來源

2012-12-18 CNLSH

希望人們能夠提供他們的問題的工作JSFiddle，它是一種痛苦，我必須自己做，而且如果你願意的話，你更有可能得到迴應。

如果你想讓它重新出現在同一個地方，不要去掉三角形，爲什麼不把它隱藏起來呢？

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 1230, 
    height: 40 
}); 

background = new Kinetic.Layer(); 
background.add(new Kinetic.Rect({ 
    x: 0, 
    y: 0, 
    width: stage.getWidth(), 
    height: stage.getHeight(), 
    name: 'backLayer' 
})); 

// this rect will allow us to use mouse events on the stage. There's probably a better way to do this, but I don't know it. 
stage.add(background); 

var layer = new Kinetic.Layer(); 
var rectHeight = 30; 
var rectWidth = 100; 
var rectY = (stage.getHeight() - rectHeight)/2; 

var triangle = new Kinetic.RegularPolygon({ 
    x: 25, 
    y: 25, 
    sides: 3, 
    radius: 20, 
    fill: '#00D2FF', 
    stroke: 'black', 
    strokeWidth: 2, 
    draggable: true, 
    dragBoundFunc: function(pos) { 
     return { 
      x: pos.x, 
      y: 25 
     } 
    } 
}); 

// add cursor styling 
triangle.on('mouseover', function() { 
    document.body.style.cursor = 'pointer'; 
}); 

triangle.on('mouseout', function() { 
    document.body.style.cursor = 'default'; 
}); 

triangle.on('dblclick', function(evt) { 
    this.hide(); 
    layer.draw(); 
    evt.cancelBubble = true; 
}); 

background.on('click', function() { 
    triangle.show(); 
    layer.draw(); 
}); 

layer.add(triangle); 
stage.add(layer);

http://jsfiddle.net/RELQp/

來源

2012-12-18 08:12:24 PAEz

嘿@PAEz，我很抱歉沒有發佈整個代碼，因爲它太長了。如果我有任何問題，下次再做。並且非常感謝你！基本上，這是我想要做的。是否可以讓三角形出現在我點擊的位置？因爲當我雙擊三角形時，它隱藏在X點。所以如果我點擊Z點，它可以在Z點取代X點取消隱藏嗎？ – CNLSH

@CNLSH你不需要發佈整個事情，只是做一個測試用例就像我顯示的問題，我不能總是被困擾自己做這件事，我不喜歡張貼答案，我不能測試。這就是你想要的... http://jsfiddle.net/RELQp/1/ – PAEz

謝謝@PAEz。這正是我想要的。非常感謝。我將來會做一個測試用例。 – CNLSH

我派斯同意。你應該重寫你的代碼。

但是實際上從對象中移除一個對象本身可能有點棘手，並且可能是某些版本的Kineticjs中的一個bug。

triangle.on('dblclick', function(evt) { 
    var node=evt.shape; 
    layer.remove(node); 
    layer.draw(); 

});

來源

2012-12-18 12:33:51 Jonke

如何移除KineticJs中的對象？

回答

相關問題