cax下载 - cax源代码下载

英语| 简体中文

卡克斯

帆布2D渲染引擎

特征

简单的API，轻巧和高性能
支持PC和移动帆布2D渲染以及鼠标和触摸事件
元素和元素管理的支持事件，例如DOM
图灵完整的小组筑巢系统
支持剪辑和剪辑转换
内置文本，位图，精灵，图形和形状
支持SVG路径渲染
支持CSS过滤器
内置图像加载程序
内置跨平台运动库→TO2TO

演示

卡克斯的微信
简单的
动画片
夹子
夹转换
夹过渡
to2to动画
摇摆
CAX +物质
饼图
到 +形状
想象
缓存
筛选
SVG
图形
复合操作
Cax + Dragonbones

→演示源代码

文档

入门
内置对象
- 团体
  - 方法
    - 添加
    - 消除
    - 空的
    - 代替
- 阶段
  - 方法
    - 更新
    - scaleeventpoint
  - 支柱
    - 残疾人able缩
    - MoveTection Interval
- 位图
  - 支柱
    - 矩形
- 精灵
  - 方法
    - Gotoandplay
    - gotoandstop
    - gotoandplayonce
- 文本
  - 方法
    - getwidth
- 图形
- 形状
  - 矩形
  - 圆圈
  - 椭圆
- 元素
  - 按钮
财产
- 转换
- 阿尔法
- 复合操作
- 光标
- 固定的
- 阴影
- 阶段
方法
- 破坏
事件
运动
夹子
自定义对象
- 自定义形状
- 自定义元素
谁在使用卡克斯？
执照

入门

通过NPM或CDN获取CAX：

npm i cax

https://unpkg.com/cax@latest/dist/cax.min.js
https://unpkg.com/cax@latest/dist/cax.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 ( )
  }
} )

内置对象

团体

对于分组，组也可以嵌套组，而父容器的属性将被叠加在儿童属性上，例如：

组的x为100，组中的位图x为200，而呈现到阶段的位图的x为300。
组的alpha为0.7，组中位图的alpha为0.6，呈现到阶段的位图的alpha为0.42。

 const group = new cax . Group ( )
const rect = new cax . Rect ( 100 , 100 , {
  fillStyle : 'black'
} )
group . add ( rect )
stage . add ( group )
stage . update ( )

组具有常用的add和remove方法来添加和删除元素。第一个添加将首先绘制，然后所有后续添加将覆盖在顶部添加。

组方法

添加

将孩子添加到小组

 groupObj . add ( child )

消除

从小组中删除孩子

 groupObj . remove ( child )

空的

从小组中删除所有孩子

 groupObj . empty ( )

代替

用另一个OBJ代替孩子

 groupObj . replace ( current , prev )

阶段

阶段是从组继承的最大顶部容器，因此组的所有方法和道具也是。

阶段方法

更新

在舞台上看不到任何元素。您必须执行更新方法。

 stage . update ( )

任何元素属性都会修改。请执行stage.update（）更新舞台，或将其放入计时器中。

 cax . tick ( stage . update . bind ( stage ) )

scaleeventpoint

当画布的高度和画布的像素不是一对一时，事件触发位置不准确，您可以使用scaleeventpoint方法使事件正确。

 //The width of the canvas is half the canvas pixel
stage . scaleEventPoint ( 0.5 , 0.5 )

示例：https：//github.com/dntzhang/cax/blob/master/packages/cax/cax/examples/pie/main.js#l218-l220

舞台道具

残疾人able缩

禁用鼠标或触摸移动设备的事件检测。网络中的默认值是错误的。您可以更改它：

 stage . disableMoveDetection = true

MoveTection Interval

通过MoveTection Interval设置触摸机和MOUSEMOVE检测间隔。

 //check twice in one second
stage . moveDetectionInterval = 500

位图

 const bitmap = new cax . Bitmap ( img )
stage . add ( bitmap )
stage . update ( )

如果仅传输URL而不是图像对象的实例，则需要执行此操作：

 const bitmap = new cax . Bitmap ( './wepay.png' , ( ) => {
  stage . update ( )
} )
stage . add ( bitmap )

位图式

矩形

