Konva的使用快速上手

最新推荐文章于 2024-04-20 08:59:57 发布
最新推荐文章于 2024-04-20 08:59:57 发布
阅读量6k 收藏 7
点赞数
分类专栏： 前端 文章标签： Konva Konva使用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sg392361615/article/details/52796856
版权

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优化

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

 

}

 

 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优化

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

 

}

 





慵懒的巴哥
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Konva-前端绘图框架，轻松进行分层绘制
一只小辣鸡的开发之路
08-19 6246
Konva一、介绍二、官方地址三、使用方法 一、介绍 Konva is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications. Konva enables high performance animations, transitions, node nesting, layering, fil
H5画布 canvas 入门到精通 _ 第三部分(canvas 库 Konva.js 的使用)
m0_67266787的博客
03-03 1333
目录 一、Konva 基本概念 二、Konva 的使用 1. 引入 Konva 2. Konva 基本绘制步骤 三、Konva 动画 1. tween 对象 2. 动画 to 方法的使用 3. 循环播放动画 四、案例：使用 Konva 绘制进度条 一、Konva 基本概念 Konva.js，全称适用于桌面/移动端应用的 HTML5 2d canvas 库，是一个HTML5 Canvas JavaScript 框架，它提供了高性能的动画，补间，节点嵌套，布局，滤镜，缓存，事件绑定（桌面/移动端）等等功能。你
Konva基本用法
weixin_33962923的博客
01-19 896
2019独角兽企业重金招聘Python工程师标准>>> ...
前端使用 Konva 实现可视化设计器（6）- 复制粘贴、删除、位置、zIndex调整
最新发布
xachary的博客
04-20 947
这一章处理一下复制、粘贴、删除、画布归位、层次调整，通过右键菜单控制。其实没有想象中那么简单，细节真的比较多。
Konva类库
UNDEFINED_AUBE的博客
01-07 1314
一、Konva的整体理念 1.舞台概念的引入：整个试图（canvas展现给用户看的东西）看做一个舞台stage 2.舞台中可以绘制很多个层layer  3.layer下面可以有很多的group 4.group下面可以有矩形、图片、其他形状等 5、在konva库中获取数据都是用方法，不是通过属性 二、Konva动画系统 1.tween对象（重点） （1）tween是控
konvajs-性能优化-使用缓存
weixin_46721670的博客
09-28 1454
大幅提高复杂Konva图形绘制性能的一种方法是将它们缓存为图像。 这可以通过使用cache()方法将节点转换为图像对象来实现。 本教程将绘制10个缓存的星星，而不是单独绘制10个 Stars的绘图性能提升了4倍。缓存可以应用于任何节点， 包括舞台、层、组和形状。 注意:cache()方法要求图像托管在与执行它的代码具有相同域的web服务器上。 在同样的情况下，cache()函数不能自动检测节点的大小。 所以你应该小心阴影和笔画的组和形状。 如果你看到意外的结果，将带有x, y，宽度和高度属性的绑定属性传递给
Konva基本处理流程和相关架构设计
玉案轩窗的博客
09-26 1639
canvas是使用JavaScript基于上下文对象进行2D图形的绘制的HTML元素，通常用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。基于Canvas之上，诞生了例如 PIXI、ZRender、Fabric、Konva等 Canvas渲染引擎，兼顾易用的同时保证了优秀可靠的渲染性能。虽然对PIXI、Fabric也有所了解，但个人最早接触的是Konva，之后的系列文章都是基于Konva进行学习总结，涉及到其相关架构设计、优化策略等方面，Konva版本是v9.2.1。
使用Konva操纵HTML5画布：第2部分，基本形状
代码教主
06-18 1241
该系列的入门教程教您如何使用Konva绘制第一个形状。 它还说明了层和组在Konva中如何工作。 在本系列的其余部分中，我们将专注于更具体的主题，例如创建基本和复杂的形状或将事件侦听器附加到不同的形状，以使图形具有交互性。 本教程将向您展示如何在Konva中创建基本形状，例如矩形，圆形和椭圆形。 您还将了解可用于根据需要自定义所有这些形状的外观的不同属性。 本教程后面的部分将讨论如何使用K...
Python快速上手.pdf
01-09
python技术，热门，小例子例程，供喜欢者闲暇娱乐学习之！可以兼得学习享乐而共有之！！入门者、自学者、均可得之与本手册！！！
Eclipse快速上手指南之使用CVS
03-03
CVS是优秀的开源版本控制软件，Eclipse本身就内置了对CVS的支持，只需简单配置，即可使用CVS。首先我们要正确安装并配置好CVS服务器，通常LinuxServer都自带CVS服务，不过命令行操作比较繁琐。Windows下也有简单易用...
Eclipse快速上手指南之使用ANT
02-04
如果你现在还没有开始使用Ant，那就要赶快开始学习使用，使自己的开发水平上一个新台阶。　Eclipse中已经集成了Ant，我们可以直接在Eclipse中运行Ant。　以前面建立的Hello工程为例，创建以下目录结构：　新建一个...
konva-builder:使用konva.js 快速设计一个网页设计器
04-19
konva-builder 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
HTML5+React-Konva.js实现的爆炸动画效果源码.zip
11-03
HTML5+React-Konva.js实现的爆炸动画效果源码.zip
konva.min.js
05-19
Konva 是一个 基于 Canvas 开发的 2d js 框架库, 它可以轻松的实现桌面应用和移动应用中的图形交互交互效果. Konva 可以高效的实现动画, 变换, 节点嵌套, 局部操作, 滤镜, 缓存, 事件等功能, 不仅仅适用于桌面与移动开发, 还有更为广泛的应用. Konva 允许在舞台上绘图, 添加事件监听, 移动或缩放某个图形, 独立旋转, 以及高效的动画. 即使应用中含有数千个图形也是可以轻松实现的.
基于Konva的canvas动态绘图(2)
09-23
基于Konva的canvas动态绘图，用到了面向对象的思想,实现了一个在网页加载时，扇形圆动态开启的动画下效果
ppt设计快速上手
12-18
本书作者围绕PPT 等电子演示文稿的创建与制作，向大家传授了大量的方法原则及经验心得。其中涵盖PPT 准备、内容创建、外观设计的各个流程，同时兼顾配套辅助环节，并创新性地提出了内容优化四原则、外观设计四原则。
Konvajs清除绘制线
Zxiuping的博客
04-07 489
Konva绘制线，点击事件在下次绘制的时候清除上次绘制。使用的是layer.draw()方法清除上次绘制线。
Konva（一个HTML5 Canvas JavaScript 框架）快速入门
山有木兮木有枝 心悦君兮君不知
01-21 1765
1.引入Konva 方法一：使用包管理器: npm install konvaf 方法二：用 <script> 标签: <script src="https://unpkg.com/konva@4.0.0/konva.min.js"></script> 2.创建舞台 <div id="container"></div> <script> var width = windo.
使用Konva操纵HTML5画布：第3部分，复杂的形状和精灵
代码教主
06-19 1505
在本系列的第二篇教程中，您学习了如何使用Konva绘制基本形状 。 您可以以一种或另一种方式组合基本形状以创建星形，环形，箭头，钟形或小屋。 Konva还允许您使用库提供的内置函数来创建一些常见的复杂形状。 在本教程中，您将学习如何在Konva中创建星星和戒指。 之后，我们将讨论如何使用Konva编写文本以及如何沿特定路径编写文本。 您还将学习如何使用Konva在画布上绘制图像和精灵。 ...
rhino使用手册，关于如何使用rhino的手册
07-07
如何使用rhino，犀牛的基本使用和开发。内有简单的案例，可以很快速的学习使用rhino，新手上手必备。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值