###### tags: `konva`, `canvas`, `javascript`
# 【自學筆記】konva入門 - JSON
`Konva`是個`HTML5 Canvas JavaScript`的框架，透過`2d context`的擴展實現各種圖形功能，正好可以實現最近工作需求，就來研究看看囉
---
[範例程式](https://codepen.io/niodoshaba-the-flexboxer/pen/PoRYMea)
### Konva的toJSON
Konva提供了`toJSON`的方法，可將整個`stage`成`json`格式的資料，要存入server或是storage都可以，方便後續使用，例如這樣
```htmlembedded=
<body>
<div id="container"></div>
</body>
```
```javascript=
// 先創建一個Stage
var stage = new Konva.Stage({
container: 'container2',
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);
}
// 創建一個圖形
var rect = new Konva.Rect({
x: 300,
y: 90,
width: 100,
height: 50,
fill: 'green',
strokeWidth: 3,
offset: {
x: 50,
y: 25,
},
draggable: true,
});
layer.add(rect);
stage.add(layer);
// 將整個stage存成json
json = stage.toJSON();
// 這樣就可以取得該stage所有圖形的資料了
console.log(json)
```
:::danger
`toJSON()`不能存儲過濾器、圖片、事件監聽，所以==適合用在較小型的程序==，對於較複雜的案例後面其他文章再詳述。
:::
### 透過json創建圖形
既然可以將圖形存成`json`格式，當然也可以透過`json`創建圖形
作法也很簡單，只要讀取資料，並指定創建的位置(`container id`)就行了
```htmlembedded=
<body>
<div id="container2"></div>
</body>
```
```javascript=
var json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"x":100,"y":100,"sides":6,"radius":70,"fill":"red","stroke":"black","strokeWidth":4},"className":"RegularPolygon"}]}]}';
var stage_from_json = Konva.Node.create(json, 'container2');
```
---
*參考資料: https://konvajs.org/docs/*
*新手工程師的筆記，純粹記錄學了些啥東西
如果有前輩高人讀了我的文，文中有任何錯誤再麻煩指教指教*
Sign in with Wallet
Connect another wallet