konva js destroy 函数不能立即工作

Question

这是我的代码。我正在定制 API 来安排 GUI。我想在单击红色按钮时销毁 window，但它不会立即起作用。当我点击另一个 window 时，Window 被销毁。我想立即销毁 window（而不是在单击另一个 window 之后）我该如何修复代码？（抱歉语法错误）

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script>
    <meta charset="utf-8">
    <title>Konva  Drag and Drop Demo</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #F0F0F0;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script>
    var width = window.innerWidth;
    var height = window.innerHeight;
    var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
    });
    var layer = new Konva.Layer();
    var window1 = create_window(0, 20, 20, 100, 200, "foo");
    var window2 = create_window(0, 200, 20, 100, 200, "bar");

    layer.add(window1);
    layer.add(window2);
    stage.add(layer);
    function create_window(ID, Pos_x, Pos_y, W, H, Title) {
        var group = new Konva.Group({
            x: Pos_x,
            y: Pos_y,
            rotation: 0,
            draggable: true
        });
        var title = new Konva.Rect({
            x: 0,
            y: 0,
            width: W,
            height: 40,
            fill: '#00D2FF',
            stroke: 'black',
            strokeWidth: 4
        });
        var simpleText = new Konva.Text({
            x: 5,
            y: 5,
            text: Title,
            fontSize: 30,
            fontFamily: 'Calibri',
            fill: 'black',
            align : 'center'
        });
        var window = new Konva.Rect({
            x: 0,
            y: 40,
            width: W,
            height: H - 40,
            fill: '#f1ff82',
            stroke: 'black',
            strokeWidth: 4,
            draggable: false
        });
        var Xbutton = new Konva.Rect({
            x: W - 40,
            y: H - 40,
            width: 40,
            height: 40,
            fill: '#ff000d',
            stroke: 'black',
            strokeWidth: 4,
            draggable: false
        });
        group.add(title);
        group.add(window);
        group.add(simpleText);
        group.add(Xbutton);
        group.on('mouseover', function() {
            document.body.style.cursor = 'pointer';
        });
        group.on('mouseout', function() {
            document.body.style.cursor = 'default';
        });
        Xbutton.on('mouseup', function () {
            alert("fasdfadsf");
            group.remove();
        });

        return group;
    }
</script>
</body>
</html>

Answer 1

您必须要求舞台自行重绘 - 它不是自动的，可能是因为在重绘之间发生大量更改时效率低下。请参阅下面代码段中鼠标弹起功能中添加的单行。运行看效果的片段。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script>
    <meta charset="utf-8">
    <title>Konva  Drag and Drop Demo</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #F0F0F0;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script>
    var width = window.innerWidth;
    var height = window.innerHeight;
    var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
    });
    var layer = new Konva.Layer();
    var window1 = create_window(0, 20, 20, 100, 200, "foo");
    var window2 = create_window(0, 200, 20, 100, 200, "bar");

    layer.add(window1);
    layer.add(window2);
    stage.add(layer);
    function create_window(ID, Pos_x, Pos_y, W, H, Title) {
        var group = new Konva.Group({
            x: Pos_x,
            y: Pos_y,
            rotation: 0,
            draggable: true
        });
        var title = new Konva.Rect({
            x: 0,
            y: 0,
            width: W,
            height: 40,
            fill: '#00D2FF',
            stroke: 'black',
            strokeWidth: 4
        });
        var simpleText = new Konva.Text({
            x: 5,
            y: 5,
            text: Title,
            fontSize: 30,
            fontFamily: 'Calibri',
            fill: 'black',
            align : 'center'
        });
        var window = new Konva.Rect({
            x: 0,
            y: 40,
            width: W,
            height: H - 40,
            fill: '#f1ff82',
            stroke: 'black',
            strokeWidth: 4,
            draggable: false
        });
        var Xbutton = new Konva.Rect({
            x: W - 40,
            y: H - 40,
            width: 40,
            height: 40,
            fill: '#ff000d',
            stroke: 'black',
            strokeWidth: 4,
            draggable: false
        });
        group.add(title);
        group.add(window);
        group.add(simpleText);
        group.add(Xbutton);
        group.on('mouseover', function() {
            document.body.style.cursor = 'pointer';
        });
        group.on('mouseout', function() {
            document.body.style.cursor = 'default';
        });
        Xbutton.on('mouseup', function () {
            alert("fasdfadsf");
            group.remove();
            stage.draw();       // <<<<<<<<< Draw the stage!
        });

        return group;
    }
</script>
</body>
</html>

konva js destroy 函数不能立即工作

konva js destroy function isn't working immediately

javascript

konvajs