ShapeクラスはEクラスを継承して作られています。 必要に応じてEクラスの情報も参照してください。
Shapeクラスは円と矩形の描画のみサポートする、シンプルな図形描画クラスです。 簡単な図形やプログレスバーの表現であれば、Spriteを使うまでもなくこのクラスで表現する事が出来ます。
var shpae = new Shape(100, 100, ShapeStyle.fill, "red", ShapeType.arc); 横幅、縦幅、ShapeStyle、色、ShapeTypeを指定してインスタンスを生成します。 ShapeStyle、色、ShapeTypeの三つは省略出来ます。 ShapeTypeにarcを指定した場合、縦幅の指定は無視されて真円になります。 楕円形のシェイプを作りたい場合、setDrawOptionやTimelineを利用してシェイプの縦横比を変更する必要があります。
style:ShapeStyle;//現在のスタイル。値を変更する際はsetStyleメソッドを利用してください type:ShapeType;//現在の図形の形。値を変更する際は、直接このフィールドの値を書き換えてください static PI_200_PER:number;//計算高速化用。Math.PI * 2と等価
setStyle(style:ShapeStyle) { style:ShapeStyle;//設定するスタイル Shapeのスタイルを変更します。 --- setLineWidth(width:number) { width:number;//線の太さ Shapeの線の幅を変更します。ShapeStyle.strokeの場合に有効です --- getLineWidth() { Shapeの線の幅を取得します。 --- setColor(color:string) { color:string;//Shapeの色 Shapeの色を変更します。引数はCSSと同じ形式で指定します。例えば、"red"であれば赤、"#00ff00"であれば緑です。 --- getColor() { Shapeの現在の色を取得します。 --- draw(area:Area, context:CanvasRenderingContext2D) { --- synchronize(syncObj:any, syncFunc:Function) syncObj:any;//同期対象のオブジェクト syncFunc:Function;//同期対象のコールバック関数 本メソッドを指定する事で、描画前に同期するためのメソッドを指定する事が出来ます。 例えば体力ゲージなどを作成したい場合、Shapeクラスのwidthは常にキャラクターのHPと同一にする必要がありますが、このメソッドを利用する事で手動で同期処理を書く必要がなくなります。 syncFuncで指定するメソッドは、thisにsyncObjで指定した値が、第一引数にこのShapeオブジェクト自体が渡ります。 このため、キャラクターとしてAというインスタンスがおり、そのAのhpというフィールドに連結したい場合、以下のようなメソッドを作成した後、本メソッドの第二引数に指定すれば自動同期処理が行われるようになるでしょう。
function sync_shape(shape) { shape.width = this.hp; }
---