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/

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