初识Canvas框架konvajs

konvajs

• 什么是konva

  Konva是一个canvas的JavaScript框架，通过让web桌面应用和手机应用更具有交互性扩展其2d功能。

  konva能够实现高性能的动画，过渡，结巢、分层、过滤，
  缓存，桌面和移动应用程序的事件处理，以及更多。

  你可以把组件画到stage上，然后对它们添加事件监听，移动他们，
  缩放他们，可以脱离其他shapes独立旋转，使其变高性能。即使你的应用程序使用了成千上万的shapes。

• 安装konva

  如果你已经安装了node，使用以下命令安装:

  $ npm install konva
  $ # or
  $ bower install konva
  
  

  或者从CDN上下载：

  Full version konva.js.

  Min version konva.min.js.

• konva如何工作

  每个layer有两renderer：scene renderer 和 hit graph renderer.
  scene renderer是你能看到的东西，hit graph renderer是一种隐藏的，
  用于检测高性能事件。

  每个layer都可以包含shapes、groups of shapes、 和 groups of other groups。
  在stage上layers、 groups 和 shapes都是虚拟节点，类似于HTML页面的DOM节点。

  下面展示一个节点的例图：

eg:           Stage
                |
         +------+------+
         |             |
       Layer         Layer
         |             |
   +-----+-----+     Shape
   |           |
 Group       Group
   |           |
   +       +---+---+
   |       |       |
Shape   Group    Shape
           |
           +
           |
         Shape