How to listen to an event on a canvas shape with Svelte and Konva?
With svelte-konva
you can easily listen to user input events (click
, dblclick
, mouseover
, tap
, dbltap
, touchstart
, etc...) and drag&drop events (dragstart
, dragmove
, dragend
). For this you can pass a callback function to the prop named on<Konva event name>
which is then called by svelte-konva every time the event is fired. You can also access the Konva event payload object inside the callback function as its argument.
<script>
import { Stage, Layer, Rect } from 'svelte-konva';
function handleClick(e) {
window.alert(`Clicked on rectangle: ${e.type}`);
}
</script>
<Stage width={window.innerWidth} height={window.innerHeight}>
<Layer>
<Rect
x={100}
y={100}
width={400}
height={200}
fill="blue"
onpointerclick={handleClick}
/>
</Layer>
</Stage>
For the full list of events take a look into on() method documentation.
Bubbling
Konva events bubble up by default. To prevent this you can set the cancelBubble
property of the Konva event to true
:
function handleClick(e) {
// Cancel bubbling
e.cancelBubble = true;
}