您可以设置图片剪辑显示区域和其他转换属性：

 bitmap . rect = [ 0 , 0 , 170 , 140 ]
bitmap . x = 200
bitmap . rotation = 30

精灵

序列框架动画组件可以将任何图片的任何区域组合为一系列动画。

 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 ]
    ] ,
    animations : {
        walk : {
            frames : [ 0 , 1 ]
        } ,
        happy : {
            frames : [ 5 , 6 , 7 , 8 , 9 ]
        } ,
        win : {
            frames : [ 12 ]
        }
    } ,
    playOnce : false ,
    currentAnimation : "walk" ,
    animationEnd : function ( ) {

    }
} ) ;

精灵方法

Gotoandplay

跳到当前的AnimationName并开始播放

 spriteObj . gotoAndPlay ( animationName )

gotoandstop

跳到当前的AnimationName并停止

 spriteObj . gotoAndStop ( animationName )

gotoandplayonce

跳到当前的AnimationName并开始播放，然后在动画后摧毁自己。经常用于爆炸

 spriteObj . gotoAndPlayOnce ( animationName )

文本

文本对象

 const text = new cax . Text ( 'Hello World' , {
  font : '20px Arial' ,
  color : '#ff7700' ,
  baseline : 'top'
} )

方法

getwidth

获取文本宽度

 textObj . getWidth ( )

图形

图形对象用于以基本的链接方式绘制用画布指令绘制图形。

 const graphics = new cax . Graphics ( )
graphics
    . beginPath ( )
    . arc ( 0 , 0 , 10 , 0 , Math . PI * 2 )
    . closePath ( )
    . fillStyle ( '#f4862c' )
    . fill ( )
    . strokeStyle ( 'black' )
    . stroke ( )

graphics . x = 100
graphics . y = 200

stage . add ( graphics )

特别是，如果您在循环中执行图形连接渲染操作，请确保添加clear（）方法，否则路径将被超载到浏览器：

 cax . setInterval ( function ( ) {
  graphics
    . clear ( )
    . beginPath ( )
    . arc ( 0 , 0 , 10 , 0 , Math . PI * 2 )
    . stroke ( )
} , 16 )

形状

与图形不同，形状通常具有有限的宽度高度，因此可以使用屏幕外画布进行缓冲。以下是形状。

矩形

 const rect = new cax . Rect ( 200 , 100 , {
  fillStyle : 'black'
} )

圆圈

 const circle = new cax . Circle ( 10 )

椭圆

 const ellipse = new cax . Ellipse ( 120 , 20 )

元素

元素是多个元素的组合，例如位图，组，文本，形状和其他混合图像。

按钮

 const button = new cax . Button ( {
  width : 100 ,
  height : 40 ,
  text : "Click Me!"
} )

财产

转换

姓名	描述
x	水平偏移
y	垂直偏移
Scalex	水平缩放
比例	垂直缩放
规模	水平和垂直缩放
旋转	旋转
skewx	skewx
偏斜	偏斜
Originx	旋转基点x
起源	旋转基点y

阿尔法

姓名	描述
阿尔法	元素的透明度

请注意，父子已经建立了alpha来进行乘法堆叠。

复合操作

姓名	描述
复合操作	从源图像到目标图像的叠加模式

请注意，如果您没有查找复合操作的定义，请找到最近的复合操作的父容器作为其自身的复合操作。

光标

姓名	描述
光标	小鼠的形状

固定的

姓名	描述
固定的	无论是否固定，默认值是错误的，并且设置为true都不会覆盖祖先的转换。

阴影

姓名	描述
阴影	阴影

用法：

 obj . shadow = {
    color : '#42B035' ,
    offsetX : - 5 ,
    offsetY : 5 ,
    blur : 10
}

阶段

姓名	描述
阶段	获得根阶段

用法：

 obj . stage

方法

破坏

摧毁自我

 obj . destroy ( )

事件

姓名	描述
点击	单击元素上的时间触发器
穆斯敦	按下鼠标按钮在元素上按下时触发
莫斯莫夫	当鼠标指针移至元素时触发
MouseUp	当鼠标按钮在元素上释放时触发
鼠标	当鼠标指针移至元素时触发
鼠标	鼠标指针从元素移出时触发
轻敲	离开手指，立即离开
触摸start	手指触摸动作的开始
TouchMove	触摸后移动手指
触摸	手指触摸动作的结尾
拖	拖放

 const handler = ( ) => { }
