###### tags: `konva`, `canvas`, `javascript`
# 【自學筆記】konva入門 - Events

`Konva`是個`HTML5 Canvas JavaScript`的框架，透過`2d context`的擴展實現各種圖形功能，正好可以實現最近工作需求，就來研究看看囉

---

### Konva提供的事件

Konva可以很容易的監聽常用的事件：
* **Mouse events**
* `mouseover`
* `mouseout`
* `mouseenter`
* `mouseleave`
* `mousemove`
* `mousedown`
* `mouseup`
* `wheel`
* `click`
* `dblclick`
* **Touch events**
* `touchstart`
* `touchmove`
* `touchend`
* `tap`
* `dbltap`
* **Pointer events**
* `pointerdown`
* `pointermove`
* `pointereup`
* `pointercancel`
* `pointerover`
* `pointerenter`
* `pointerout`
* `pointerleave`
* `pointerclick`
* `pointerdblclick`
* **Drag events**
* `dragstart`
* `dragmove`
* `dragend`
* **Transform events**
* `transformstart`
* `transform`
* `transformend`

例如

<div id="container"></div>

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

var layer = new Konva.Layer();

// 弄個三角形
var triangle = new Konva.RegularPolygon({
    x: 80,
    y: 120,
    sides: 3,
    radius: 80,
    fill: '#00D2FF',
    stroke: 'black',
    strokeWidth: 4,
});

// 三角形的事件
triangle.on('mouseout', function () {
    console.log('Mouseout triangle');
});

triangle.on('mousemove', function () {
    var mousePos = stage.getPointerPosition();
    var x = mousePos.x - 190;
    var y = mousePos.y - 40;
    console.log('x: ' + x + ', y: ' + y);
});

// 弄個圓形
var circle = new Konva.Circle({
    x: 230,
    y: 100,
    radius: 60,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4,
});

// 圓形的事件
circle.on('mouseover', function () {
    console.log('Mouseover circle');
});
circle.on('mouseout', function () {
    console.log('Mouseout circle');
});
circle.on('mousedown', function () {
    console.log('Mousedown circle');
});
circle.on('mouseup', function () {
    console.log('Mouseup circle');
});

layer.add(triangle);
layer.add(circle);

// 把所有layer加進stage中
stage.add(layer);

### Drag & Drop

Konva可以非常容易得讓元件變成可拖放的狀態，只需加入一段程式即可

circle.draggable('true');

---

*參考資料: https://konvajs.org/docs/*

*新手工程師的筆記，純粹記錄學了些啥東西
如果有前輩高人讀了我的文，文中有任何錯誤再麻煩指教指教*