教你H5里的Canvas框架之Konva.js --元素节点的事件

2020/09/07 10:04 分类：技术交流浏览：3

name我们怎么样实现一些事件呢？比如点击事件，悬停事件，触摸事件等等。我们可以通过on() 绑定事件在元素节点身上哦！但是在学习这个之前，大家必须要有JavaScript或者Jquery的基础哦！

说明：桌面支持的事件类型有以下一些。

mouseover, mouseout, mouseenter, mouseleave, mousemove, mousedown, mouseup, wheel, click, dblclick,

dragstart, dragmove, 和 dragend

语法为：

元素节点.on('事件类型'，function(){

// 要绑定事件要执行的操作

})

举例：

<body>

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>

2. 手机事件

说明：konva支持的手机事件有：

touchstart, touchmove, touchend, tap, dbltap, dragstart, dragmove, 和 dragend

语法为：

元素节点.on('事件类型'，function(){

// 要绑定事件要执行的操作

})

例子为：

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>

注意：

一定要转为手机，才能看到效果哦。

3. 多事件

说明：多个事件同时绑定在一个对象上

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>

4. 桌面事件和手机事件

我们如果想要同时实现手机事件和桌面事件，应该怎么办呢？很简单，利用前面说到的多事件。比如鼠标悬停事件或者触摸事件 mousedown touchstart直接将两个事件写在一起即可啦！

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>

说明：如果将其中任意的一个事件取消掉，在对应的平台将不能看到效果哦！

5. 解除事件off()

说明：取消元素节点身上绑定的事件

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>

说明：

1. 按下矩形之后，会有文字显示，当点击取消事件按钮之后，再点击矩形，不会再有提示了哦！

2. 如果要取消同一类型的多个事件中的一个，可以通过名字哦，使用方式同jq.比如元素.off(事件类型.事件名字');

6. 取消或者激活事件节点.listening(参数)

作用:设置实现事件-oval.listening(true)

设置取消或者不实现事件-oval.listening(false)

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代表事件会生效，否则代表事件失效，需要重新激活，就可以实现事件。

7. 取消事件冒泡cancelBubble

作用：通过给元素绑定事件的时候，设置cancelBubble属性值true，取消冒泡。

<body>

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哦！

#标签：H5,前端，前端H5