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/examples/pie/main.js#l218-l220
마우스 또는 터치 모바일의 이벤트 감지를 비활성화합니다. 웹의 기본값은 False입니다. 변경할 수 있습니다.
stage . disableMoveDetection = true Touchmove 및 MouseMove Detection Interval을 MizetEctioninterVal로 설정하십시오.
//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 ( ) {
}
} ) ; 현재 애니메이션 이름으로 이동하여 재생을 시작하십시오
spriteObj . gotoAndPlay ( animationName ) 현재 애니메이션 이름으로 이동하여 중지하십시오
spriteObj . gotoAndStop ( 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!"
} ) | 이름 | 설명하다 |
|---|---|
| 엑스 | 수평 오프셋 |
| 와이 | 수직 오프셋 |
| scalex | 수평 스케일링 |
| Scaley | 수직 스케일링 |
| 규모 | 수평 및 수직 스케일링 |
| 회전 | 회전 |
| skewx | skewx |
| 꼬치 | 꼬치 |
| originx | 회전베이스 포인트 x |
| 원래 | 회전베이스 포인트 y |
| 이름 | 설명하다 |
|---|---|
| 알파 | 요소의 투명성 |
아버지와 아들은 곱셈을 쌓기 위해 알파를 설치했습니다.
| 이름 | 설명하다 |
|---|---|
| 합성 | 소스 이미지에서 대상 이미지로 그려진 중첩 패턴 |
조회하기 위해 CompositeOperation의 정의가없는 경우 가장 가까운 CompositeOperation의 상위 컨테이너를 자체 CompositeOperation으로 찾으십시오.
| 이름 | 설명하다 |
|---|---|
| 커서 | 마우스의 모양 |
| 이름 | 설명하다 |
|---|---|
| 결정된 | 고정 여부에 관계없이, 기본값은 거짓이며, True로 설정하면 조상의 변형이 오버레이되지 않습니다. |
| 이름 | 설명하다 |
|---|---|
| 그림자 | 그림자 |
용법:
obj . shadow = {
color : '#42B035' ,
offsetX : - 5 ,
offsetY : 5 ,
blur : 10
}| 이름 | 설명하다 |
|---|---|
| 단계 | 루트 단계를 얻으십시오 |
용법:
obj . stage 자기를 파괴하십시오
obj . destroy ( ) | 이름 | 설명하다 |
|---|---|
| 딸깍 하는 소리 | 요소에서 시간 트리거를 클릭하십시오 |
| 마우스 own | 마우스 버튼을 요소에서 눌렀을 때 트리거 |
| 무질의 | 마우스 포인터가 요소로 이동할 때 트리거됩니다 |
| 마우스 업 | 마우스 버튼이 요소에서 해제 될 때 트리거 |
| 마우스 오버 | 마우스 포인터가 요소로 이동할 때 트리거됩니다 |
| 마우스 아웃 | 마우스 포인터가 요소에서 벗어날 때 트리거 |
| 수도꼭지 | 손가락을 떠나 즉시 그대로 두십시오 |
| 터치 스타트 | 손가락 터치 액션의 시작 |
| 터치 모브 | 터치 후 손가락을 움직입니다 |
| 터치 엔드 | 손가락 터치 액션의 끝 |
| 견인 | 드래그 앤 드롭 |
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는 Camelcase를 사용합니다. 예를 들어, 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, rotation, skewx, skewy, originx, originy)을 지원한다는 것을 알 수 있습니다.
→ 클립 데모
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!"
} )일반적으로, 내부 구성 요소의 확장 및 관리에 도움이되는 약간 복잡한 조합에서 상속 그룹을 상속하는 것이 좋습니다.
MIT
