konva js破坏功能不能立即工作答案

【问题标题】：konva js destroy function isn't working immediatelykonva js破坏功能不能立即工作
【发布时间】：2021-07-16 16:46:21
【问题描述】：

这是我的代码。我正在制作我的自定义 API 来安排 GUI。当我单击红色按钮时，我想销毁窗口，但它没有立即工作。当我单击另一个窗口时，窗口被破坏。我想立即销毁窗口（不是在单击另一个窗口后）如何修复代码？（抱歉语法不好）

<!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>

【问题讨论】：

标签： javascript konvajs

【解决方案1】：

您必须要求舞台自行重绘 - 这不是自动的，可能是因为在重绘之间发生大量更改时，这样做效率低下。请参阅下面 sn-p 中鼠标向上功能中添加的单行。运行sn -p 看看效果。

<!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>

【讨论】：