關於Konva及TS的基礎
這個Konva是一個HTML5的2D繪相簿，應用它可以畫出各種各樣的二維圖形來的。
Konva.js - JavaScript 2d canvas library MIT License
這個是用它建立的一些網站或者線上工具，還是挺有意思的。
應用它的程式自然是多得多，但是我最近也是因緣際會，用到它了。不過像所有開源軟體一樣，這個庫儘管不錯，但是還是碰到了一些問題。 慢慢都會把它記下來，寫在 這兒吧。
總共程式碼13096行，從這兒看啊，還是不少的。全部是用TS寫的，說實話，做為一個客串型前端，還真沒怎麼用過TS。這次也是趕鴨子上架了。
如果有誰想認真學習一下TS，可以看一下這個網站， TypeScript中文網 · TypeScript--JavaScript的超集 ， 差不多是TS語言上比較重要的資料了。
Knova的安裝方式
這個東西要安裝還是很簡單的。
npm install konva或者直接線上引用
<script src="https://unpkg.com/konva@7.0.3/konva.min.js"></script>
JavaScript的東西就是安裝簡單。
簡單使用
官方的使用說明，也是非常簡單的。
// first we need to create a stage
var stage = new Konva.Stage({
container: 'container', // id of container <div>
width: 500,
height: 500
});
// then create layer
var layer = new Konva.Layer();
// create our shape
var circle = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
// add the shape to the layer
layer.add(circle);
// add the layer to the stage
stage.add(layer);
// draw the image
layer.draw();這個實際上就是在畫一個圓圈，是不是也挺簡單的。 先建立一個stage然後，建立layer， 把圓圈放在layer裡，再把layer加到stage上，再呼叫layer自己更新一下，影像就出來了。
如果是定義一個自己的公平法律圖形，也是很容易的，你看，只需要實現一個sceneFunc就可以了。
var rect = new Konva.Shape({
x: 10,
y: 20,
fill: '#00D2FF',
width: 100,
height: 50,
sceneFunc: function (context, shape) {
context.beginPath();
// don't need to set position of rect, Konva will handle it
context.rect(0, 0, shape.getAttr('width'), shape.getAttr('height'));
// (!) Konva specific method, it is very important
// it will apply are required styles
context.fillStrokeShape(shape);
}
});再看一個完整的例子吧。
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva@7.2.2/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Custom Shape Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight,
});
var layer = new Konva.Layer();
/*
* create a triangle shape by defining a
* drawing function which draws a triangle
*/
var triangle = new Konva.Shape({
sceneFunc: function (context, shape) {
context.beginPath();
context.moveTo(20, 50);
context.lineTo(220, 80);
context.quadraticCurveTo(150, 100, 260, 170);
context.closePath();
// (!) Konva specific method, it is very important
context.fillStrokeShape(shape);
},
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
});
// add the triangle shape to the layer
layer.add(triangle);
// add the layer to the stage
stage.add(layer);
</script>
</body>
</html>結果是這個：
