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,

七、Canvas优化

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();

}

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的控制方法

o tween.play(), //播放动画

o tween.pause(), //暂停动画

o tween.reverse(), //动画逆播放

o tween.reset(), //重置动画

o tween.finish(), //立即结束动画

o seek：英文：寻找英 [siːk] 美 [sik]

· tween的缓动控制选项

o Konva.Easings.Linear //线性

o Konva.Easings.EaseIn //缓动，先慢后快

o Konva.Easings.EaseOut //先快后慢

o Konva.Easings.EaseInOut //两头慢，中间快

o Konva.Easings.BackEaseIn //往回来一点，然后往前冲，汽车启动类似...

o Konva.Easings.BackEaseOut

o Konva.Easings.BackEaseInOut

o Konva.Easings.ElasticEaseIn //橡皮筋英 [ɪ'læstɪk] 美 [ɪ'læstɪk]

o Konva.Easings.ElasticEaseOut

o Konva.Easings.ElasticEaseInOut

o Konva.Easings.BounceEaseIn //弹跳；弹起，反跳；弹回英 [baʊns] 美 [baʊns]

o Konva.Easings.BounceEaseOut

o Konva.Easings.BounceEaseInOut

o Konva.Easings.StrongEaseIn //强力

o Konva.Easings.StrongEaseOut

o 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

});

· 三角函数的补充

o Math.sin(弧度); //夹角对面的边和斜边的比值

o Math.cos(弧度); //夹角侧边与斜边的比值

· 圆形上面的点的坐标的计算公式

o x =x0 + Math.cos(rad) * R;//x0和y0是圆心点坐标

o y =y0 + Math.sin(rad) * R;//注意都是弧度

· group的灵活运用

o konva的group很灵活，每个group都有自己的坐标系

o group可以包含其他的group，可以对group做整个组的动画

o 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的选择器

· 选择方法。

o ID选择法：stage.find('#id'); //此方法返回的是一个数组

o name选择法：group.findOne('.name');//返回一个Konva对象

o type选择法： group.find('Circle');//查找所有的圆形Konva对象

//组中查找圆形的Konva对象

groupCircle.find('Circle').each(function( circle, index ){

circle.setZIndex( 3 - index );

});

七、Canvas优化

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();

}

Konva的使用快速上手相关推荐

【快速上手mac必备】常用优质mac软件推荐(音视频、办公、软件开发、辅助工具、系统管理、云存储)
本文章的主要内容是我作为一名大四学生.准程序员.up主这三种身份来给大家推荐一下 mac 上好用的软件以及工具.本人也是从去年9月份开始从windows阵营转移到了mac阵营,刚开始使用的时候,也曾主 ...
【转】Vue.js 2.0 快速上手精华梳理
Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...
『转载』Debussy快速上手（Verdi相似）
『转载』Debussy快速上手(Verdi相似) Debussy 是NOVAS Software, Inc(思源科技)发展的HDL Debug & Analysis tool,这套软体主要不是 ...
[转载]ESFramework 4.0 快速上手（15）－－客户端登录验证
ESFramework 4.0 快速上手(15) -- 客户端登录验证在之前版本的Rapid引擎中,是没有提供客户端登陆验证的机制的,如果要验证用户的帐号密码信息,我们只有自己手动通过自定义信息来实 ...
WijmoJS 2019V1正式发布：全新的在线 Demo 系统，助您快速上手，开发无忧
2019独角兽企业重金招聘Python工程师标准>>> 下载WijmoJS 2019 v1 WijmoJS是为企业应用程序开发而推出的一系列包含HTML5和JavaScript的开发 ...
react 快速上手开发_React中测试驱动开发的快速指南
react 快速上手开发 by Michał Baranowski 通过MichałBaranowski React中测试驱动开发的快速指南 (A quick guide to test-driven ...
《Android App开发入门：使用Android Studio 2.X开发环境》——1-3 Android Studio 快速上手...
1-3 Android Studio 快速上手
Keras快速上手：基于Python的深度学习
Keras快速上手:基于Python的深度学习谢梁,鲁颖,劳虹岚著 ISBN:9787121318726 包装:平装开本:16开正文语种:中文出版社: 电子工业出版社出版时间:2017-0 ...
快速上手关键词抽取的算法
前言在自然语言处理领域,我们有一种类型的问题是如何在一堆文本中提取出核心词/句子.而无论是对于长文本还是短文本,往往几个关键词就可以代表整个文本的主题思想.同时,在很多推荐系统中,由于无法直接就整体 ...

Konva的使用快速上手

5.1 Konva的整体理念

5.2 Konva矩形案例

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

七、Canvas优化

5.3 Konva的动画系统

5.3.1 tween对象(重点)

5.3.2 动画to的使用

5.3.3 Animate的应用

5.3.4 循环播放动画的实现

5.3.5 回放且循环播放动画

5.4 Konva的事件（重要）

5.5 Konva的选择器

七、Canvas优化

Konva的使用快速上手相关推荐

最新文章

热门文章