什么是 Konva
Konva.js 是一个 H5 Canvas 的 JavaScript 框架,我们可以通过制作桌面端和移动端的 apps。
Konva 支持动画、转换、节点嵌套、图层、过滤、缓存、事件(桌面端和移动端)等。在 Konva 中,所有的图形都存在于 stage 中,即便是你的 app 使用了成百上千的 shapes(图形)也可以在 stage 中许多与图形对应的多个事件,以实现移动、缩放、旋转等功能。
Konva 的结构
Stage
|
+------+------+
| |
Layer Layer
| |
+-----+-----+ Shape
| |
Group Group
| |
+ +---+---+
| | |
Shape Group Shape
|
+
|
Shape
Stage(容器)
在 Konva 中,一切的开端始于 Konva.Stage
这个类,它包含了用户定义的 Konva.Layer
,可以说 Stage 是 Konva 的容器,我们的图形都存在于这里面。
在 H5 中,Stage 表现为一个普通的 div 标签,例如,创建一个 Konva 容器:
file:[创建 Konva.Stage]
<body>
<div id="container"></div>
<script>
// stage 是一个容器,装所有的 layer
const stage = new Konva.Stage({
container: "container", // id 选择器
width: window.innerWidth,
height: window.innerHeight
});
</script>
</body>
Layer(图层)
如上结构所示,Stage 下面有许多 Layer(图层),图层在 PS、绘画中很容易出现,我们可以理解图层中包含了许多的 Shapes(图形)、组(Group)。
入门示例
<body>
<div id="container"></div>
<script>
// stage 是一个容器,装所有的 layer
const stage = new Konva.Stage({
container: "container",
width: window.innerWidth,
height: window.innerHeight
});
// 创建图层1
const layer1 = new Konva.Layer();
// 创建 rect1
const rect1 = new Konva.Rect({
x: 20,
y: 20,
width: 100,
height: 50,
fill: "green",
stroke: "black",
strokeWidth: 2
});
// 把 rect1 添加到图层1中,一个图层有许多的图形、组。
layer1.add(rect1);
const layer2 = new Konva.Layer();
const rect2 = new Konva.Rect({
x: 150,
y: 40,
width: 100,
height: 50,
fill: "red",
shadowBlur: 10,
cornerRadius: 10
});
layer2.add(rect2);
const layer3 = new Konva.Layer();
const rect3 = new Konva.Rect({
x: 50,
y: 120,
width: 100,
height: 100,
fill: "blue",
cornerRadius: [0, 10, 20, 30]
});
const rect4 = new Konva.Rect({
x: 250,
y: 150,
width: 100,
height: 100,
fill: "#525288",
cornerRadius: 5
});
layer3.add(rect3);
layer3.add(rect4);
// 把图层1、2、3添加到容器中
stage.add(layer1);
stage.add(layer2);
stage.add(layer3);
</script>
</body>
JS 代码解释
如上所示中,我创建了三个 Layer,每一个图层都有一个矩形(Shape),Layer 图层创建好了之后把它放入 Stage 中。
每一个图形都可以自定义样式,如圆角、填充颜色、宽度、高度等。
H5 结构解释
如上图所示,容器下面有三个 canvas 标签,正好对应了我们三个图层(Layer),图层中有自己的图形(Shape)。
标签:Layer,const,Konva,Canvas,js,new,图层,Stage From: https://www.cnblogs.com/Himmelbleu/p/17576159.html