Contents Draw コンテナ Drawing Surface Sprites Translate Rotate Scale スプライトの操作

描画パッケージ

描画パッケージを使用することによって、汎用のグラフィックやアニメーションを描画できます。チャート作成クラスやその他のインターフェイスでこれらを使用して、すべてのブラウザやモバイルデバイスで動作するグラフィックを作成できます。本ガイドでは、描画パッケージの基本的な原則について紹介します。

Draw コンテナ

Draw コンテナは、その中にスプライトをレンダリングできるサーフェイスです。Draw コンテナは Surface インスタンスを管理して保持します。ブラウザによっては、このインターフェイスには SVG またはキャンバスの実装が含まれ、スプライトを付加できます。

Drawing Surface

チャートパッケージを全くロードしなくても、簡単なDraw surfaceを作成することができます。そして、すべてのブラウザ/デバイス上で動作し、アニメーションを問題なく実行する、任意のグラフィックスを作成することができます。例えば、それぞれの州がスプライトである米国のインタラクティブマップ、またはそれぞれの要素がスプライトであるインフォグラフィックを作成することができます。スプライトを使用すると、効果的にインタラクティブに画像を作成できます。また、画像は Canvas および SVG ベースなので、サイズ変更や拡大縮小されても品質が劣化しません。これによって、画像は常に「適切に」表示され、いつでも正しく印刷されます。

Draw パッケージを直接使用するためには、Draw コンテナを作成する必要があります。

Ext.create('Ext.draw.Container', {
    sprites: [{
        type: 'circle',
        fillStyle: 'red',
        r: 100,
        cx: 100,
        cy: 100
    }],
    height:205,
    width:205,
    renderTo:Ext.getBody()
});

ここでは、スプライトを Draw コンテナに追加しました。スプライト type は circle なので、このコードを実行したらウィンドウ内に赤い円が表示されます。

サーフェイスの追加メソッドを使用してスプライトを追加することもできます。

Ext.create('Ext.draw.Container', {
    height:205,
    width:205,
    renderTo:Ext.getBody(),
    listeners: {
        afterrender: function(me){
            me.getSurface().add({
                type: 'circle',
                fillStyle: 'red',
                r: 100,
                cx: 100,
                cy: 100
            });
        }
    }
});

Sprites

Sprite は Drawing surface にレンダリングされたオブジェクトです。それらは getItems() コレクションのサーフェイスに追加されます。Ext.draw.sprite.Sprite は抽象クラスで、直接使用することは想定されていません。代わりに、以下に示す標準 Sprite サブクラスを使用します。

Ext.draw.sprite.Path - パスを表すスプライト。
Ext.draw.sprite.Rect - 長方形を表すスプライト。
Ext.draw.sprite.Circle - 円を表すスプライト。
Ext.draw.sprite.Sector - 円グラフのスライスを表すスプライト。
Ext.draw.sprite.Arc - 円弧を表すスプライト。
Ext.draw.sprite.Ellipse - 楕円を表すスプライト。
Ext.draw.sprite.EllipticalArc - 楕円弧を表すスプライト。
Ext.draw.sprite.Text - テキストを表すスプライト。
Ext.draw.sprite.Image - 画像を表すスプライト。
Ext.draw.sprite.Instancing - 指定されたテンプレートに基づく複数のインスタンスを表すスプライト。
Ext.draw.sprite.Composite - スプライトグループを表します。

Spriteの設定は、次のプロパティを持つオブジェクトです。

type - （String）スプライトのタイプです。‘circle’、‘path’、‘rect’、‘text’、‘square’のオプションが選択可能です。
width - （Numbe）矩形のスプライトで使用されます。矩形の幅。
height - （Number）矩形のスプライトで使用されます。矩形の高さ。
size - （Number）正方形のスプライトで使用されます。正方形の寸法。
radius - （Number）円のスプライトで使用されます。円の半径。
x - （Number）x 軸上の位置。
y - （Number）y 軸上の位置。
path - （Array）パスのスプライトで使用されます。 SVG 同様のパス構文で作成されたスプライトのパス。
opacity - （Number）スプライトの透明度。
fill - （String）塗りつぶす色。
stroke - （String）線の色。
stroke-width - （Number）線の幅。
font - （String）テキストタイプのスプライトで使用されます。フォントの完全詳細。CSSフォントパラメータと同じシンタックスを使用します。
text - （String）テキストタイプのスプライトで使用されます。テキストそのものです。

さらに、setAttributes で設定できるトランスフォームオブジェクトが3つあります。これらのトランスフォームオブジェクトは translate、rotate、scale です。

Translate

Translate はスプライトのレンダリング後に配置するために使用できます。この設定オブジェクトには、変換移動の x 属性と y 属性が含まれます。例：

var main = Ext.create('Ext.draw.Container', {
    height:205,
    width:205,
    sprites: [{
        type: 'rect',
        fillStyle: 'red',
        width: 100,
        height:100,
        translate: {
            x:10,
            y:10
        }
    }], 
    renderTo:Ext.getBody()
});

Rotate

Rotate を使用してスプライトを回転させることができます。設定オブジェクトには、回転の中心の x 属性と y 属性（オプション）、および回転度数を指定する degrees 属性が含まれます。例：

var main = Ext.create('Ext.draw.Container', {
    height:205,
    width:205,
    sprites: [{
        type: 'rect',
        fillStyle: 'red',
        width: 100,
        height:100,
        rotate: {
            degrees: 45
        }
    }], 
    renderTo:Ext.getBody()
});

Scale

Scale を使用してスプライトを動的にサイズ変更できます。scaleの場合、コンフィグオブジェクトには、x軸とy軸のスケーリングのxとy属性が指定されます。例:

var main = Ext.create('Ext.draw.Container', {
    height:305,
    width:305,
    sprites: [{
        type: 'rect',
        fillStyle: 'red',
        width: 100,
        height:100,
        scale: {
            x: 3,
            y: 3
        }
    }], 
    renderTo:Ext.getBody()
});

スプライトの操作

スプライトを含む Draw surface を作成したので、どのようにスプライトを操作するか見ていきましょう。スプライトをサーフェイスに追加したら、そのスプライトへの参照を取得できます。

var main = Ext.create('Ext.draw.Container', {
    sprites: [{
        type: 'rect',
        width: 100,
        height: 100,
        fillStyle: 'red'
    }],
    height:205,
    width:205,
    renderTo:Ext.getBody(),
    listeners: {
        afterrender: function(me){
            var surface = me.getSurface(),
                sprite = surface.getItems()[0];

            sprite.setAttributes({
                fillStyle:'black'
            });

            Ext.create('Ext.fx.Anim', {
                target: surface,
                duration: 8000,
                to: {
                    opacity: .5
                }
            });                  
        }
    }
});

上記の例では、sprite 属性を設定し、draw パッケージを使用してこれらの属性をアニメーション化する方法が分かります。

お分かりのように、このパッケージは作成できるグラフィックの多目的な抽象化を提供します。このクラスについての最も興味深いことは、特定の形または構造に縛られないことです。また、すべての要素が属性設定とアニメーション作成をサポートします。最も重要なことは、すべてのブラウザやデバイスと互換性があることです。

Last updated

12月 12, 2014

Ext JS Guides