konva 添加group組總結

1、容器，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.remove();

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 會按照形狀添加的先后順序依次進行繪制。后面添加的在上面，最先添加的在最下面。

2、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.remove();

當使用 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);

3、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);

   4、元素樹結構的遍歷

4. Konva 提供了類似於 jQuery 的 find 方法來找到你想找的元素，find 方法可以在 stage，layer，group，shape 上調用，你也可以使用 findOne 來只選擇一個元素。

   find方法支持的選擇器如下：

5. // 選中所有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，且選擇時會選到多個元素。