Question

5.1 Konva 的整体理念

• 舞台的概念的引入。整个视图看做是一个舞台 stage
• 舞台中可以绘制很多个层 layer
• layer 下面可以有很多的 group
• group 下面可以有 矩形、图片、其他形状等
• 参看：快速上手文档---查看翻译文档

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

5.2 Konva 矩形案例

5.2.1 创建一个矩形： Konva.Rect(option);

//Konva 使用的基本案例
//第一步：创建舞台
var stage = new Konva.Stage({
  container: 'container',   //需要存放舞台的 Dom 容器
  width: window.innerWidth,   //设置全屏
  height: window.innerHeight
});

//第二步：创建层
var layer = new Konva.Layer();  //创建一个层
stage.add(layer);         //把层添加到舞台

//第三步： 创建矩形
var rect = new Konva.Rect({   //创建一个矩形
  x: 100,           //矩形的 x 坐标，相对其父容器的坐标
  y: 100,
  width: 100,         //矩形的宽度
  height: 100,        //矩形高度
  fill: 'gold',         //矩形填充的颜色
  stroke: 'navy',       //矩形描边的颜色
  strokeWidth: 4,       //填充宽度
  opactity: .2,         //矩形的透明度
  scale: 1.2,         //矩形的缩放 1：原来大小
  rotation: 30,         //旋转的角度，是 deg 不是弧度。
  cornerRadius: 10,       //圆角的大小（像素）
  id: 'rect1',        //id 属性，类似 dom 的 id 属性
  name: 'rect',
  draggable: true       //是否可以进行拖拽
});

//创建一个组
var group = new Konva.Group({
  x: 40,
  y: 40,
});
group.add( rect );  //把矩形添加到组中

//第四步： 把形状放到层中
layer.add( group ); //把组添加到层中
layer.draw();     //绘制层到舞台上

5.3 Konva 的动画系统

5.3.1 tween 对象（重点)

• tween，英文意思：两者之间， 英 [twiːn] 美 [twin]
• tween 是控制 Konva 对象进行动画的核心对象。
• tween 可以控制所有数字类型的属性进行动画处理，比如：x, y, rotation, width, height, radius, strokeWidth, opacity, scaleX 等

//案例：
var tween = new Konva.Tween({
  node: rect,       //要进行动画的 Konva 对象
  x: 300,         //要进行动画的属性
  opacity: .8,
  duration: 1,      //持续时间
  easing: Konva.Easings.EaseIn, //动画的动画效果
  yoyo: true,       //是否进行循环播放的设置
  onFinish: function() {
    //动画执行结束后，执行此方法
  }
});

tween.play();   //启动动画

• tween 的控制方法
  • tween.play(), //播放动画
  • tween.pause(), //暂停动画
  • tween.reverse(), //动画逆播放
  • tween.reset(), //重置动画
  • tween.finish(), //立即结束动画
  • seek：英文：寻找 英 [siːk] 美 [sik]
• tween 的缓动控制选项
  • Konva.Easings.Linear //线性
  • Konva.Easings.EaseIn //缓动，先慢后快
  • Konva.Easings.EaseOut //先快后慢
  • Konva.Easings.EaseInOut //两头慢，中间快
  • Konva.Easings.BackEaseIn //往回来一点，然后往前冲，汽车启动类似...
  • Konva.Easings.BackEaseOut
  • Konva.Easings.BackEaseInOut
  • Konva.Easings.ElasticEaseIn //橡皮筋 英 [ɪ'læstɪk] 美 [ɪ'læstɪk]
  • Konva.Easings.ElasticEaseOut
  • Konva.Easings.ElasticEaseInOut
  • Konva.Easings.BounceEaseIn //弹跳；弹起，反跳；弹回 英 [baʊns] 美 [baʊns]
  • Konva.Easings.BounceEaseOut
  • Konva.Easings.BounceEaseInOut
  • Konva.Easings.StrongEaseIn //强力
  • Konva.Easings.StrongEaseOut
  • Konva.Easings.StrongEaseInOut
