APL VectorGraphic



APL VectorGraphic

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

プロパティ

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

プロパティ 型 デフォルト スタイル設定 動的 説明
align 配置 center ◯ ✕ コンポーネント内のベクターグラフィックの配置です。
scale スケール none ◯ ✕ ベクターグラフィックをコンポーネント内で、拡大または縮小する方法です。
source URLまたは名前 <none> ✕ ✕ ベクターグラフィックのURLまたは直接参照です。

これらのプロパティのほかに、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の位置を調整します。次のいずれかに設定します。

名前 説明
bottom 最下部に水平中央揃えで配置します。
bottom-left 左下隅に配置します。
bottom-right 右下隅に配置します。
center 水平方向および垂直方向の中央に配置します。
left 左側に垂直中央揃えで配置します。
right 右側に垂直中央揃えで配置します。
top 最上部に水平中央揃えで配置します。
top-left 左上隅に配置します。
top-right 右上隅に配置します。

scale

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

名前 説明
none グラフィックのサイズは変更されません。バウンディングボックス内での画像の位置を設定するには、alignプロパティを使用します。バウンディングボックスからはみ出たグラフィックは切り捨てられます。
fill グラフィックの幅がバウンディングボックスの幅に、高さがバウンディングボックスの高さに一致するように不均一にサイズを調整します。
best-fill バウンディングボックス内にグラフィック全体が表示されるように、グラフィックのサイズを均一に拡大または縮小します。バウンディングボックス内でのサイズ調整後のグラフィックの位置を設定するには、「align」プロパティを使用します。
best-fit バウンディングボックス内にグラフィック全体が収まるように、グラフィックのサイズを均一に拡大または縮小します。バウンディングボックス内でのサイズ調整後のグラフィックの位置を設定するには、「align」プロパティを使用します。

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ドキュメントを参照してください。