自定义事件监听范围

获取Konva最新的信息

我们可以使用 hitFunchitStrokeWidth 改变事件响应区域

1. 什么是 hitFunc?

我们可以通过设置 hitFunc 属性来创建一个定义事件响应区域函数。Konva 通过这个函数绘制一个区域用于监听事件被响应。使用自定义的函数的好处有很多,比方说:扩大一个图形交互的响应区域、让一个图形的局部相应事件而其它部分不能、或者运用简单的函数提高渲染性能。

查看自定义 sceneFunc最佳实践 同样也适用于 hitFunc

hitFunc 包含两个入参:Konva.Context 和 图形的实例。

通过 hitFunc 你可以完全掌控响应区域的绘制。

2. 什么是 hitStrokeWidth?

对于某些图形,像 Konva.Line 重写它的 hitFunc 会比较困难。某些情况下你仅仅知识像让事件响应的区域更粗一点。
这种情况更适合使用 hitStrokeWidth

说明:尝试鼠标 mouseover, mouseout, mousedown, 和 mouseup 图形,观察响应区域已经超过了图形范围;

Also you can toggle hit canvas too see how it looks. It may be useful for debugging.

Konva Custom_Hit_Region Demoview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Custom Hit Function Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
button {
position: absolute;
top: 5px;
left: 5px;
z-index: 2;
}
</style>
</head>

<body>
<button id="toggle">Toggle hit canvas</button>
<div id="container"></div>
<script>
function writeMessage(message) {
text.text(message);
layer.draw();
}

var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});

var layer = new Konva.Layer();
stage.add(layer);

var text = new Konva.Text({
x: 10,
y: 30,
fontSize: 24,
fill: 'black'
});
layer.add(text);

var star = new Konva.Star({
x: stage.width() / 2,
y: stage.height() / 2,
numPoints: 7,
innerRadius: 50,
outerRadius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
hitFunc: function(context) {
context.beginPath();
context.arc(0, 0, this.outerRadius() + 10, 0, Math.PI * 2, true);
context.closePath();
context.fillStrokeShape(this);
}
});
layer.add(star);

var line = new Konva.Line({
x: 50,
y: 100,
points: [0, 0, 50, 0, 50, 100, 0, 100],
tension: 1,
strokeWidth: 1,
hitStrokeWidth: 20,
stroke: 'black'
});
layer.add(line);

layer.draw();

star.on('mouseover', function() {
writeMessage('Mouseover star');
});
star.on('mouseout', function() {
writeMessage('Mouseout star');
});
star.on('mousedown', function() {
writeMessage('Mousedown star');
});
star.on('mouseup', function() {
writeMessage('Mouseup star');
});

line.on('mouseover', function() {
writeMessage('Mouseover line');
});
line.on('mouseout', function() {
writeMessage('Mouseout line');
});
line.on('mousedown', function() {
writeMessage('Mousedown line');
});
line.on('mouseup', function() {
writeMessage('Mouseup line');
});

document.getElementById('toggle').addEventListener('click', function() {
layer.toggleHitCanvas();
});
</script>
</body>
</html>