konva js destroy函数无法立即运行
作者：互联网
这是我的代码.我正在制作自定义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>解决方法:
您必须要求阶段自己重画-它不是自动的,可能是因为当重画之间要进行很多更改时,效率会很低.请参见下面的片段中的鼠标向上功能中添加的单行.运行该片段以查看效果.
<!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>标签：konvajs,javascript 来源： https://codeday.me/bug/20191110/2015169.html