zoukankan      html  css  js  c++  java
  • 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,// 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 会按照形状添加的先后顺序依次进行绘制。后面添加的在上面,最先添加的在最下面。

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

    使用 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/

  • 相关阅读:
    表的相关内容
    数据类型
    mysql入门练习
    mysql入门
    协程
    多进程
    装饰器
    网络编程
    心路历程
    gensim的使用
  • 原文地址:https://www.cnblogs.com/imgss/p/10557824.html
Copyright © 2011-2022 走看看