canvas常⽤库-----KonvaJS
Konva 是⼀个基于 Canvas 开发的 2d js 框架库, 它可以轻松的实现桌⾯应⽤和移动应⽤中的图形交互交互效果.
Konva 可以⾼效的实现动画, 变换, 节点嵌套, 局部操作, 滤镜, 缓存, 事件等功能, 不仅仅适⽤于桌⾯与移动开发, 还有更为⼴泛的应⽤. Konva 允许在舞台上绘图, 添加事件监听, 移动或缩放某个图形, 独⽴旋转, 以及⾼效的动画. 即使应⽤中含有数千个图形也是可以轻松实现的.
1.1. 使⽤ Konva
1.2. KonvaJS 的理念
任何图形都存在于舞台中( Konva.Stage ). 这个舞台中⼜可以包多个⽤户层( Konva.Layer ).
每⼀个层中都含有两个 <canvas> 着⾊器: ⼀个前台渲染器, ⼀个后台渲染器. 前台渲染器是可以看见的部分, ⽽后台渲染器是⼀个隐藏的canvas. 后台渲染器为了提⾼效率实现事件监听的⼯作.
每⼀个层可以包含形状( Shape ), 形状的组( Group ), 甚⾄是由组组成的组. 舞台, 层, 组, 以及形状都是虚拟的节点( node ). 类似于 HTML 页⾯中的 DOM 节点.
在这个图形中, ⾸先有⼀个舞台( Stage ). 该舞台在页⾯中与整个页⾯的⼤⼩⼀样. 然后舞台中有⼀个层( Layer ). 层中有⼀个矩形( Rect )和⼀个圆形( Circle ). 因此就有⼀个树结构:
所有的节点都可以设置样式与变化. 即使 Konva 可以重新渲染形状, 例如: 矩形, 圆形, 图⽚, 精灵, ⽂本, 线段, 多边形, 正多边形, 路径, 和星星等. 但是开发者依旧可以根据 Shape 类的模板⾃定义⾃⼰的图形, 然后重写 draw ⽅法.
只要拥有了舞台( Stage ), 并且上⾯放置了层( Layer )和图形( Shape ), 那么就可以为他添加事件监听, 变换节点, 运⾏动画, 使⽤路径, 甚⾄是更多的效果.
例如要实现上⾯的案例:
需要引⼊ Konva.js ⽂件
<script src="konva.js"></script>
然后页⾯中放置⼀个容器作为 Konva 处理的对象. Konva 会在该容器中添加 canvas 标签. 值得说明的是, 需要为这个标签添加 id 属性.
<div id="dv"></div>
然后编写 js 代码. Konva 是⼀个完全⾯向对象的库.
创建舞台
var stage = new Konva.Stage({
container: 'dv',
width: window.innerWidth,
height: window.innerHeight
});
⾸先, 在 Konva 中所有的图形都是在 Konva 中的⼀个构造函数. Konva 是全局的命名空间.
创建舞台使⽤的是 Stage 构造函数. 该函数需要提供参数.
Konva 中所有图形的参数都是使⽤ json 对象的⽅式进⾏提供.
舞台需要设置容器的 id, 即 container 属性. 以及宽( width ), ⾼( height ).
舞台中可以放置⼀个到多个层( Layer ), 所有的图形应该放在在层中.
⾸先创建层对象. 层对象不需要传递参数.
var layer = new Konva.Layer();
将层添加到舞台中. Konva 中凡是添加, 都是使⽤ add ⽅法.
stage.add( layer );
在层中放置⼀个矩形, 就创建⼀个矩形对象.
矩形对象需要四个参数来确定, 分别是左上⾓的两个坐标, 和宽与⾼.
var rect = new Konva.Rect({
x: 100,
y: 50,
width: 200,
height: 100,
fill: 'red'
});
Konva 中添加颜⾊使⽤ fill 属性和 stroke 属性, 分别表⽰填充颜⾊与描边颜⾊.
将矩形添加到层中
layer.add( rect );
在层中添加⼀个圆形, 使⽤构造函数 Circle
var circle = new Konva.Circle({
x: Width() / 2,
y: Height() / 2,
radius: 100,
fill: 'pink',
stroke: 'blue'
});
layer.add( circle );
Konva 中使⽤ radius 设置圆形的半径.
Konva 中如果需要获取对象的数据, 使⽤ getXXX ⽅法. 传⼊参数即设置, 不传参数就是获取数据.
最后绘图使⽤ draw ⽅法
layer.draw();
1.3. 基本形状
Konva.js ⽀持的形状有: 矩形( Rect ), 圆形( Circle ), 椭圆( Rllip ), 线段( Line ), 图像( Image ), ⽂本( Text ), ⽂本路径( TextPath ), 星星( Start ), 标签( Label ), SVG 路径( SVG Path ), 正多边形( RegularPolygon ). 同时也可以⾃定义形状.
⾃定义形状使⽤ Shape 构造函数创建
需要提供⾃定义的绘图⽅法 sceneFunc
var triangle = new Konva.Shape({
sceneFunc: function ( ctx ) {
// ⾃定义绘图路径
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.cloPath();
// Konva.js 的独有⽅法
苏轼的父亲ctx.fillStrokeShape( this );
},
fill: 'pink',
stroke: 'red'
});
将图形添加后绘图
layer.add( triangle );
layer.draw();
1.4. 样式
所有的形状都⽀持下列样式属性:
菜鸟的英文填充. 颜⾊, 渐变或图⽚.
描边. 颜⾊与宽度.
阴影. 颜⾊, 偏移量, 透明度与模糊
透明度
1.4.1. 绘制正五边形
构造函数: Konva.RegularPolygon( options )
常⽤属性:
x, y. 表⽰正多边形的中⼼坐标.
sides. 表⽰正多边形的边数.
radius. 表⽰半径.
fill. 填充颜⾊.
stroke. 描边的颜⾊.
strokeWidth. 描边的宽度.
shadowOfftX 和 shadowOffty. 描述背景的偏移量.
shadowBlur. 表⽰模糊程度.
opacity. 表⽰透明度( 取值在 0, 1 之间 ).
案例
var shape = new Konva.RegularPolygon({
x: Width() / 2,
y: Height() / 2,
sides: 5,
radius: 70,
stroke: 'black',
strokeWidth: 4,
shadowOfftX: 20,
shadowOfftY: 25,
shadowBlurBlur: 40,
opacity: 0.5
});
layer.add( shape );
形而上学
1.5. 事件
使⽤ Konva 可以轻松的实现监听⽤户添加的事件. 例如 click, dblclick, mouover, tap, dbltap, touchstart 等. 属性值变化事件. 例如scaleXChange, fillChange 等. 以及拖拽事件. 例如 dragstart, dragmove, dragend.
代码
<( 'mouout touchend', function () {
console.log( '⽤户输⼊' );
});
<( 'xChange', function () {
console.log( '位置发⽣改变' );
});
<( 'dragend', function () {
console.log( '拖动停⽌' );
});
1.6. 拖拽与降低
Konva ⽀持拖拽的功能. 也⽀持下降事件( drop, dropenter, dropleave, dropover ).
如果需要实现拖拽的功能. 可以设置 draggable 属性为 true.
创建的时候设置属性
创建后使⽤⽅法设置属性
shape.draggable( true );
Konva 还⽀持给拖拽事件添加移动范围.
1.7. 滤镜( Filter )
Konva ⽀持多种滤镜功能. 例如: 模糊, 翻转, 声⾳等.
1.8. 动画
Konva 中可以使⽤两种⽅式创建动画
使⽤ Konva.Animation
var anim = new Konva.Animation(function ( frame ) {
var time = frame.time,
timeDiff = frame.timeDiff,
frameRate = frame.frameRate;
// 更新代码
舒婷诗歌}, layer );
使⽤ Konva.Tween
var tween = new Konva.Tween({
node: rect,
duration: 1,
x: 140,
rotation: Math.PI * 2,
opacity: 1,
strokeWidth: 6
});
// 或者使⽤新的短⽅法
<({
fill: 'green'去色素
});
1.9. 选择器
当构建规模较⼤的应⽤时, 如果可以对元素进⾏搜索是⾮常⽅便的. Konva 使⽤选择器来实现元素的查找. 使⽤ find() ⽅法返回⼀个集合. 使⽤findOne() ⽅法返回集合中的第 0 个元素.
给元素提供 name 属性, 可以使⽤ '.name' 来进⾏获取. 类似于类选择器.
使⽤构造函数的名字也可以作为名字选择器. 类似于标签选择器.
使⽤ id 属性, 则使⽤ '#id' 来获取.
查找⽅法使⽤层对象来调⽤.
案例
...
var r = 100;
var c1 = new Konva.Circle({
x: Width() / 8,
y: Height() / 2,
radius: r,
fill: 'red',
stroke: '#000',
id: 'c1'
});
layer.add( c1 );
var c2 = new Konva.Circle({
x: Width() / 8 * 3,
y: Height() / 2,
radius: r,
fill: 'red',
stroke: '#000',
name: 'c'
});
layer.add( c2 );
var c3 = new Konva.Circle({
x: Width() / 8 * 5,
y: Height() / 2,
radius: r,
fill: 'red',
stroke: '#000',
name: 'c'成人故事
});
layer.add( c3 );
var c3 = new Konva.Circle({
x: Width() / 8 * 7,
y: Height() / 2,
radius: r,
fill: 'red',
stroke: '#000'
});
layer.add( c3 );
layer.find( '.c' ).each(function ( v, i ) {
v.fill( 'pink' );
});
layer.find( '#c1' ).forEach(function ( v, i ) {
v.stroke( 'blue' );
v.strokeWidth( 10 );
});
layer.find( 'Circle' ).each( function ( v, i ) {
冯泽昂v.stroke( 'green' );
});
...
1.10. 序列号与反序列化
所有被创建的对象都可以保存为 JSON 对象. 可以在服务器或本地存储中使⽤它. var json = JSON();
同时, 也可以从 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 = ate(json, 'container');
2. 形状 Shape
2.1. 矩形 Rect
创建语法: new Konva.Rect( config )
常⽤属性:
cornerRadius 属性. 数字类型, 表⽰圆⾓矩形的圆⾓半径.
fill 属性. 字符串, 设置填充颜⾊.
stroke 属性. 字符串, 设置描边颜⾊.
dash 属性. 数组, ⽤于描述虚线的间隔.
x, y, width, height 属性. 数字, 描述矩形的位置与宽⾼.
name, id 属性. 字符串, ⽤于设置搜索标记.
opacity 属性. 数字, ⽤于设置透明度.
scaleX, scaleY 属性. 数字, ⽤于设置缩放变换.
rotation 属性. 数字, ⽤于设置旋转⾓度.
draggable 属性. 布尔类型, ⽤于设置是否允许拖拽.
lineJoin, lineCap 属性. 设置线样式.
常⽤⽅法:
Konva 中构造函数的属性多半有同名的⽅法.
拨的成语toJSON() ⽅法. 将动画转换成 json 字符串.
to( params ) ⽅法. 使⽤ Tween 动画.
tAttrs( config ) 与 tAttr( attr, val ) ⽅法, ⽤于重新设置属性.
remove() ⽅法. 将当前对象删除, 但是销毁.
on( evtStr, handler ) 与 off( evtStr ) ⽅法, ⽤于添加与移除事件.
案例
...
var rect = new Konva.Rect({
x: 100, y: 100,
width: 200, height: 100,
stroke: 'red', fill: 'pink'
});
layer.add( rect );
...
2.2. 圆 Circle
创建语法: new Konva.Circle( config )
常⽤属性:
radius 属性. 数字类型, ⽤于设置半径.
fill, stroke 属性.
strokeWidth 属性.
lineJoin, lineCap 属性.
dash 属性.
x, y 属性
常⽤⽅法:
