---
# System prepended metadata

title: 【自學筆記】konva入門 - JSON
tags: [javascript, canvas, konva]

---

###### 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/*

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