AICODER大前端培训

AICODER-IT培训专家,前端培训基地,前端培训,全栈培训,大学生IT培训基地,线上IT课程免费自学,线下培训项目实战,实习,html5培训实习-AICODE程序员

在线咨询

神奇的Canvas(下)

老马 发布于: 2018年12月14日 1时23分55秒 阅读581次

五、Konva 的使用快速上手

5.1 Konva 的整体理念

  • 舞台的概念的引入。整个视图看做是一个舞台 stage
  • 舞台中可以绘制很多个层 layer
  • layer 下面可以有很多的 group
  • group 下面可以有 矩形、图片、其他形状等
  • 参看:快速上手文档---查看翻译文档
                  Stage
                    |
             +------+------+
             |             |
           Layer         Layer
             |             |
       +-----+-----+     Shape
       |           |
     Group       Group
       |           |
       +       +---+---+
       |       |       |
    Shape   Group    Shape
               |
               +
               |
             Shape<button>Click to copy</button>

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();       //绘制层到舞台上<button>Click to copy</button>

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();   //启动动画<button>Click to copy</button>
  • 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的简单应用。<button>Click to copy</button>

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();//结束动画<button>Click to copy</button>

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();<button>Click to copy</button>

5.3.5 回放且循环播放动画

  • yoyo 属性可以进行对动画进行播放完后,回放当前动画,并持续循环来回切换播放。
rect.to({
  duration: 2,
  scale: 1.5,
  yoyo: true // 此设置也可以用于 tween
});<button>Click to copy</button>

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);<button>Click to copy</button>

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; //取消事件冒泡
});<button>Click to copy</button>

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);
});<button>Click to copy</button>

5.6 饼状图案例

  • wedge: 楔形

5.7 柱状图案例

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

六、Canvas 项目实战

七、Canvas 优化

 <!-- requestAnim shim layer by Paul Irish -->
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       ||
              window.webkitRequestAnimationFrame ||
              window.mozRequestAnimationFrame    ||
              window.oRequestAnimationFrame      ||
              window.msRequestAnimationFrame     ||
              function(/* function */ callback, /* DOMElement */ element){
                window.setTimeout(callback, 1000 / 60);
              };
    })();

// example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/
var canvas, context, toggle;

init();
animate();

function init() {
    canvas = document.createElement( 'canvas' );
    canvas.width = 512;
    canvas.height = 512;
    context = canvas.getContext( '2d' );
    document.body.appendChild( canvas );
}

function animate() {
    requestAnimFrame( animate );
    draw();
}

function draw() {
    var time = new Date().getTime() * 0.002;
    var x = Math.sin( time ) * 192 + 256;
    var y = Math.cos( time * 0.9 ) * 192 + 256;
    toggle = !toggle;
    context.fillStyle = toggle ? 'rgb(200,200,20)' :  'rgb(20,20,200)';
    context.beginPath();
    context.arc( x, y, 10, 0, Math.PI * 2, true );
    context.closePath();
    context.fill();
}

AICODER编辑推荐:



报名就业班送基础班

最近分享