canvas常用库-----KonvaJS

来源：意榕旅游网

canvas常⽤库-----KonvaJS

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

Konva 可以⾼效的实现动画, 变换, 节点嵌套, 局部操作, 滤镜, 缓存, 事件等功能, 不仅仅适⽤于桌⾯与移动开发, 还有更为⼴泛的应⽤.Konva 允许在舞台上绘图, 添加事件监听, 移动或缩放某个图形, 独⽴旋转, 以及⾼效的动画. 即使应⽤中含有数千个图形也是可以轻松实现的.1.1. 使⽤ Konva1.2. KonvaJS 的理念

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

每⼀个层中都含有两个

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

在这个图形中, ⾸先有⼀个舞台( Stage ). 该舞台在页⾯中与整个页⾯的⼤⼩⼀样. 然后舞台中有⼀个层( Layer ). 层中有⼀个矩形( Rect )和⼀个圆形( Circle ). 因此就有⼀个树结构:

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

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

例如要实现上⾯的案例:

需要引⼊ Konva.js ⽂件

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

然后编写 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 );

在层中添加⼀个圆形, 使⽤构造函数 Circlevar circle = new Konva.Circle({x: stage.getWidth() / 2,y: stage.getHeight() / 2,radius: 100,fill: 'pink',stroke: 'blue'});

layer.add( circle );

Konva 中使⽤ radius 设置圆形的半径.

Konva 中如果需要获取对象的数据, 使⽤ getXXX ⽅法. 传⼊参数即设置, 不传参数就是获取数据.最后绘图使⽤ draw ⽅法layer.draw();1.3. 基本形状

Konva.js ⽀持的形状有: 矩形( Rect ), 圆形( Circle ), 椭圆( Rllipse ), 线段( Line ), 图像( Image ), ⽂本( Text ), ⽂本路径( TextPath ), 星星( Start), 标签( Label ), SVG 路径( SVG Path ), 正多边形( RegularPolygon ). 同时也可以⾃定义形状.⾃定义形状使⽤ Shape 构造函数创建需要提供⾃定义的绘图⽅法 sceneFuncvar 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'});

将图形添加后绘图layer.add( triangle );layer.draw(); 1.4. 样式

所有的形状都⽀持下列样式属性:填充. 颜⾊, 渐变或图⽚.描边. 颜⾊与宽度.

阴影. 颜⾊, 偏移量, 透明度与模糊透明度

1.4.1. 绘制正五边形

构造函数: Konva.RegularPolygon( options )常⽤属性:

x, y. 表⽰正多边形的中⼼坐标.sides. 表⽰正多边形的边数.radius. 表⽰半径.fill. 填充颜⾊.

stroke. 描边的颜⾊.

strokeWidth. 描边的宽度.

shadowOffsetX 和 shadowOffsety. 描述背景的偏移量.shadowBlur. 表⽰模糊程度.

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 ); 1.5. 事件

使⽤ 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( '拖动停⽌' );});

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

// 或者使⽤新的短⽅法circle.to({

duration: 1,fill: 'green'});

1.9. 选择器

当构建规模较⼤的应⽤时, 如果可以对元素进⾏搜索是⾮常⽅便的. Konva 使⽤选择器来实现元素的查找. 使⽤ find() ⽅法返回⼀个集合. 使⽤findOne() ⽅法返回集合中的第 0 个元素.

给元素提供 name 属性, 可以使⽤ '.name' 来进⾏获取. 类似于类选择器.使⽤构造函数的名字也可以作为名字选择器. 类似于标签选择器.使⽤ id 属性, 则使⽤ '#id' 来获取.查找⽅法使⽤层对象来调⽤.案例

...

var r = 100;

var c1 = new Konva.Circle({x: stage.getWidth() / 8,y: stage.getHeight() / 2,radius: r,fill: 'red',

stroke: '#000',id: 'c1'});

layer.add( c1 );

var c2 = new Konva.Circle({x: stage.getWidth() / 8 * 3,y: stage.getHeight() / 2,radius: r,fill: 'red',

stroke: '#000',name: 'c'});

