web前端技术分享之：Canvas框架之Konva.js --元素节点的事件
作者：互联网
name我们怎么样实现一些事件呢？比如点击事件，悬停事件，触摸事件等等。我们可以通过on() 绑定事件在元素节点身上哦！但是在学习这个之前，大家必须要有JavaScript或者Jquery的基础哦！
说明：桌面支持的事件类型有以下一些。
mouseover, mouseout, mouseenter, mouseleave, mousemove, mousedown, mouseup, wheel, click, dblclick,
dragstart, dragmove, 和 dragend
语法为：
元素节点.on('事件类型'，function(){
// 要绑定事件要执行的操作
})
举例：
<body>
<div id="box"></div>
<script>
let stage = new Konva.Stage({
container: '#box',
width: window.innerWidth,
height: window.innerHeight
})
let layer = new Konva.Layer();
// 矩形
let rect = new Konva.Rect({
width: 200,
height: 200,
fill: 'red'
})
// 显示文字
let text = new Konva.Text({
x: 10,
y: 10,
fontSize: 24,
fill: 'green',
text: '鼠标移开啦'
})
rect.on('mouseout', function () {
// 将文字加到层上
layer.add(text);
// 重新绘制
layer.draw();
});
layer.add(rect);
stage.add(layer);
</script>
</body>
- 手机事件
说明：konva支持的手机事件有：
touchstart, touchmove, touchend, tap, dbltap, dragstart, dragmove, 和 dragend
语法为：
元素节点.on('事件类型'，function(){
// 要绑定事件要执行的操作
})
例子为：
<div id="box"></div>
<script>
let stage = new Konva.Stage({
container: '#box',
width: window.innerWidth,
height: window.innerHeight
})
let layer = new Konva.Layer();
// 矩形
let rect = new Konva.Rect({
width: 200,
height: 200,
fill: 'red'
})
// 显示文字
let text = new Konva.Text({
x: 10,
y: 10,
fontSize: 24,
fill: 'green',
text: '放在上面啦'
})
// 注意：只有手机才能看到哦，如果要用电脑看，需要转换为手机状态哦
rect.on('touchend', function () {
// 将文字加到层上
layer.add(text);
// 重新绘制
layer.draw();
});
layer.add(rect);
stage.add(layer);
</script>
注意：
一定要转为手机，才能看到效果哦。
- 多事件
说明：多个事件同时绑定在一个对象上
<div id="box"></div>
<script>
let stage = new Konva.Stage({
container: '#box',
width: window.innerWidth,
height: window.innerHeight
})
let layer = new Konva.Layer();
// 矩形
let rect = new Konva.Rect({
width: 200,
height: 200,
fill: 'red'
})
// 显示文字
let text = new Konva.Text({
x: 10,
y: 10,
fontSize: 24,
fill: 'green',
text: ''
})
// 注意：只有手机才能看到哦，如果要用电脑看，需要转换为手机状态哦
numEvents = 0;
rect.on('mouseover mousedown mouseup', function () {
text.text('Multi-event binding! Events: ' + ++numEvents);
layer.draw();
});
rect.on('mouseout', function () {
text.text('');
layer.draw();
});
layer.add(text);
layer.add(rect);
stage.add(layer);
</script>
- 桌面事件和手机事件
我们如果想要同时实现手机事件和桌面事件，应该怎么办呢？很简单，利用前面说到的多事件。比如鼠标悬停事件或者触摸事件 mousedown touchstart直接将两个事件写在一起即可啦！
<div id="box"></div>
<script>
let stage = new Konva.Stage({
container: '#box',
width: window.innerWidth,
height: window.innerHeight
})
let layer = new Konva.Layer();
// 矩形
let rect = new Konva.Rect({
width: 200,
height: 200,
fill: 'red'
})
// 显示文字
let text = new Konva.Text({
x: 300,
y: 10,
fontSize: 12,
fill: 'green',
text: ''
})
rect.on('mousedown touchstart', function () {
text.text('事件是鼠标按下或者手指触摸 ' );
layer.draw();
});
layer.add(text);
layer.add(rect);
stage.add(layer);
</script>
说明：如果将其中任意的一个事件取消掉，在对应的平台将不能看到效果哦！
- 解除事件off()
说明：取消元素节点身上绑定的事件
<div id="box"></div>
<button id="delete">取消事件</button>
<script>
let stage = new Konva.Stage({
container: '#box',
width: window.innerWidth,
height: window.innerHeight
})
let layer = new Konva.Layer();
// 矩形
let rect = new Konva.Rect({
width: 200,
height: 200,
fill: 'red'
})
// 显示文字
let text = new Konva.Text({
x: 300,
y: 10,
fontSize: 12,
fill: 'green',
text: ''
})
var deleteEvent = document.getElementById("delete");
deleteEvent.addEventListener('click',function(){
rect.off('mousedown');
text.text('' );
layer.draw();
})
rect.on('mousedown touchstart', function () {
text.text('事件是鼠标按下或者手指触摸 ' );
layer.draw();
});
// 点击取消按钮，取消绑定的事件
layer.add(text);
layer.add(rect);
stage.add(layer);
</script>
说明：
-
按下矩形之后，会有文字显示，当点击取消事件按钮之后，再点击矩形，不会再有提示了哦！
-
如果要取消同一类型的多个事件中的一个，可以通过名字哦，使用方式同jq.比如元素.off(事件类型.事件名字');
- 取消或者激活事件节点.listening(参数)
作用:设置实现事件-oval.listening(true)
设置取消或者不实现事件-oval.listening(false)
<div id="box"></div>
<button id="btn1">绑定事件</button>
<button id="btn2">取消事件</button>
<script>
let stage = new Konva.Stage({
container: '#box',
width: window.innerWidth,
height: window.innerHeight
})
let layer = new Konva.Layer();
// 矩形
let rect = new Konva.Rect({
width: 200,
height: 200,
fill: 'red'
})
// 显示文字
let text = new Konva.Text({
x: 300,
y: 10,
fontSize: 12,
fill: 'green',
text: ''
})
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
// 绑定事件
rect.on('mousedown', function () {
text.text('事件是鼠标按下');
layer.draw();
});
// 激活事件
btn1.addEventListener('click', function () {
rect.listening(true);
text.text('激活了事件');
layer.draw();
})
// 取消事件
btn2.addEventListener('click', function () {
rect.listening(false);
text.text('不再有鼠标悬停事件');
layer.draw();
})
// 点击取消按钮，取消绑定的事件
layer.add(text);
layer.add(rect);
stage.add(layer);
</script>
注意：
参数为true或者是false，分别代表要不要绑定事件在元素身上，如果为true代表事件会生效，否则代表事件失效，需要重新激活，就可以实现事件。
- 取消事件冒泡cancelBubble
作用：通过给元素绑定事件的时候，设置cancelBubble属性值true，取消冒泡。
<body>
<div id="container"></div>
<script>
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight,
});
var layer = new Konva.Layer();
var group = new Konva.Group();
var circle = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
});
circle.on('click', function (evt) {
alert('你点击了圆圈');
// 添加这句话，取消冒泡
// evt.cancelBubble = true;
});
group.on('click', function () {
alert('你点击了组');
});
layer.on('click', function () {
alert('你点击了层');
});
group.add(circle);
layer.add(group);
stage.add(layer);
</script>
</body>
</html>
注意：
evt.cancelBubble = true;就是取消冒泡，但是注意函数的参数就是evt哦！
标签：web,Canvas,--,text,Konva,layer,let,事件,new 来源： https://blog.51cto.com/15128443/2659839