Konva的使用

KonvaJS 快速入门

Konva 是一个 基于 Canvas 开发的 2d js 框架库, 它可以轻松的实现桌面应用和移动应用中的图形交互交互效果.

Konva 可以高效的实现动画, 变换, 节点嵌套, 局部操作, 滤镜, 缓存, 事件等功能, 不仅仅适用于桌面与移动开发, 还有更为广泛的应用.

Konva 允许在舞台上绘图, 添加事件监听, 移动或缩放某个图形, 独立旋转, 以及高效的动画. 即使应用中含有数千个图形也是可以轻松实现的.

使用 Konva

1. 打开链接 http://konvajs.github.io/, 下载 KonvaJS 代码.
2. 开发中为了方便调试, 使用完全版. 实际使用使用压缩版.
3. 使用 script 标签导入需要使用的 Konva 库. <script src="konva.js"></script>

KonvaJS 的理念

任何图形都存在于舞台中(  Konva.Stage  ). 这个舞台中又可以包多个用户层(  Konva.Layer  ).

每一个层中都含有两个  <canvas>  着色器: 一个前台渲染器, 一个后台渲染器. 前台渲染器是可以看见的部分, 而后台渲染器是一个隐藏的 canvas. 后台渲染器为了提高效率实现事件监听的工作.

每一个层可以包含形状( Shape ), 形状的组( Group ), 甚至是由组组成的组. 舞台, 层, 组, 以及形状都是虚拟的节点( node ). 类似于 HTML 页面中的 DOM 节点.

例如：

在这个图形中, 首先有一个舞台( Stage ). 该舞台在页面中与整个页面的大小一样. 然后舞台中有一个层( Layer ). 层中有一个矩形( Rect )和一个圆形( Circle ). 因此就有一个树结构:

所有的节点都可以设置样式与变化. 即使 Konva 可以重新渲染形状, 例如: 矩形, 圆形, 图片, 精灵, 文本, 线段, 多边形, 正多边形, 路径, 和星星等. 但是开发者依旧可以根据 Shape 类的模板自定义自己的图形, 然后重写 draw 方法.

只要拥有了 舞台( Stage ), 并且上面放置了层( Layer )和图形( Shape ), 那么就可以为他添加事件监听, 变换节点, 运行动画, 使用路径, 甚至是更多的效果.

例如要实现上面的案例:

1. 需要引入 Konva.js 文件

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

2. 然后页面中放置一个容器作为 Konva 处理的对象. Konva 会在该容器中添加 canvas 标签. 值得说明的是, 需要为这个标签添加 id 属性.

   <div id="dv"></div>

3. 然后编写 js 代码. Konva 是一个完全面向对象的库.
4. 创建舞台

   var stage = new Konva.Stage({
    container: 'dv',
    width: window.innerWidth,
    height: window.innerHeight
   });

   • 首先, 在 Konva 中所有的图形都是在 Konva 中的一个构造函数. Konva 是全局的命名空间.
   • 创建舞台使用的是 Stage 构造函数. 该函数需要提供参数.
   • Konva 中所有图形的参数都是使用 json 对象的方式进行提供.
   • 舞台需要设置容器的 id, 即 container 属性. 以及宽( width ), 高( height ).
5. 舞台中可以放置一个到多个层( Layer ), 所有的图形应该放在在层中.
   • 首先创建层对象. 层对象不需要传递参数.

     var layer = new Konva.Layer();

   • 将层添加到舞台中. Konva 中凡是添加, 都是使用 add 方法.

     stage.add( layer );

6. 在层中放置一个矩形, 就创建一个 矩形对象.
   • 矩形对象需要四个参数来确定, 分别是 左上角的两个坐标, 和 宽与高.

     var rect = new Konva.Rect({
     x: 100,
     y: 50,
     width: 200,
     height: 100,
     fill: 'red'
     });

   • Konva 中添加颜色使用 fill 属性和 stroke 属性, 分别表示填充颜色与描边颜色.
   • 将矩形添加到 层中

     layer.add( rect );

7. 在层中添加一个圆形, 使用构造函数 Circle

   var circle = new Konva.Circle({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    radius: 100,
    fill: 'pink',
    stroke: 'blue'
   });
   layer.add( circle );

   最后绘图使用 draw 方法

   • Konva 中使用 radius 设置圆形的半径.
   • Konva 中如果需要获取对象的数据, 使用 getXXX 方法. 传入参数即设置, 不传参数就是获取数据.

8. layer.draw();

基本形状

Konva.js 支持的形状有: 矩形( Rect ), 圆形( Circle ), 椭圆( Rllipse ), 线段( Line ), 图像( Image ), 文本( Text ), 文本路径( TextPath ), 星星( Start ), 标签( Label ), SVG 路径( SVG Path ), 正多边形( RegularPolygon ). 同时也可以自定义形状.

