###### tags: `konva`, `canvas`, `javascript`
# 【自學筆記】konva入門 - 基本介紹

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

---

### Konva的基本結構

Konva有一定的結構，有些類似於DOM結構，通過add、remove..實現節點的添加和刪除

Konve Tree主要包含四個部分：`Stage`、`Layer`、`Group`、`Shape`

:::info
Stage根節點
:::
創建一個`div`節點作為事件的接收層，根據事件觸發時的資訊來處理。
一個`Stage`可以包含多個`Layer`

:::info
Layer圖層
:::
`Layer`會創建一個`Canvas`節點，用來繪製`Canvas`的元素。
一個`Layer`可以包含多個`Group`和`Shape`

:::info
Group組
:::
`Group`包含多個`Shape`，對`Group`設置，其中的所有`Shape`都會生效

:::info
Shape
:::
指`Text`、`Rect`、`Circle`等各種Konva封裝好的類。

>圖片來源: https://cloud.tencent.com/developer/article/1888589

>圖片來源: https://cloud.tencent.com/developer/article/1888589

### 使用方式

最最基本的使用方式，直接看程式

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

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

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

// 設計圖形(Shape)
var circle = new Konva.Circle({
    x: 150,
    y: 150,
    radius: 70,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4
});

var rect = new Konva.Rect({
    x: 20,
    y: 20,
    width: 100,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 4,
});

// 把shape加到layer中
layer.add(circle);
layer.add(rect);

// 把整個layer加進stage
stage.add(layer);

// 畫出來
layer.draw();

---

*參考資料: https://konvajs.org/docs/*
*參考資料: https://cloud.tencent.com/developer/article/1888589*

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