APL VectorGraphic



VectorGraphicは、パッケージで定義されている、またはURLから読み込まれたScalable Vector Graphics画像を表示します。グラフィックを定義するには、Alexa Vector Graphic（AVG）形式を使用します。

• プロパティ
  • heightおよびwidth
  • AVGオブジェクトパラメーター
  • align
  • scale
  • source
• VectorGraphicがイベントターゲットの場合
• VectorGraphicのサンプル
• 関連トピック

プロパティ

VectorGraphicコンポーネントには、コンポーネントのプロパティのほかに次のプロパティがあります。列の意味については、こちらをご覧ください。

これらのプロパティのほかに、AVGオブジェクトに固有のパラメーターも渡すことができます。

heightおよびwidth

sourceがURLの場合は、コンポーネントでwidthプロパティとheightプロパティを定義する必要があります。定義されていない場合、デフォルトの100ピクセルになります。

sourceがローカルパッケージへの参照またはドキュメントのgraphicsプロパティ内の参照である場合は、コンポーネントのheightとwidthをautoに設定できます。この場合、ベクターグラフィックオブジェクトで定義されたheightとwidthが使用されます。

AVGオブジェクトパラメーター

Alexa Vector Graphic（AVG）オブジェクトはパラメーターを受け取れます。パラメーターを使用すると、色や特定の値（回転など）をグラフィックに渡すことができます。パラメーター値は、VectorGraphicコンポーネント自体の通常のプロパティとして渡されます。たとえば、fillColorをパラメーターとして受け取るグラフィックがある場合、次のようにレンダリングできます。

{
  "type": "VectorGraphic",
  "source": "iconBattery",
  "fillColor": "#ffff00"
}

明示的なプロパティ（上記のfillColorなど）とスタイル設定可能プロパティの両方を渡すことができます。たとえば、disabled状態で色が変わるバッテリーを作成するには、次のスタイルを定義します。

{
  "styles": {
    "batteryStyle": {
      "values": [
        {
          "fillColor": "#ffff00"
        },
        {
          "when": "${state.disabled}",
          "fillColor": "#ff00ff"
        }
      ]
    }
  }
}

次に、このスタイルをVectorGraphicコンポーネントで使用します。

{
  "type": "VectorGraphic",
  "source": "iconBattery",
  "style": "batteryStyle"
}

ベクターグラフィックを定義する形式について詳しくは、 Alexa Vector Graphics形式を参照してください。

align

コンポーネント内のVectorGraphicの位置を調整します。次のいずれかに設定します。

scale

コンポーネント内のベクターグラフィックのサイズを調整します。次のいずれかに設定します。

source

ベクターグラフィックデータの場所を定義します。ソースを次のいずれかに設定します。

• ドキュメントまたは読み込んだパッケージのgraphicsプロパティで定義されている名前
• ベクターグラフィックの定義を指すURL

VectorGraphicがイベントターゲットの場合

VectorGraphicコンポーネントがイベントのターゲットである場合、event.targetは以下の値を報告します。

disabled： コンポーネントが無効な場合はtrueです。id： コンポーネントのIDです。uid： ランタイムで生成されたコンポーネントの固有IDです。height： コンポーネントのdp単位の高さです（パディングを含む）。opacity： コンポーネントの不透明度[0～1]です。source： ベクターグラフィックのURLまたは名前です。width： コンポーネントのdp単位の幅です（パディングを含む）。

{
  "event": {
    "target": {
      "disabled": false,
      "id": "component-id",
      "uid": "Runtime-generated-id",
      "height": 300,
      "opacity": 1,
      "source": "name-of-graphic",
      "width": 300
    }
  }
}

VectorGraphicのサンプル

{
  "type": "VectorGraphic",
  "source": "iconWifi3",
  "width": 100,
  "height": 100,
  "scale": "best-fit"
}

関連トピック

ベクターグラフィック定義をドキュメントのどこに配置するかについて詳しくは、APLドキュメントを参照してください。