layer.add( c2 );

var c3 = new Konva.Circle({x: stage.getWidth() / 8 * 5,y: stage.getHeight() / 2,radius: r,fill: 'red',

stroke: '#000',name: 'c'});

layer.add( c3 );

var c3 = new Konva.Circle({x: stage.getWidth() / 8 * 7,y: stage.getHeight() / 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 = 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\'\"strokeWidth\":4},' +

'\"className\":\"RegularPolygon\']' +'}]}';

var stage = Konva.Node.create(json, 'container');2. 形状 Shape2.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 动画.

setAttrs( config ) 与 setAttr( 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 属性常⽤⽅法:

2.3. 椭圆 Ellipse

创建语法: new Konva.Ellipse( config ).常⽤属性:

x, y 属性. 数字类型, 表⽰椭圆中⼼的坐标

radius 属性. 对象类型, x, y 分别表⽰椭圆的长轴与短轴.案例

var ellipse = new Konva.Ellipse({x: stage.getWidth() / 2,y: stage.getHeight() / 2,radius: {

x: 100, y: 100},

stroke: 'red',fill: 'pink',rotation: 30});效果

2.4. 楔形 Wedge

创建语法: new Konva.Wedge( config )常⽤属性:

angle 属性. 表⽰楔形的⾓度. ⾓度带有⽅向, ⽔平向右为 0 度. 使⽤⾓度单位.radius 属性. 表⽰半径.clockwise 属性. 表⽰⽅向.

x, y, lineJoin, lineCap, fill, stroke, ...常⽤⽅法:案例

...

var data = [ .3, .4, .2, .1 ];

var colors = 'red, pink, green, blue'.split( ',' );var startAngle = -90;

data.forEach( function ( v, i ) {var wedge = new Konva.Wedge({x: stage.getWidth() / 2,y: stage.getHeight() / 2,radius: 100,

angle: startAngle + 360 * v,rotation: startAngle,fill: colors[ i ],opacity: .8});

startAngle += 360 * v;layer.add( wedge );});...效果

2.5. 线段 Line

线段有折现, 曲线与闭合线路的⽤法.创建语法: new Konva.Line( config )常⽤属性:

points 属性. 数组, ⽤于存储折线的各个点的坐标.tension 属性. 数字类型, ⽤于表⽰曲线连线. 默认为 0.closed 属性. 布尔值, ⽤于表⽰是否闭合路径.

x, y 属性. ⽤于设置绘制直线时的参考坐标原点.常⽤⽅法:说明:

使⽤ Konva.Line 构造函数创建直线.

使⽤ Konva.Line 构造函数与 closed = true 属性可以创建多边形.使⽤ Konva.Line 构造函数与 tension 属性可以创建曲线板.

使⽤ Konva.Line 构造函数与 tension 属性, 以及 closed = true 可以创建⽓泡.案例

var line = new Konva.Line({x: 100, y: 100,

points: [ 10, 0, 100, 100, 200, 0 ],tension: 1,stroke: 'red' });

layer.add( line );

var rect = new Konva.Line({x: 300, y: 100,

points: [ 0, 0, 100, 0, 100, 100, 0, 100 ],closed: true,stroke: 'red' });

layer.add( rect );效果

2.6. 图⽚ Image

创建语法: new Konva.Image( config )常⽤属性:

x, y, width, height

image 属性. ⽤于设置图⽚对象.

crop 属性. 对象: { x, y, width, height }. 表⽰裁剪.2.7. ⽂本 Text

创建语法: new Konva.Text( config )常⽤属性:

fontFamily 属性.fontSize 属性.fontStyle 属性.fontVariant 属性

text 属性. ⽤于设置⽂本内容.

align 属性. 可选值: left, center, right.padding 属性.lineHeight 属性.x, y 属性案例

// 创建⽂本

var txt = new Konva.Text({x: 100, y: 100,align: 'left',

text: '测试⽂本',fontSize: 30,padding: 10,width: 200,height: 200});

layer.add( txt );

var rect = new Konva.Rect({

x: 100, y: 100,

width: 200, height: 200,stroke: 'red'});

layer.add( rect );效果

2.8. 星星 Star

创建语法: new Konva.Star( config )常⽤属性:

x, y

numPoints 属性. 表⽰⼏⾓星.innerRadius 属性. 表⽰内半径.outerRadius 属性. 表⽰外半径.旋转的五⾓星

var star = new Konva.Star({x: stage.getWidth() / 2,y: stage.getHeight() / 2,numPoints: 5,outerRadius: 100,innerRadius: 50,stroke: 'red',fill: 'lightgreen'});

layer.add( star );

var tween = new Konva.Tween({node: star,rotation: 360,duration: 2,

onFinish: function () {this.reset();this.play();}});

tween.play();效果

2.9. 圆环 Ring

创建语法: new Konva.Ring( config )常⽤属性:

innerRadius, outerRadiusclockwise案例

var ring = new Konva.Ring({x: width / 2,y: height / 2,innerRadius: 50,outerRadius: 100,fill: 'pink',stroke: 'blue',});

layer.add( ring );效果

2.10. 圆弧 Arc

创建语法: new Konva.Arc( config )常⽤属性:

innerRadius, outerRadiusangle案例

var arc = new Konva.Arc({x: width / 2,y: height / 2,innerRadius: 70,outerRadius: 100,stroke: 'green',fill: 'pink',angle: 60,rotation: -90});

layer.add( arc );效果

2.11. 正多边形 Regular Polygon

创建语法: new Konva.RegularPolygon( config )常⽤属性:

sides 属性. 表⽰多边形的边数.radius 属性.案例

var shape = new Konva.RegularPolygon({x: width / 2, y: height / 2,sides: 6,radius: 100,fill: 'pink',stroke: 'blue'});

layer.add( shape );效果

2.12. 箭头 Arrow

创建语法: new Konva.Arrow( config )常⽤属性:

points 属性tension 属性

pointerLength 属性. 表⽰箭头的长度.pointerWidth 属性. 表⽰箭头的宽度.案例

var rect1 = new Konva.Rect({x: width / 4 - 50,y: height / 4 - 25,stroke: '#000',width: 100,height: 50,fill: 'pink',opacity: .5});

layer.add( rect1 );

var txt1 = new Konva.Text({x: width / 4 - 50,y: height / 4 - 6,

fontSize: 12,

text: 'Object 构造函数',align: 'center',width: 100,height: 50});

layer.add( txt1 );

var rect2 = new Konva.Rect({x: width * 3 / 4 - 50,y: height * 3 / 4 - 25,stroke: '#000',width: 100,height: 50,fill: 'pink',opacity: .5});

layer.add( rect2 );

var txt2 = new Konva.Text({x: width * 3 / 4 - 50,y: height * 3 / 4 - 6,fontSize: 12,

text: 'Object.prototype',align: 'center',width: 100,height: 50});

layer.add( txt2 );

var arrow = new Konva.Arrow({points: [

width / 4 + 50,height / 4,width / 2,height / 4,width / 2,height * 3 / 4,width * 3 / 4 - 50 - 7,height * 3 / 4],

pointerLength: 15,pointerWidth: 6,fill: '#ccc',stroke: '#ccc',lineWidth: .7});

layer.add( arrow );效果

3. 组 Group

创建语法: new Konva.Group( config )常⽤属性:

x, y, width, heightrotation, draggable案例

var group = new Konva.Group({x: 100, y: 100,width: 100,height: 100});

layer.add( group );

group.add( new Konva.Rect({x: 0, y: 0, width: 100, height: 100,fill: 'red', stroke: 'blue'}) );

注意: 放在 group 中的形状使⽤ group 作为参考坐标.4. Konva.EasingBackEaseInBackEaseOutBackEaseInOutElasticEaseInElasticEaseOutElasticEaseInOutBounceEaseOutBounceEaseInBounceEaseInOutEaseInEaseOutEaseInOutStrongEaseInStrongEaseOutStrongEaseInOutLinear

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文