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

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

---

### Konva的Selectors

Konva可以使用`find()`，輕鬆得找到元素
共有三種方式：[範例](https://codepen.io/niodoshaba-the-flexboxer/pen/YzaKeQR)
:::info
Select By Id
:::
在創建圖形的時候，給他一個id的屬性，就可以透過`findOne('#id')`找到他了

<div id="container"></div>
<div id="buttons">
<!-- 用來觸發find() -->
    <input type="button" id="RectId" value='RectId'/>
</div>

// 先創建一個Stage
var stage = new Konva.Stage({
    container: 'container',
    width: 500,
    height: 500
});

// 然後創建一個layer
var layer = new Konva.Layer();

// 用創建一個圖形，並設定Id
 var rect = new Konva.Rect({
    x: 300,
    y: 90,
    width: 100,
    height: 50,
    fill: 'green',
    strokeWidth: 3,
    offset: {
        x: 50,
        y: 25,
    },
    draggable: true,
    id: 'RectId',
 });
layer.add(rect);
stage.add(layer);
// 畫出來
layer.draw();

// 用find()找到id
document.getElementById('RectId').addEventListener('click',function () {
    var find_id = layer.findOne('#RectId');
    console.log(RectId)
});

:::info
Select By Type
:::
透過find()也可以找到所有相同的圖形種類

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

// 先創建一個Stage
var stage = new Konva.Stage({
    container: 'container',
    width: 500,
    height: 500
});

// 然後創建一個layer
var layer = new Konva.Layer();

// 用迴圈創建一堆circle
for (var n = 0; n < 10; n++) {
var circle = new Konva.Circle({
    x: Math.random() * stage.width(),
    y: Math.random() * stage.height(),
    radius: Math.random() * 50 + 25,
    fill: 'red',
    strokeWidth: 3,
    stroke: 'black',
    });
  layer.add(circle);
}

stage.add(layer);
// 畫出來
layer.draw();

// 用find()找到所有的circle
var find_circle = layer.find('Circle');
console.log(find_circle)

:::info
Select By Name
:::
在創建圖形的時候，給他一個name的屬性，就可以透過`find('.name')`找到他了
(類似`css class`)

<div id="container"></div>
<div id="buttons">
<!-- 用來觸發find() -->
    <input type="button" id="RectName" value='RectName'/>
</div>

// 先創建一個Stage
var stage = new Konva.Stage({
    container: 'container',
    width: 500,
    height: 500
});

// 然後創建一個layer
var layer = new Konva.Layer();

// 用創建多個圖形，並設定name
var name1 = new Konva.Rect({
    x: 100,
    y: 20,
    width: 12,
    height: 33,
    fill: 'blue',
    strokeWidth: 3,
    offset: {
        x: 50,
        y: 25,
    },
    draggable: true,
    name: 'blue',
});
layer.add(name1);

// 用創建多個圖形，並設定name
var name2 = new Konva.Rect({
    x: 120,
    y: 40,
    width: 12,
    height: 33,
    fill: 'blue',
    strokeWidth: 3,
    offset: {
        x: 50,
        y: 25,
    },
    draggable: true,
    name: 'blue',
});
layer.add(name2);

// 用創建多個圖形，並設定name
var name3 = new Konva.Rect({
    x: 140,
    y: 60,
    width: 12,
    height: 33,
    fill: 'blue',
    strokeWidth: 3,
    offset: {
        x: 50,
        y: 25,
    },
    draggable: true,
    name: 'blue',
});
layer.add(name3);

stage.add(layer);
// 畫出來
layer.draw();

// 用find()找到所有的name (類似css class)
document.getElementById('name').addEventListener('click',function () {
    var find_class = layer.find('.blue')
    console.log(find_class)
});

---

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

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