Konva入门教程

啥是 Konva

Konva 是一个 canvas 库，可让咱们像操做 DOM 同样来操做 canvas，并提供了对 canvas 中元素的事件机制，拖放操做的支持。因此，用它来作一个拼图游戏什么的最合适了。此外，你也能够借助它来绘制一个页面的截图，做为大名鼎鼎的 html2canvas 库的替代方案，由于 html2canvas 在部分手机上生成截图的效果并非很好。

容器，stage，layer，shape

在初始化 Konva 时须要调用 Konva.Stage 构造函数，并提供一个 div 做为容器：

var stage = new Konva.Stage({
  container: 'container', // 容器 id
  width: width,// canvas 宽度
  height: height// canvas 高度
});

初始化 Stage 以后，咱们就能够向 Stage 里面添加 layer 了：

var layer = new Konva.Layer();
stage.add(layer);

layer 的概念相似于 ps 中的图层，或者 DOM 中的 z-index，当咱们向 stage 中添加一个 layer 时，DOM 中会再加入一个 canvas 元素来对应这个 layer。

shape 就是说咱们能够在 layer 上画形状了，Konva 为咱们提供了许多 shape，好比矩形，圆形，线段，图片，文字等，下面的代码在 layer 上画了一个矩形:

var rect = new Konva.Rect({
   x: 10 ,
   y: 10,
   width: 100,
   height: 100,
   fill: 'blue'
 })

当咱们往 layer 中添加了多个 shape 时，调用 layer.draw 时，layer 会按照形状添加的前后顺序依次进行绘制。后面添加的在上面，最早添加的在最下面。

到这里咱们大概知道 Konva 的元素结构了，如下是官方给出的元素树图：

Stage
                |
         +------+------+
         |             |
       Layer         Layer
         |             |
   +-----+-----+     Shape
   |           |
 Group       Group
   |           |
   +       +---+---+
   |       |       |
Shape   Group    Shape
           |
           +
           |
         Shape

这里咱们尚未了解过 group，下面咱们介绍一下 group。

group

group 相似于 ps 中的组，当把几个形状添加到 group 时，移动或者旋转 group 时，group 中的形状会总体发生变化, 上面的三个矩形就构成了一个 group，咱们把 group 的 draggable 属性设为 true，当移动 group 时，三个矩形都会发生移动。

var group = new Konva.Group({
  x: 120,
  y: 40,
  draggable: true,
  rotation: 20
});

var colors = ['red', 'orange', 'yellow'];

for(var i = 0; i < 3; i++) {
  var box = new Konva.Rect({
    x: i * 30,
    y: i * 18,
    width: 100,
    height: 50,
    name: colors[i],
    fill: colors[i],
    stroke: 'black',
    strokeWidth: 4
  });

  group.add(box);
}
layer.add(group);

当使用 group 时，group 中元素的位置（x，y）是相对于 group 的位置进行定位的，而再也不相对于 layer。

group 的嵌套

值得注意的是，group 中还能够嵌套 group，下面是一个 demo：

var parentGroup = new Konva.Group({
  x: 180,
  y: 200
});
var childGroup = new Konva.Group({
  x: 0,
  y: 10
});
var circle = new Konva.Circle({
  x: 10,
  y: 10,
  radius: 20,
  fill: 'green'
});
childGroup.add(circle);
parentGroup.add(childGroup);
layer.add(parentGroup);

shape的变换

咱们能够借助 Konva.Transformer 来简单的对 shape 进行变换操做，Konva.Transformer实际上是一类特殊的 Group。它在 Group 的基础上提供了用于对鼠标的动做进行响应的 UI。不过官网提示这一功能还在实验阶段，咱们一块儿来看一下。

使用 transformer 能够经过如下三步：

1. 建立一个 Transformer 实例
2. 将这个实例加入到 layer 中
3. 经过实例的transformer.attachTo(node)方法绑定到一个形状或者 group 上便可。

//建立一个 star
var star = new Konva.Star({
  x: stage.width() / 2,
  y: stage.height() / 2,
  draggable: true,
  numPoints: 5,
  innerRadius: 20,
  outerRadius: 40,
  fill: 'yellow',
  stroke: 'black',
  strokeWidth: 4
});

// 建立一个 transformer
var transformer = new Konva.Transformer();

layer.add(transformer);

//将 transformer 绑定到 star 上
transformer.attachTo(star);

layer.add(star);

元素树结构的遍历

Konva 提供了相似于 jQuery 的 find 方法来找到你想找的元素，find 方法能够在 stage，layer，group，shape 上调用，你也能够使用 findOne 来只选择一个元素。

find方法支持的选择器以下：

// 选中全部id 为 rect 的元素

var rectangle = new Konva.Rect({x: 0, y: 0, id: 'rect', ...})
stage.find('#rect');
// 选中全部 name 为 circle 的元素
var rectangle = new Konva.Rect({x: 0, y: 0, name: 'circle', ...})
stage.find('.circle');

// 选中全部Star
stage.find('Star');

// 选中全部的Star 和 Rectangle
stage.find('Shape');

须要说明的是：这里的 id 不具备惟一性，多个元素能够具备同一个 id，且选择时会选到多个元素。

参考：https://konvajs.org/docs/