HOME > Learning Place >  ドロー

Draw パッケージの紹介

Draw パッケージがあると、汎用的なグラフィックやアニメーションを描画できるようになります。生成したものは、チャートのクラスなどのインターフェースとともに利用でき、全てのブラウザとモバイルデバイスで動作するグラフィックスを生成できます。このガイドは、Draw パッケージの基本的な考え方を説明します。

Draw コンテナー

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

サーフェース

チャートのパッケージを読み込まずに、シンプルなサーフェースを生成する事ができます。それにより全てのブラウザやデバイスで動作する、アニメートするシンプルなグラフィックスを生成できます。 例えば、それぞれの州がスプライトになっているインタラクティブなアメリカの地図や、各エレメントがスプライトであるインフォグラフィックを作成することができます。 スプライトを使用すると、便利なつインタラクティブ性を持った画像を生成する事ができます。 また、画像は 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 コンテナーにスプライトを追加しました。このスプライトの種類は circle なので、このコードを実行すると、ブラウザに赤い丸が表示されます。

サーフェースの add メソッドを使って、スプライトを追加する事もできます。

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
            });
        }
    }
});

スプライト

スプライトは、サーフェースに描画されるオブジェクトです。サーフェースの getItems() のコレクションの中に追加されます。Ext.draw.sprite.Sprite は抽象クラスで、直接に使用するものではありません。その代わり、下記にリストアップした標準のスプライトのサブクラスを使用して下さい。

スプライトのコンフィグには、次のプロパティがあります。

  • type – (文字列) スプライトの種類。指定できるオプションは、circle, path, rect, text, square。 ‘circle’, ‘path’, ‘rect’, ‘text’, ‘square’.
  • width – (数値) 長方形のスプライトで使用される、長方形の幅。
  • height – (数値) 長方形のスプライトで使用される、長方形の高さ。
  • size – (数値) 正方形のスプライトで使用される、一辺のサイズです。
  • radius – (数値) 円形のスプライトで使われる、円の半径です。
  • x – (数値) x 軸の位置です。
  • y – (数値) y 軸の位置です。
  • path – (配列) パススプライトで使用されます。スプライトのパスは、SVG風のパス記法で記述します。
  • opacity – (数値) スプライトの透明度。
  • fill – (文字列) 塗りつぶす色
  • stroke – (文字列) 線の色
  • stroke-width – (文字列) 線の幅
  • font – (文字列) テキストストライプで使われる、完全なフォント指定です。CSS の font パラメータと同じ記法を使います。
  • text – (文字列) テキストストライプで使われる、テキストそのものです。

これに加えて、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 の属性 (これはオプションです) と、回転の角度を指定する degree 属性があります。例えば。

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 は、スプライトのサイズを動的に変更するために使用されます。スケールには、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()
});

スプライトとのやりとり

さて、スプライトが配置されたサーフェースを作成しましたので、そのスプライトとのやりとりをしてみましょう。サーフェースにスプライトを追加した後に、そのスプライトの参照を取得できます。

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
                }
            });
        }
    }
});

上記のサンプルは、Draw パッケージを使って、スプライトの属性を設定し、その属性をアニメートする方法を示します。

ご覧のように、このパッケージは、私たちが生成するグラフィックスをカバーする、多様な抽象概念を提供してくれます。このクラスの最も面白い点は、特定の形や構造に結びつけられていないことです。また、全ての要素は、属性の設定やアニメーションの生成をサポートします。最も重要なポイントは、これら全てが全てのブラウザやデバイスと互換性があるということです。

Ext JS 5 コンポーネント − 公式ガイド翻訳

Learning Placeトップに戻る

PAGETOP