1. 自定义形状使用 Shape 构造函数创建
2. 需要提供自定义的绘图方法 sceneFunc

   var triangle = new Konva.Shape({
    sceneFunc: function ( ctx ) {
      // 自定义绘图路径
      ctx.moveTo( window.innerWidth / 2, window.innerHeight / 4 );
      ctx.lineTo( window.innerWidth / 2 - window.innerHeight / ( 2 * 1.732 ), window.innerHeight * 3 / 4 );
      ctx.lineTo( window.innerWidth / 2 + window.innerHeight / ( 2 * 1.732 ), window.innerHeight * 3 / 4 );
      ctx.closePath();
      // Konva.js 的独有方法
      ctx.fillStrokeShape( this );
    },
    fill: 'pink',
    stroke: 'red'
   });

3. 将图形添加后绘图

   layer.add( triangle );
   layer.draw();

   效果：

   

样式

所有的形状都支持下列样式属性:

1. 填充. 颜色, 渐变或图片.
2. 描边. 颜色与宽度.
3. 阴影. 颜色, 偏移量, 透明度与模糊
4. 透明度

绘制正五边形

构造函数:  Konva.RegularPolygon( options )

常用属性:

1. x, y. 表示正多边形的中心坐标.
2. sides. 表示正多边形的边数.
3. radius. 表示半径.
4. fill. 填充颜色.
5. stroke. 描边的颜色.
6. strokeWidth. 描边的宽度.
7. shadowOffsetX 和 shadowOffsety. 描述背景的偏移量.
8. shadowBlur. 表示模糊程度.
9. opacity. 表示透明度( 取值在 0, 1 之间 ).

案例

 var shape = new Konva.RegularPolygon({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    sides: 5,
    radius: 70,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4,
    shadowOffsetX: 20,
    shadowOffsetY: 25,
    shadowBlurBlur: 40,
    opacity: 0.5
  });
  layer.add( shape );

效果

事件

使用 Konva 可以轻松的实现监听用户添加的事件. 例如 click, dblclick, mouseover, tap, dbltap, touchstart 等. 属性值变化事件. 例如 scaleXChange, fillChange 等. 以及拖拽事件. 例如 dragstart, dragmove, dragend.

  circle.on( 'mouseout touchend', function () {
    console.log( '用户输入' );
  });
  circle.on( 'xChange', function () {
    console.log( '位置发生改变' );
  });
  circle.on( 'dragend', function () {
    console.log( '拖动停止' );
  });

拖拽与降低

Konva 支持拖拽的功能. 也支持下降事件( drop, dropenter, dropleave, dropover ).

如果需要实现拖拽的功能. 可以设置 draggable 属性为 true.

1. 创建的时候设置属性
2. 创建后使用方法设置属性 shape.draggable( true );

Konva 还支持给拖拽事件添加移动范围.

动画

Konva 中可以使用两种方式创建动画

1. 使用 Konva.Animation

   var anim = new Konva.Animation(function ( frame ) {
    var time = frame.time,
        timeDiff = frame.timeDiff,
        frameRate = frame.frameRate;
    // 更新代码
   }, layer );

　　2.使用 Konva.Tween

var tween = new Konva.Tween({
 node: rect,
 duration: 1,
 x: 140,
 rotation: Math.PI * 2,
 opacity: 1,
 strokeWidth: 6
});

// 或者使用新的短方法
circle.to({
 duration: 1,
 fill: 'green'
});

选择器

当构建规模较大的应用时, 如果可以对元素进行搜索是非常方便的. Konva 使用选择器来实现元素的查找. 使用 find() 方法返回一个集合. 使用 findOne() 方法返回集合中的第 0 个元素.

1. 1. 给元素提供 name 属性, 可以使用 '.name' 来进行获取. 类似于类选择器.
   2. 使用构造函数的名字也可以作为名字选择器. 类似于标签选择器.
   3. 使用 id 属性, 则使用 '#id' 来获取.
   4. 查找方法使用层对象来调用.

序列号与反序列化

所有被创建的对象都可以保存为 JSON 对象. 可以在服务器或本地存储中使用它.

 var json = stage.toJSON();

同时, 也可以从 JSON 中恢复 Konva 对象.

  var json = '{"attrs":{"width":578,"height":200},' +
             '"className":"Stage", ' +
             '"children":[{ ' +
                '"attrs":{},' +
                '"className":"Layer",' +
                '"children":[ ' +
                    '{"attrs":{ ' +
                        '"x":100,"y":100,' +
                        '"sides":6,"radius":70,' +
                        '"fill":"red","stroke":"black",' +
                        '"strokeWidth":4},' +
                    '"className":"RegularPolygon"}' +
                ']' +
              '}]}';
  var stage = Konva.Node.create(json, 'container');