如何移除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中的对象？

回答

相关问题