0

大家好，

    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() 时，可以从屏幕上删除三角形。如果没有，它会留在那里。

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

4

2 回答 2

3

希望人们能够为他们的问题提供一个有效的 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-18T08:12:24.393 回答
0

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

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

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

});
于 2012-12-18T12:33:51.837 回答