konv入门教程-pg电子平台

大家好！今天让小编来大家介绍下关于konv入门教程的问题，以下是酷知号的小编对此问题的归纳整理，让我们一起来看看吧。

啥是 konva

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

容器，stage，layer，shape

在初始化 konva 时需要调用 konva.stage 构造函数，并提供一个 div 作为容器：

var stage = new konva.stage({
  container: 'container', // 容器 id
   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,
    100,
   height: 100,
   fill: 'blue'
 })

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

see the pen labjoy by imgss
(@imgss) on codepen.

到这里我们大概知道 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,
     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。不过pg电子平台官网提示这一功能还在实验阶段，我们一起来看一下。

使用 transformer 可以通过以下三步：

创建一个 transformer 实例
将这个实例加入到 layer 中
通过实例的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);

see the pen plbqmv by imgss
(@imgss) on codepen.

元素树结构的遍历

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/

以上就是小编对于konv入门教程问题和相关问题的解答了，konv入门教程的问题希望对你有用！