obj . on ( 'click' , handler )

//unbind
obj . off ( 'click' , handler )

运动

Cax具有连续的方式编写运动效果的能力。

 const easing = cax . To . easing . elasticInOut

cax . To . get ( bitmap )
    . to ( { y : 340 , rotation : 240 } , 2000 , easing )
    . begin ( ( ) => {
        console . log ( "Task one has began!" )
    } )
    . progress ( ( ) => {
        console . log ( "Task one is progressing!" )
    } )
    . end ( ( ) => {
        console . log ( "Task one has completed!" )
    } )
    . wait ( 500 )
    . to ( )
    . rotation ( 0 , 1400 , easing )
    . begin ( ( ) => {
        console . log ( "Task two has began!" )
    } )
    . progress ( ( ) => {
        console . log ( "Task two is progressing!" )
    } )
    . end ( ( ) => {
        console . log ( "Task two has completed!" )
    } )
    . start ( ) ;

to和to
to和wait是连续的
to和to之间的串行是串行的to to

如果需要循环运动，则可以使用cycle方法：

 cax . To . get ( bitmap )
    . to ( )
    . y ( 340 , 2000 , cax . easing . elasticInOut )
    . to
    . y ( 0 , 2000 , cax . easing . elasticInOut )
    . cycle ( )
    . start ( )

→运动演示
→TO2TO包装
→cax.to.easing

重要的是要注意，与Tween.js不同，Cax使用骆驼。例如，Cubic.in成为立方体。

夹子

 const stage = new cax . Stage ( 600 , 400 , 'body' )
const bitmap = new cax . Bitmap ( './wepay-diy.jpg' , ( ) => {
    stage . update ( )
} )
const clipPath = new cax . Graphics ( )
clipPath . arc ( 40 , 40 , 25 , 0 , Math . PI * 2 )
bitmap . clip ( clipPath )
stage . add ( bitmap )

您可以通过打击代码获得相同的效果：

 const clipPath = new cax . Graphics ( )
clipPath . x = 40
clipPath . y = 40
clipPath . arc ( 0 , 0 , 25 , 0 , Math . PI * 2 )

因此，您可以发现剪辑图形支持所有转换道具（x，y，scalex，scaley，旋转，skewx，skewy，skewy，oneration，rientx）。

→剪辑演示

自定义对象

自定义形状

自定义形状从cax.shape继承：

 class Sector extends cax . Shape {
  constructor ( r , from , to , option ) {
    super ( )

    this . option = option || { }
    this . r = r
    this . from = from
    this . to = to
  }

  draw ( ) {
    this . beginPath ( )
      . moveTo ( 0 , 0 )
      . arc ( 0 , 0 , this . r , this . from , this . to )
      . closePath ( )
      . fillStyle ( this . option . fillStyle )
      . fill ( )
      . strokeStyle ( this . option . strokeStyle )
      . lineWidth ( this . option . lineWidth )
      . stroke ( )
  }
}

使用形状：

 const sector = new Sector ( 10 , 0 , Math . PI / 6 , {
  fillStyle : 'red'
  lineWidth : 2
} )
stage . add ( sector )
stage . update ( )

自定义元素

自定义元素从cax.group继承：

 class Button extends cax . Group {
  constructor ( option ) {
    super ( )
    this . width = option . width
    this . roundedRect = new  cax . RoundedRect ( option . width , option . height , option . r )
    this . text = new cax . Text ( option . text , {
      font : option . font ,
      color : option . color
    } )

    this . text . x = option . width / 2 - this . text . getWidth ( ) / 2 * this . text . scaleX
    this . text . y = option . height / 2 - 10 + 5 * this . text . scaleY
    this . add ( this . roundedRect , this . text )
  }
}

export default Button

使用按钮：

 const button = new cax . Button ( {
  width : 100 ,
  height : 40 ,
  text : "Click Me!"
} )

通常，建议从略有复杂的组合继承群体，这有利于内部组件的扩展和管理。

微信游戏演示

你在画什么

点十消除

执照

麻省理工学院

展开