Question

大家好，

    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/教程中获取）。

目的：当我双击时，我希望它删除三角形。

问题：

我。可以删除三角形，但是当您重绘三角形时，我将在删除它的当前位置下方绘制。删除它并一次又一次重绘时会发生同样的事情。经过几次重绘后，它将最终出现在我的屏幕底部。

II。 Alert（）用于弹出通知吗？当我使用alert（）时，可以从屏幕上删除三角形。如果没有，它会留在那里。

无论如何通过鼠标事件移除对象，当发生另一个鼠标事件时，它会在同一位置绘制对象吗？

Answer 1

希望人们能够为他们的问题提供一个有效的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/

Answer 2

我同意PAEz。你应该重写你的代码。

但实际上从对象本身移除一个对象可能有点棘手，可能是某些版本的Kineticjs中的错误。

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

});

如何删除KineticJs中的对象？

2 个答案: