cax
1.0.0
英語| 简体中文
Canvas 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 ) ) キャンバスの高さとキャンバスのピクセルが1対1ではない場合、イベントトリガー位置は不正確であり、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
マウスまたはタッチモバイルのイベント検出を無効にします。 Web内のデフォルト値はFalseです。あなたはそれを変更することができます：
stage . disableMoveDetection = true MoreTectionIntervalによってTouchMoveおよび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 ( ) {
}
} ) ; 現在のアニメーション名にジャンプして、再生を開始します
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!"
} ) | 名前 | 説明する |
|---|---|
| x | 水平オフセット |
| y | 垂直オフセット |
| Scalex | 水平スケーリング |
| スケーリ | 垂直スケーリング |
| 規模 | 水平および垂直スケーリング |
| 回転 | 回転 |
| Skewx | Skewx |
| ゆっくり | ゆっくり |
| Originx | 回転ベースポイントx |
| オリジン | 回転ベースポイントy |
| 名前 | 説明する |
|---|---|
| アルファ | 要素の透明度 |
父と息子は、乗算的な積み重ねをするためにアルファを設定したことに注意してください。
| 名前 | 説明する |
|---|---|
| 複合操作 | ソース画像からターゲット画像に描かれた重ね合わせパターン |
合成する複合操作の定義がない場合は、最も近い複合術の親コンテナを独自の複合操作として見つけてください。
| 名前 | 説明する |
|---|---|
| カーソル | マウスの形状 |
| 名前 | 説明する |
|---|---|
| 修理済み | 修正するかどうかにかかわらず、デフォルトはfalseであり、Trueに設定されても、先祖の変換はオーバーレイしません。 |
| 名前 | 説明する |
|---|---|
| 影 | 影 |
使用法：
obj . shadow = {
color : '#42B035' ,
offsetX : - 5 ,
offsetY : 5 ,
blur : 10
}| 名前 | 説明する |
|---|---|
| ステージ | ルートステージを取得します |
使用法：
obj . stage 自己を破壊します
obj . destroy ( ) | 名前 | 説明する |
|---|---|
| クリック | 要素の[時間]トリガーをクリックします |
| ムーズダウン | マウスボタンが要素に押されたときにトリガー |
| Mousemove | マウスポインターが要素に移動するときにトリガーします |
| マウスアップ | マウスボタンが要素で解放されたときにトリガー |
| マウスオーバー | マウスポインターが要素に移動するときにトリガーします |
| マウスアウト | マウスポインターが要素から外に移動したときにトリガー |
| タップします | 指を離れてすぐに離れます |
| TouchStart | 指のタッチアクションの開始 |
| 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 ( )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
