<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva@9.3.18/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Listen or Don’t Listen to Events Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
#buttons {
position: absolute;
top: 5px;
left: 10px;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="buttons">
<button id="listen">Listen</button>
<button id="dontListen">Dont' Listen</button>
</div>
<script>
function writeMessage(message) {
text.text(message);
}
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight,
});
var layer = new Konva.Layer();
var text = new Konva.Text({
x: 70,
y: 10,
fontFamily: 'Calibri',
fontSize: 24,
text: '',
fill: 'black',
});
var oval = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 50,
scaleX: 2,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
strokeScaleEnabled: false,
listening: false,
});
oval.on('mouseover', function () {
writeMessage('Mouseover oval');
});
oval.on('mouseout', function () {
writeMessage('');
});
layer.add(oval);
layer.add(text);
stage.add(layer);
document.getElementById('listen').addEventListener(
'click',
function () {
oval.listening(true);
layer.drawHit();
},
false
);
document.getElementById('dontListen').addEventListener(
'click',
function () {
oval.listening(false);
layer.drawHit();
},
false
);
</script>
</body>
</html>
|