Question

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

＆＃13;

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

＆＃13;

Answer 1

你必须要求舞台重绘自己 - 这不是自动的，可能是因为当重绘之间发生很多变化时效率会很低。请参阅下面的代码段中的鼠标向上功能中添加的单行。运行代码段以查看效果。

＆＃13;

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

＆＃13;

konva js destroy function不会立即工作

1 个答案: