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 に答える