1、什么是knova?
Konva 是一个HTML5 Canvas JavaScript框架,可以让我们像操作 DOM 一样来操作 canvas,并提供了对 canvas 中元素的事件机制,拖放操作的支持。
它通过为桌面和移动应用程序启用Canvas交互性来扩展2d上下文。
Konva支持高性能动画、转换、节点嵌套、分层、过滤、缓存、桌面和移动应用程序的事件处理等等。
您可以在舞台上绘制东西,向它们添加事件侦听器,移动它们,缩放它们,并独立于其他形状旋转它们,以支持高性能动画,即使您的应用程序使用了数千个形状。所以,用它来做一个拼图游戏什么的最合适了。
2、knova的使用
直接通过npm安装
npm install konva
直接引入
<script src="https://unpkg.com/konva@3.2.4/konva.min.js"></script>
直接下载
https://unpkg.com/konva@3.2.4/konva.js
3、knova的术语说明
先看官方给出的元素树图:
首先我们将整个视图看做一个舞台stage,而舞台中的每一个层,看做layer,layer里面可以有多个group组,我们在group中绘制图案放入图片等等。<