konva 系列教程 1：konva 是什么？

konva 是一个对 canvas API 做了封装增强的 JavaScript 库。

HTML 原生的 canva 提供的 API 比较底层，用法上像是操纵一支画笔进行各种操作，画完就结束了。

canvas 本身不维护图形树，你也无法操作修改已被绘制的图形。

而 konva 能够像我们操作 DOM 树一样去绘制和维护元素，它会额外维护图形构成的树，并能在绘制后，对特定图形进行样式的修改。

你还可以在上面添加事件，比如鼠标滑入某图形时，图形变大一点。此外还支持方便的变形、动画、拖拽等高级能力。

安装

和大多数的 JS 库一样，我们可以用包管理器安装：

npm install konva
# 或者
yarn add konva

1
2
3
4

或者用 script 标签引入一个全局的对象

<script src="./konva.min.js"></script>

1
2

下面我们就简单看一个例子。

绘制一个矩形

首先我们用 Konva.Stage 构建一个舞台（stage）。

const stage = new Konva.Stage({
  container: '#container',
  width: 300,
  height: 300
});

1
2
3
4
5
6

执行后，konva 会在 div#container 下创建一个 div，然后在这个 div 下再创建宽高各为 300px 的 canvas 元素。

前提是 stage 里面有元素存在，否则 canvas 不会被创建。

舞台有了，我们该在上面添加图形了，但直接在 stage 下添加图形是不允许的。我们需要先创建一个图层（Layer）。

const layer = new Konva.Layer();

1
2

图层就像是重叠在一起的多张透明的纸，可以很方便地管理多组图形，比如隐藏某个图层，等比放大某个图层。

创建完图层后，我们就可以在上面添加图形了。这里我们创建一个矩形。

const rect = new Konva.Rect({
  x: 20,
  y: 20,
  width: 200,
  height: 200,
  fill: 'orange'
});

1
2
3
4
5
6
7
8

我们指定了矩形的左上角坐标、宽高以及填充色。

最后我们将这些对象组合起来，形成类似 DOM 结构的树：

layer.add(rect);
stage.add(layer);

1
2
3

于是矩形被绘制出来了。

Demo 地址：

https://codepen.io/F-star/pen/oNErwmW?editors=0010

结尾

konva 能够让我们像写 DOM 对象或者是 SVG 对象那样，去控制 canvas 里的图形，让基于 canvas 做一些复杂的项目变得简单。

今天我们简单了解了一下 konva 是什么，并写了一个 demo 让大家对 konva 的用法有一个印象。

这是系列文章，后续会继续讲解 konva 的用法，我是前端西瓜哥，欢迎关注我。