Canvas渲染引擎，支持SVG，兼容小程序、小游戏和Web.zip

English | [简体中文](./README.CN.md) # Cax [](https://www.npmjs.com/package/cax) > Canvas 2D Rendering Engine ## Features * Simple API, Lightweight and High performance * Support PC and Mobile Canvas 2D Rendering and Mouse and Touch Event * Support event of element and element management like DOM * Turing complete group nesting system * Support clip and clip transformation * Built-in Text, Bitmap, Sprite, Graphics and Shape * Support [SVG Path](https://github.com/dntzhang/cax/blob/master/packages/cax/src/render/display/shape/path.js) rendering * Support [CSS filter](https://github.com/dntzhang/cax/tree/master/packages/cax/src/render/filter) * Built-in images loader * Built-in cross platform motion library [→ to2to](https://github.com/dntzhang/cax/tree/master/packages/to) ## Demo * [Wechart by Cax](https://github.com/dntzhang/wechart) * [Simple](https://dntzhang.github.io/cax) * [Animation](https://dntzhang.github.io/cax/packages/cax/examples/to/) * [Clip](https://dntzhang.github.io/cax/packages/cax/examples/clip/) * [Clip Transform](https://dntzhang.github.io/cax/packages/cax/examples/clip-transform/) * [Clip Transition](https://dntzhang.github.io/cax/packages/cax/examples/clip-transition/) * [To2To Animate](https://dntzhang.github.io/cax/packages/cax/examples/to-animate/) * [Swing](https://dntzhang.github.io/cax/packages/to/examples/swing/) * [Cax + Matter](https://dntzhang.github.io/cax/packages/cax/examples/matter/) * [Pie Chart](https://dntzhang.github.io/wechart/packages/pie/examples/simple/) * [To + Shape](https://dntzhang.github.io/cax/packages/cax/examples/to-shape/) * [Vision](https://dntzhang.github.io/cax/packages/cax/examples/vision/) * [Cache](https://dntzhang.github.io/cax/packages/cax/examples/cache/) * [Filter](https://dntzhang.github.io/cax/packages/cax/examples/filter/) * [SVG](https://dntzhang.github.io/wechart/packages/path/examples/man/) * [Graphics](https://dntzhang.github.io/cax/packages/cax/examples/graphics/) * [Composite Operation](http://dntzhang.github.io/cax/packages/cax/examples/composite-operation/) * [Cax + Dragonbones](https://dntzhang.github.io/wechart/packages/cax-dragonbones/examples/simple/index.html) [→ Demo Source Code](https://github.com/dntzhang/cax/tree/master/packages/cax/examples) ## Docs - [Getting Started](#getting-started) - [Built-in Object](#built-in-object) - [Group](#group) - [Method](#group-method) - [add](#add) - [remove](#remove) - [empty](#empty) - [replace](#replace) - [Stage](#stage) - [Method](#stage-method) - [update](#update) - [scaleEventPoint](#scaleeventpoint) - [Prop](#stage-prop) - [disableMoveDetection](#disablemovedetection) - [moveDetectionInterval](#movedetectioninterval) - [Bitmap](#bitmap) - [Prop](#bitmap-prop) - [rect](#rect) - [Sprite](#sprite) - [Method](#sprite-method) - [gotoAndPlay](#gotoandplay) - [gotoAndStop](#gotoandstop) - [gotoAndPlayOnce](#gotoandplayonce) - [Text](#text) - [Method](#text-method) - [getWidth](#getwidth) - [Graphics](#graphics) - [Shape](#shape) - [Rect](#rect-1) - [Circle](#circle) - [Ellipse](#ellipse) - [Element](#element) - [Button](#button) - [Property](#property) - [Transform](#transform) - [Alpha](#alpha) - [CompositeOperation](#compositeoperation) - [Cursor](#cursor) - [Fixed](#fixed) - [Shadow](#shadow) - [Stage](#stage-1) - [Method](#method) - [destroy](#destroy) - [Event](#event) - [Motion](#motion) - [Clip](#clip) - [Custom Object](#custom-object) - [Custom Shape](#custom-shape) - [Custom Element](#custom-element) - [Who is using cax?](#who-is-using-cax) - [License](#license) ## Getting Started Get cax through npm or cdn: ``` bash npm i cax ``` * [https://unpkg.com/cax@latest/dist/cax.min.js](https://unpkg.com/cax@latest/dist/cax.min.js) * [https://unpkg.com/cax@latest/dist/cax.js](https://unpkg.com/cax@latest/dist/cax.js) Usage: ``` js import cax from 'cax' const stage = new cax.Stage(200, 200, 'body') cax.loadImgs({ imgs: ['./test.jpg'], complete: (imgs) => { const img = imgs[0] const bitmap = new cax.Bitmap(img) bitmap.x = stage.width / 2 bitmap.y = stage.height / 2 bitmap.rotation = -10 bitmap.originX = img.width / 2 bitmap.originY = img.height / 2 bitmap.filter('blur(10px)') stage.add(bitmap) stage.update() } }) ``` ## Built-in Object ### Group For grouping, group can also nested group, and the parent container's properties will be superimposed on child properties, such as: * the x of group is 100, the x of bitmap in group is 200, and the x of the bitmap rendered to stage is 300. * the alpha of group is 0.7, the alpha of bitmap in group is 0.6, and the alpha of the bitmap rendered to stage is 0.42. ```js const group = new cax.Group() const rect = new cax.Rect(100, 100, { fillStyle: 'black' }) group.add(rect) stage.add(group) stage.update() ``` Group has commonly used `add` and `remove` methods to add and delete elements. The first add will be drawn first, and all subsequent add will be covered above the top add. #### Group Method ##### add add child to group ``` js groupObj.add(child) ``` ##### remove remove child from group ``` js groupObj.remove(child) ``` ##### empty remove all the children from group ``` js groupObj.empty() ``` ##### replace replace child by another obj ```js groupObj.replace(current, prev) ``` ### Stage Stage is the largest top container inherited from Group, so have all the methods and props of Group. #### Stage Method ##### update Any element can't be seen on the stage. You must execute the update method. ```js stage.update() ``` Any element property is modified. Please perform stage.update() to update the stage, or put it in the timer. ```js cax.tick(stage.update.bind(stage)) ``` ##### scaleEventPoint When the height of the canvas and the pixels of the canvas are not one-to-one, the event triggering position is inaccurate, and you can use the scaleEventPoint method to make the event correct. ```js //The width of the canvas is half the canvas pixel stage.scaleEventPoint(0.5, 0.5) ``` Example: https://github.com/dntzhang/cax/blob/master/packages/cax/examples/pie/main.js#L218-L220 #### Stage Prop ##### disableMoveDetection Disable event detection for mouse or touch mobile. Default value in the web is false. You can change it: ```js stage.disableMoveDetection = true ``` ##### moveDetectionInterval Set the touchmove and mousemove detection interval by moveDetectionInterval. ```js //check twice in one second stage.moveDetectionInterval = 500 ``` ### Bitmap ```js const bitmap = new cax.Bitmap(img) stage.add(bitmap) stage.update() ``` If you only transmit URL instead of the instance of the Image object, you need to do this: ```js const bitmap = new cax.Bitmap('./wepay.png', ()=>{ stage.update() }) stage.add(bitmap) ``` #### bitmap-prop ##### rect You can set the picture clipping display area, and other transform attributes: ```js bitmap.rect = [0, 0, 170, 140] bitmap.x = 200 bitmap.rotation = 30 ``` ### Sprite The sequence frame animation component can combine any region of any picture into a series of animations. ```js const sprite = new cax.Sprite({ framerate: 7, imgs: ['./mario-sheet.png'], frames: [ // x, y, width, height, originX, originY ,imageIndex [0, 0, 32, 32], [32 * 1, 0, 32, 32], [32 * 2, 0, 32, 32], [32 * 3, 0, 32, 32], [32 * 4, 0, 32, 32], [32 * 5, 0, 32, 32], [32 * 6, 0, 32, 32], [32 * 7, 0, 32, 32], [32 * 8, 0, 32, 32], [32 * 9, 0, 32, 32], [32 * 10, 0, 32, 32], [32 * 11, 0, 32, 32], [32 * 12, 0, 32, 32], [32 * 13, 0, 32, 32], [32 * 14, 0, 32, 32] ],