cax
1.0.0
英語| 簡體中文
帆布2D渲染引擎
→演示源代碼
通過NPM或CDN獲取CAX：
npm i cax用法：
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 ( )
}
} ) 對於分組，組也可以嵌套組，而父容器的屬性將被疊加在兒童屬性上，例如：
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方法使事件正確。
//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
禁用鼠標或觸摸移動設備的事件檢測。網絡中的默認值是錯誤的。您可以更改它：
stage . disableMoveDetection = true 通過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 ( ) {
}
} ) ; 跳到當前的AnimationName並開始播放
spriteObj . gotoAndPlay ( animationName ) 跳到當前的AnimationName並停止
spriteObj . gotoAndStop ( animationName ) 跳到當前的AnimationName並開始播放，然後在動畫後摧毀自己。經常用於爆炸
spriteObj . gotoAndPlayOnce ( animationName )文本對象
const text = new cax . Text ( 'Hello World' , {
font : '20px Arial' ,
color : '#ff7700' ,
baseline : 'top'
} ) 獲取文本寬度
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和toto和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 ( )重要的是要注意，與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!"
} )通常，建議從略有復雜的組合繼承群體，這有利於內部組件的擴展和管理。
麻省理工學院
