APL VectorGraphic
VectorGraphic
は、パッケージで定義されている、またはURLから読み込まれたScalable Vector Graphics画像を表示します。グラフィックを定義するには、Alexa Vector Graphic(AVG)形式を使用します。
VectorGraphic
を使用するには、APL 1.1以降が必要です。これよりも古いバージョンのAPLを実行しているデバイスには、別のエクスペリエンスを提供してください。プロパティ
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ドキュメントを参照してください。