Giter Site home page Giter Site logo

cc's Introduction

CC

A canvas library.

Demo

Demo

Development

$ git clone [email protected]: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 等待

cc's People

Contributors

hooker41 avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.