• 动画效果参考： 29Konva 动画缓动效果案例.html

5.3.2 动画 to 的使用

• to 就是对 tween 的封装，比较简单好用。

//案例：
var rect = new Konva.Rect({
  x: 10,
  y: 10,
  width: 100,
  height: 100,
  fill: 'red'
});
layer.add(rect);
layer.draw();

//动画系统
rect.to({
  x: 100,
  y: 100,
  opactity: .1,
  duration: 3,
  onFinish: function() {

  }
});

//to: 就是对 tween 的简单应用。

5.3.3 Animate 的应用

• Animation 动画，实际上就是浏览器通知开发者进行绘制，并提供当前的时间

var anim = new Konva.Animation(function(frame) {
  //动画系统提供的 frame 有三个属性可以使用：
  var time = frame.time, // 动画执行的总时间
    timeDiff = frame.timeDiff, // 距离上一帧的时间
    frameRate = frame.frameRate; // 帧率（既 1000/间隔时间）

  //动画的动作

}, layer);

anim.start();//启动动画

//anim.stop();//结束动画

5.3.4 循环播放动画的实现

//总体思路，使用 tween 配合 onFinish 事件中重新播放动画，达到循环播放的效果
var loopTween = new Konva.Tween({
  node: star, //设置要表现动画的 Konva 对象
  rotation: 360, //旋转 360 度
  duration: 2, //动画持续时间
  easing: Konva.Easings.Linear,
  onFinish: function() {
  // this === loopTween //true
  this.reset(); //重置动画
  this.play(); //重新播放动画
  }
});
loopTween.play();

5.3.5 回放且循环播放动画

• yoyo 属性可以进行对动画进行播放完后，回放当前动画，并持续循环来回切换播放。

rect.to({
  duration: 2,
  scale: 1.5,
  yoyo: true // 此设置也可以用于 tween
});

5.3.6 进度条案例

5.3.7 传智官网案例

• 三角函数的补充
  • Math.sin(弧度); //夹角对面的边 和 斜边的比值
  • Math.cos(弧度); //夹角侧边 与斜边的比值
• 圆形上面的点的坐标的计算公式 `x =x0 + Math.cos(rad) R; //x0 和 y0 是圆心点坐标 _ y =y0 + Math.sin(rad) _ R;`//注意都是弧度

  

• group 的灵活运用
  • konva 的 group 很灵活，每个 group 都有自己的坐标系
  • group 可以包含其他的 group，可以对 group 做整个组的动画
  • group 可以通过 getChidren();//可以拿到直接子级元素。

var group = new Konva.Group({
  x: 0,
  y: 0
});
group.add(rect);

5.4 Konva 的事件（重要）

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

//绑定事件 Konva 支持事件：mouseover, mouseout, mouseenter, mouseleave, mousemove, mousedown, mouseup, mousewheel, click, dblclick, dragstart, dragmove, and dragend

rect.on('click', function() {
  //jQuery 一模一样！！
  console.log('^_^  ^_^');
});

//绑定多个事件
rect.on('click mousemove', function(e) {});

//解除绑定事件
rect.off('click'); //这不是 jQuery 吗？

//触发事件
rect.fire('click');

//取消事件冒泡
rect.on('click', function(evt) {
  alert('You clicked the circle!');
  evt.cancelBubble = true; //取消事件冒泡
});

5.5 Konva 的选择器

• 选择方法。
  • ID 选择法：stage.find('#id'); //此方法返回的是一个数组
  • name 选择法：group.findOne('.name');//返回一个 Konva 对象
  • type 选择法： group.find('Circle');//查找所有的圆形 Konva 对象

//组中查找圆形的 Konva 对象
groupCircle.find('Circle').each(function(circle, index) {
  circle.setZIndex(3 - index);
});

5.6 饼状图案例

• wedge: 楔形

5.7 柱状图案例

• histogram n. [统计] 直方图；柱状图 英 ['hɪstəgræm] 美 ['hɪstəɡræm]