首先介绍一下这张图：一共由四个部分组成。分别为：Stage（舞台）、Layer（层级）、Group（组）、Shape（形状）。[官方文档]
1、Stage（舞台）：用于承载需要展示的基础
2、Layer（层级）：区分不同层级进行展示
3、Group（组）：根据需求划分成组
4、Shape（形状）：每个元素的基本构成
由上图分析得出：Stage、Layer、shape 必须有这三者组成，Group与Group之间可以无线套用。这里我们可以先不用去理解Group，接下来我们开始进入实战吧。
1、npm install konva 安装npm包。
2、构建Stage、Layer、shape 三要素。
// 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
});
3、将Stage、Layer、shape 进行关联
stage.add(layer);
layer.add(circle);
4、接下来我们给他封装一下。
import Konva from "konva";
class KonvaBase {
// node 节点id
private elementId: string;
// 舞台
private _stage: Konva.Stage | undefined;
// 图层
private _layer: Konva.Layer | undefined;
constructor(elementId: string = "konva") {
this.elementId = elementId;
}
public get stage(): Konva.Stage {
if (this._stage === undefined) {
this._stage = new Konva.Stage({
container: this.elementId,
});
}
return this._stage;
}
public set stage(v: Konva.Stage) {
this._stage = v;
}
public get layer(): Konva.Layer {
if (this._layer === undefined) {
this._layer = new Konva.Layer();
}
return this._layer;
}
public set layer(v: Konva.Layer) {
this._layer = v;
}
// 实例化方法
init() {
this.stage.add(this.layer);
}
// 添加一个Circle形状
addCircle() {
var circle = new Konva.Circle({
x: this.stage.width() / 2,
y: this.stage.height() / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4,
});
this.layer.add(circle);
}
}
5、开始使用
// 节点id需要在加载完成之后才能使用
let konva = new KonvaBase("konva")
// 添加一个Circle形状
konva.addCircle()
