/cc

A canvas library

Primary LanguageTypeScript

CC

A canvas library.

Demo

Demo

Development

$ git clone git@github.com:waisiukei/cc.git
$ yarn
$ npm run serve

基本概念

cc创建了类似 DOM 的对象模型。绘图元素可以嵌套成类 DOM 🌲结构；绘图元素可以监听 MouseEvent 。

  • Stage：Canvas容器，可以使用多层Canvas结构
  • Layer： Canvas元素的封装，使用多层Canvas结构时，添加Layer到同一个Stage
  • Element： 添加到canvas上的元素，可以自定义hittest检测
  • Group: 元素分组容器，可以自定义hittest检测

事件

绘图元素支持鼠标事件，提供事件冒泡 支持的事件：

  • mousedown
  • mouseup
  • mousemove
  • click
  • mouseover
  • mouseout
  • dragstart
  • drag
  • dragend

碰撞检测

用户需要自行实现碰撞检测方法

选择器

类似 d3.selection ，区别是，使用函数而不是选择器字符串去匹配元素

动画

提供如下API

  • tween 插值动画
  • set 立即改变
  • delay 等待