开源项目精选: 基于H5 Canvas的交互框架——Konva

简介:

Knova.js 是一个基于HTML5 Canvas 的JavaScript 框架,可以实现高性能的动画,转换,节点嵌套,分层,过滤,缓存,时间处理等等,并且具有良好的响应式布局,可以同时支持电脑桌面和移动应用。

在使用Knova时,可以在Knova.Stage上开始绘制,为它们添加事件监听器,移动它们,缩放它们,即使您的应用程序使用了数千种形状,并将它们从其他形状中独立出来以支持高性能的动画。

该库最初是作为ericdrowell / KineticJS的GitHub分支开始的。

实现方式

所有工作都从Konva.Stage开始,每个stage可以包含多个图层,而每个图层则包含两个canvas渲染器,其中一个是我们所看见的,另一个隐藏,用来提高实现事件监听的效率。

开源项目精选: 基于H5 Canvas的交互框架——Konva

使用示例

效果演示

开源项目精选: 基于H5 Canvas的交互框架——Konva

加载和安装

Konva支持UMD加载。因此,您可以使用所有可能的变体将框架加载到您的项目中:

1. 通过<script>标签来加载Konva:

2. 通过AMD加载:

3. 通过npm:

导入代码

4. 如果您使用的是webpack或browserfy,则可以使用此方法仅加载所需的Konva零件:

了解更多欢迎进入官方演示站:

https://konvajs.github.io/

github