Alexa Vector Graphics形式

Alexa Vector Graphics（AVG）形式でAPLドキュメントのベクターグラフィックを定義します。AVGはScalable Vector Graphics（SVG）のパラメーター化されたサブセットであり、SVGを選択するとグラフィックを複数のオペレーティングシステムに移植できます。AVGで定義されたグラフィックは、VectorGraphicコンポーネントを使用して表示できます。VectorGraphicコンポーネントでは、APLパッケージ、APLドキュメント、URLのいずれかからAVGオブジェクトを読み込むことができます。

AVGオブジェクトプロパティ

以下の表は、AVGオブジェクトのプロパティを示しています。

次の例は、赤で塗りつぶしたひし形のグラフィックを定義します。

{
  "type": "AVG",
  "version": "1.2",
  "height": 100,
  "width": 100,
  "items": {
    "type": "path",
    "fill": "red",
    "stroke": "blue",
    "strokeWidth": 4,
    "pathData": "M 50 0 L 100 50 L 50 100 L 0 50 z"
  }
}

グラフィックを表示するには、ドキュメントにVectorGraphicコンポーネントを配置します。次の例では、ドキュメントのgraphicsプロパティに赤いひし形のグラフィックを追加し、Containerの中央にVectorGraphicコンポーネントを表示します。

data

任意のデータ配列です。データ配列を指定すると、グラフィックはデータ配列の要素ごとに、items配列から1つの項目をインフレートします。データバインディングコンテキストには、dataプロパティ、indexプロパティ、lengthプロパティが追加されます。

height

AVGオブジェクトのデフォルトの高さ（絶対サイズ）です。AVGオブジェクトは、オーバーライドまたはサイズ調整されない限り、この高さで画面上に表示されます。これは絶対ディメンションでなければなりません。

item, items

AVG項目の配列です。配列は描画順です。後の項目が前の項目の上に描画されます。AVG項目にはtypeプロパティがあり、次のいずれかを示します。

• グループ
• パス
• テキスト

whenプロパティがtrueになるitemがインフレートされます。各項目のデータバインディングコンテキストには、indexプロパティとlengthプロパティが追加されます。これが、「子項目の単純な配列」のインフレーションアルゴリズムです。

dataプロパティに値が含まれる場合は、インフレーションアルゴリズムが変わります。data配列の項目ごとに、items配列から、whenプロパティがtrueになる最初の子項目がインフレートされます。データバインディングコンテキストには、dataプロパティ、indexプロパティ、lengthプロパティが追加されます。これが、「データ配列」のインフレーションアルゴリズムです。

lang

AVG全体の言語を設定します。設定すると、APLは、グラフィック内のすべてのAVGテキスト項目に対してfontFamilyの言語固有のバージョンを探します。有効なフォントが見つからない場合、APLはこのプロパティを無視し、指定されたfontFamilyを使用します。設定しない場合、APLは指定のfontFamilyを使用します。

langプロパティにはBCP-47文字列（"ja-JP"など）を設定します。

注： Alexaデバイスには特定の言語のフォントがインストールされていない場合があります。さまざまなデバイスで正常に動作するかどうかエクスペリエンスをテストしてください。

layoutDirection

AVG全体のレイアウト方向を設定します。設定しない場合、デフォルトはLTR（左から右）になります。layoutDirectionは、グラフィック内のAVG Text項目に対してtextAnchorプロパティがどのように機能するかを決定します。

このプロパティは、AVG全体のlayoutDirectionを指定します。注：AVG全体のlayoutDirectionはドキュメントから継承されません。layoutDirectionを指定しない場合、デフォルト値は「LTR」になります。

resources

AVGリソースを参照してください。

parameters

AVGデータを評価する際にデータバインディングコンテキストに追加する、名前付きの値の配列です。各パラメーターは、以下の表のプロパティを持つオブジェクトです。

次のAPLドキュメントでは、colorとstrokeの幅を指定するパラメーターを追加して、円形のベクターグラフィックを定義します。このドキュメントのContainerは、異なるパラメーター設定を使用してグラフィックを3回インフレートします。

名前付きパラメーターが名前しか持たない場合は、便宜上、単一の文字列に短縮して表記できます。

ユーザー定義のパラメーターに加えて、heightとwidthという2つのnumberパラメーターが暗黙的に指定されます。これらはviewportWidthとviewportHeightが調整された値です。たとえば、高さがstartingPixelHeightのベクターグラフィックがコンテナーに配置されていて、新しいサイズであるscaledPixelHeightにスケーリングするように指示されたとします。この場合、内部でバインドされるheightとwidthの値は次の式で取得されます。

function calculateScale( double scale, ScaleType scaleType ) {
  switch (scaleType) {
    case "none":
      return 1.0;
    case "grow":
      return scale > 1.0 ? scale : 1.0;
    case "shrink":
      return scale < 1.0 ? scale : 1.0;
    case "stretch":
      return scale;
  }
}

height = viewportHeight * calculateScale( scaledPixelHeight / startingPixelHeight, scaleTypeHeight );
width = viewportWidth * calculateScale( scaledPixelWidth / startingPixelWidth, scaleTypeWidth );

scaleTypeHeightとscaleTypeWidth

scaleTypeHeightプロパティとscaleTypeWidthプロパティは、サイズ調整時にグラフィックの内部（Viewport）の高さと幅をどのように変更するかを制御します。以下の表に有効なオプションを示します。

例として、縦型のスクロールバーやインジケーターのような「錠剤型」のベクターグラフィックについて考えます。グラフィックのデザインは、上部と下部に丸みのある角を持つ縦長の長方形（塗りつぶしなし）です。ベクターグラフィックの縦方向の拡大縮小に応じて、丸みのある角の形状を維持しながら、中央の縦線を拡大縮小します。このグラフィックを定義する1つのアプローチとして、Viewportを垂直方向に伸縮できるようにし、描画パスに、Viewportの高さに応じてパスの垂直セグメントを描画するパラメーター化された式を挿入する方法があります。次に例を示します。

この例では、左側の画像はViewportを伸縮できない場合の結果を示し、右側の画像はViewportが拡大された場合の結果を示しています。左側の画像では、viewportは100×100単位のviewportで描画され、画面上の100×200 dpの長方形に合うように拡大縮小されます。結果として、歪んだ円が作成されます。右側では、viewportのサイズ調整が拡大縮小に設定されているため、グラフィックは100×200単位のviewportで描画されます。コンテキスト内のheightプロパティは拡大されたViewportの高さにバインドされるため、pathDataは、長さ${height - 100}（つまり100）単位の追加の垂直セグメントを含めて描画されます。

styles

AVGスタイルを参照してください。

type

AVGという文字列に設定されます。

version

このベクターグラフィックで使用するAVG規格のバージョンに設定する文字列です。

AVGの最新バージョンは1.2です。

AVG 1.2は、APL 1.5以降のバージョンでサポートされます。

viewportHeight

AVGオブジェクトの内部で使用される描画座標の高さです。指定しない場合、デフォルトはheightになります。

viewportWidth

AVGオブジェクトの内部で使用される描画座標の幅です。指定しない場合、デフォルトはwidthになります。

width

AVGオブジェクトのデフォルトの幅ディメンションです。AVGオブジェクトは、オーバーライドまたはサイズ調整されない限り、このスペース幅で画面上に表示されます。これは絶対ディメンションでなければなりません。

AVGリソース

AVGグラフィックリソースとは、データバインディングと値の解決によりアクセスできる名前付きエンティティです。AVGリソースの構造は、APL Resourcesと同じです。AVGリソースは、グラフィックが読み込まれるときに評価されます。使用されるデータバインディングのコンテキストは、ドキュメントレベルのリソースが読み込まれるグローバルドキュメントのデータバインディングコンテキストです。リソースは静的であり、変更できません。グラフィックリソースでは、@name構文を使用してドキュメントレベルのリソースを参照できます。

グラフィックリソースブロックのサンプル：

"resources": [
  {
    "color": {
      "accent": "#00CAFF",
      "myBlue": "#66DFFF",
    },
    "number": {
      "lineWidth": 2
    },
    "string": {
      "checkmark": "M0,20 l10,10 l40,-40"
    },
    "pattern": {
      "redCircle": {
        "width": "18",
        "height": "18",
        "item": {
          "type": "path",
          "pathData": "M0,9 a9,9 0 1 1 18,0 a9,9 0 1 1 -18,0",
          "fill: "red"
        }
      }
    }
  },
  {
    "when": "${viewport.width > 1000}",
    "number": {
      "lineWidth": 4
    }
  },
  {
    "when": "${viewport.theme == 'light'}",
    "color": {
      "accent": "#0070BA",
      "myBlue": "@documentDarkBlue"
    }
  }
]

リソースはブロックで定義します。各ブロックは、オプションのwhen句と、型のセットを含むオブジェクトです。リソースの各ブロックのプロパティは以下のとおりです。

リソースブロックは配列順に処理され、前の定義は後の定義で上書きされます。

リソースの定義では、@name構文を使用することで、前のブロックで定義されているリソースを参照できます。

boolean

ブール型リソースは、trueまたはfalseの値です。ブール型以外をブール型リソースに割り当てると、「truthy」ルールによって変換されます。ルールの詳細については、Truthyと強制を参照してください。次に例を示します。

"boolean": {
  "a": true,   // True
  "b": null,   // False
  "c": ""      // False
  "d": 22      // True
}

color

色値は、32ビットのRGBA値の色として格納されています。色に変換される文字列式の記述方法については、データ型を参照してください。一般的な強制ルールについては、色の強制を参照してください。

"colors": {
  "myRed1": "#ff0000ff",    // 通常の赤
  "myRed2": "#ff0000",      // 短縮バージョン（透明度を省略）
  "myRed3": "#f00",         // 超短縮バージョン（R、G、Bの2桁分を1桁で表現）
  "myRed4": "red",          // ビルトインの色名を使用
  "myRed5": "rgb(255,0,0)", // RGB関数
  “myRed6”: 4278190335      // 非推奨：0xff0000ffの16進数
}

easing

イージング関数は、アニメーション化されたプロパティの時間経過による変化を定義するために従来から使用されてきた一価関数です。イージング関数の詳細については、イージング関数を参照してください。

gradient

グラデーションは、AVGグラデーションセクションのルールに従って定義されます。次に例を示します。

"gradient": {
  "redWhite": {
    "type": "linear",
    "colorRange": [ "@myRed1", "white"],
    "inputRange": [ 0, 1 ],
    "angle": 90
  }
}

number

数値リソースは、内部的に倍精度浮動小数点数値として格納されます。数値以外の値が数値に変換される方法については、数値の強制を参照してください。

"numbers": {
  "a": 23,
  "b": "${viewport.width / viewport.height}"
}

pattern

パターンリソースは、パスの塗りつぶしやストロークに使用するAVGグラフィックオブジェクトです。次に例を示します。

"pattern": {
  "CirclePattern": {
    "description": "円の繰り返しパターン",
    "viewportWidth": 20,
    "viewportHeight": 20,
    "width": "25%",
    "height": "25%"
    "items": {
      "type": "path",
      "fill": "red",
      "pathData": "M0,10 a10,10 0 1 1 20,0 a10,10 0 1 1 -20,0"
    }
  }
}

詳細についてはAVGパターンを参照してください。

string

文字列値は文字列として格納されます。その他の型は文字列に変換されます。文字列変換ルールについては、文字列の強制を参照してください。

"strings": {
   "a": null,          // ""
   "b": "",            // ""
   "c": false,         // "false"
   "d": 23,            // "23"
   "e": "${@myRed1}"   // "#ff0000ff" （上記の色の定義による）
}

when

whenがtrueまたは未指定の場合、このリソースブロックは処理され、定義されたAVGリソースに追加されます。whenがfalseの場合、リソースブロックはスキップされます。

AVGグラデーション

グラデーションとは、塗りつぶしやストロークに使用する陰影の付いた色のことです。AVGは、線形と放射のグラデーションをサポートしています。リソースで指定するAVGグラデーションは一定で、実行時に変更されません。fillプロパティまたはstrokeプロパティで直接指定するAVGグラデーションは動的にすることもできます（内部データバインディングプロパティと共に使用した場合）。

次の例は、線形と放射のグラデーションを含むAVGグラフィックを示しています。

{
  "type": "AVG",
  "version": "1.2",
  "width": 358,
  "height": 150,
  "resources": {
    "gradients": {
      "linearGradient": {
        "inputRange": [
          0,
          0.5492504222972973,
          1
        ],
        "colorRange": [
          "#ffffffff",
          "#ff0000ff",
          "#000000ff"
        ],
        "type": "linear",
        "x1": 0.30127709565476446,
        "y1": 0.4259174391256225,
        "x2": 0.7981258206624885,
        "y2": 0.5839892388973439
      },
      "radialGradient": {
        "inputRange": [
          0,
          1
        ],
        "colorRange": [
          "#ffffffff",
          "#ff0000ff"
        ],
        "type": "radial",
        "centerX": 0.6480013075429227,
        "centerY": 0.4348329629565578,
        "radius": 1
      }
    }
  },
  "items": [
    {
      "type": "path",
      "description": "線形の星",
      "fill": "@linearGradient",
      "stroke": "#979797ff",
      "strokeWidth": 1,
      "pathData": "M86.5,120 L38.5955019,144.103326 L47.744447,93.0516628 L8.98889392,56.8966744 L62.547751,49.4483372 L86.5,3 L110.452249,49.4483372 L164.011106,56.8966744 L125.255553,93.0516628 L134.404498,144.103326 L86.5,120 Z"
    },
    {
      "type": "path",
      "description": "放射状の星",
      "fill": "@radialGradient",
      "fillTransform": "translate(0.648001,0.434833) matrix(-0.348987 0.320740 -0.306966 -0.364646 0 0) translate(-0.648001,-0.434833)",
      "stroke": "#979797ff",
      "strokeWidth": 1,
      "pathData": "M261.5,120 L213.595502,144.103326 L222.744447,93.0516628 L183.988894,56.8966744 L237.547751,49.4483372 L261.5,3 L285.452249,49.4483372 L339.011106,56.8966744 L300.255553,93.0516628 L309.404498,144.103326 L261.5,120 Z"
    }
  ]
}

次のAPLドキュメントでは、このグラフィックにgradientStarsという名前を付け、Viewportの中央にグラフィックを表示します。

AVGグラデーションはSVGグラデーション標準のサブセットであり、コンポーネントに使用されるグラデーション定義とは異なります。AVGドキュメントでコンポーネントグラデーションを使用することもできますが、この方法は推奨されません。コンポーネントグラデーションでは、拡大縮小が同じように行われるとは限らず、機能も少ないためです。AVG定義にはAVGグラデーションが推奨されます。

共通プロパティ

すべてのAVGグラデーションには、次の表に示すプロパティがあります。

AVGグラデーションには次の2種類があります。

• Linear
• Radial

type

グラデーションにはtypeを定義する必要があり、"linear"または"radial"に設定する必要があります。

colorRange

各グラデーションの終了点に指定される色です。色は終了点の間で線形補間されます。

inputRange

inputRangeは、グラデーションの終了点の位置を指定します。inputRangeを指定しない場合、最初の色の値がグラデーション終了点0、最後の色の値がグラデーション終了点1となり、その他は0～1の間で均等に分散されます。

指定する場合、inputRangeは（a）colorRangeと同じ数の要素を持ち、（b）[0,1]の範囲の数値が昇順で並んでいる必要があります。最初の値が0より大きい場合、0と最初の色値の間の色範囲は、最初の色値に固定されます。最後の値が1より小さい場合、最後の値と1の間の色範囲は、最後の色値に固定されます。

units

グラデーション位置の座標系を定義します。userSpace座標系は、オブジェクトが描画される座標系に基づいてグラデーションの位置ディメンションを解釈します。これは、SVGのuserSpaceOnUse設定と同じです。boundingBox座標系は、(0,0)の値をパスのバウンディングボックス左上にマッピングし、(1,1)の値をパスのバウンディングボックス右下にマッピングして、グラデーションの位置ディメンションを解釈します。boundingBox値は、SVGのobjectBoundingBox設定と同じです。

Linear

線形グラデーションには共通プロパティのほかにも、次のプロパティがあります。

線形グラデーションの場合、spreadMethodは"pad"に設定され、angleが正しくなるようにx1、x2、y1、y2の値が計算されます。これにより、単位正方形の定義に従って、最初と最後の色がオブジェクトのバウンディング矩形の対角に設定されます。

spreadMethod

線形グラデーションのspreadMethodは、(x1,y1)から(x2,y2)として定義されるボックスの範囲外でグラデーションがどのように繰り返されるかを定義します。

x1/y1/x2/y2

これらの点は、グラデーションボックスの開始点および終了点を定義します。colorRangeの最初の色は、(x1,y1)に描画されます。colorRangeの最後の色は、(x2, y2)に描画されます。色は、色と入力範囲のルールに従って、これら2つの点の間で線形補間されます。

グラデーションに使用される座標系は、unitsプロパティによって定義されます。unitsプロパティがboundingBoxの場合、これらの値は、オブジェクトの周りをストロークまたは塗りつぶしで囲むバウンディング矩形の割合となります。同じグラデーションでも、異なるアスペクト比の図形で使用すると異なる視角で表示されることに注意が必要です。fillTransformとstrokeTransformを使用すると、視角を補正できます。

Radial

放射グラデーションには共通プロパティのほかにも、次のプロパティがあります。

放射グラデーションの場合、centerXとcenterYの値は50%に固定され、radiusの値は70.71%に固定されます。これにより、最初の色はオブジェクトの中心に、最後の色はオブジェクトのバウンディング矩形の隅に設定されます。

centerX/centerY

この点により、放射グラデーションの中心を定義します。この点は、unitsプロパティがboundingBoxの場合はオブジェクトの周りを塗りつぶしまたはストロークで描画するバウンディング矩形の割合で定義され、userSpaceの場合はローカル座標で定義されます。

radius

グラデーションの半径は、オブジェクトの周りを塗りつぶしまたはストロークで描画するバウンディング矩形の幅／高さの割合で定義されます。boundingBox単位を使用して正方形以外のオブジェクトで描画される放射グラデーションは、オブジェクトのアスペクト比を補間するグラデーション変換を適用しない限り、楕円として表示されます。fillTransformとstrokeTransformを使用すると、視角を補正できます。

AVGフィルター

AVGフィルターは、AVG項目によって生成されたグラフィックに対して、その項目が表示される前に効果を適用します。

次のドキュメントでは、redDiamondWithFiltersというグラフィックを定義し、そのグラフィックにDropShadowフィルターを使用してドロップシャドウを追加します。この例では、黒い影を確認できるように、中程度のグレーの背景を使用しています。

フィルターには、適用するフィルターのタイプを指定するtypeプロパティがあります。フィルターは定義順に適用されます。

配列内の最初のフィルターは、親AVG項目（複数可）から描画されるグラフィックを入力として受け取ります。配列内の後続の各フィルターは、前のフィルターの出力結果を入力として受け取ります。そして配列内の最後のフィルターの出力が表示されます。

次の表のフィルターを使用できます。

DropShadow

DropShadowフィルターは、入力グラフィックをコピーし、指定されたシャドウの色でRGB値を置き換えます。ソースグラフィックのアルファチャンネルと影の色が積算されて、シャドウアルファの値が決まります。これによりシャドウグラフィックがぼかされ、指定されたオフセットにより変換されて、元の入力グラフィックの背後にコピーされます。オフセットとぼかしの半径の値は、AVG座標で解釈されます。

生成される影は、AVGオブジェクトのディメンションによってバインドされます。DropShadowフィルターは、すべてのAVG項目と、前に描画されたすべてのAVG項目のフィルター結果の背後に影を描画します。

AVGパターン

AVGパターンは、パラメーター化されていない再利用可能なベクターグラフィック要素です。パスのstrokeプロパティとfillプロパティに適用できます。AVGパターンは、次の表に示すプロパティを持つオブジェクトです。

AVGパターンは、AVG patternリソースで定義する必要があります。AVGパターン内の描画操作は、0,0から、width、heightまでのボックスの描画に適用されます。このバウンディングボックス外の描画操作は切り取られます。

AVGパターンは内部的に、オフスクリーンビットマップに1回レンダリングされた後、path要素またはtext要素を描画するときにビットマップシェーダーとして使用される可能性があります。レンダリング中にパターンが拡大されると、ピクセル化アーティファクトが表示されることがあります。パターンはできるだけ小さく保ち、拡大することは避けてください。

height

パターンの高さを、描画先のパスに応じた座標で表します。幅と高さはどちらも正の数値にする必要があります。そうでない場合、パターンは描画されません。

item, items

AVG項目の配列です。配列は描画順であるため、後の項目が前の項目の上に表示されます。次のような描画項目がすべてサポートされます。

• AVGパス項目
• AVGグループ項目
• AVGテキスト項目

width

パターンの幅を、描画先のパスに応じた座標で表します。幅と高さはどちらも正の数値にする必要があります。そうでない場合、パターンは描画されません。

AVGスタイル

AVG stylesは、単一のベクターグラフィック内にのみ適用されるAPL Stylesです。すべてのAVGプロパティにはスタイルを適用できます。APL Stylesの詳細については、APLスタイルの定義と評価を参照してください。

AVGスタイルの定義では、スタイルの名前、継承元となる1つまたは複数の親スタイルのリスト、条件付きで適用されるプロパティ定義の順序付きリストを指定します。

"styles": {
  "BasicButton: {
    "values": [
      {
        "strokeWidth": 5,
        "stroke": "red",
        "fill": "@StandardFillResource"
      },
      {
        "when": "${state.focused}",
        "stroke": "green",
      },
      {
        "when": "${state.pressed}",
        "stroke": "blue"
      }
    ]
  },
  "FancyButton": {
    "extends": "BasicButton",
    "values": [
      {
        "when": "${state.pressed}",
        "stroke": "@FancyButtonGradient"
      }
    ]
  }
}

各スタイル定義には、次の表に示すプロパティがあります。

extend, extends

extends配列には、このスタイルの継承元となるスタイル名の順序付きリストが含まれます。これらのスタイルは、ローカル定義のAVGスタイルまたはグローバルのAPLスタイルです。extends配列で参照されている2つのスタイルが同じプロパティを定義する場合、リスト内で後にあるスタイルがプロパティ定義をオーバーライドします。

values, values

values配列には、適用するvalueオブジェクトの順序付きリストが含まれます。各valueオブジェクトは、次の形式になります。

{
  "when": EXPRESSION,
  NAME: VALUE,
  NAME: VALUE,
  :
}

whenプロパティはオプションであり、設定されていない場合のデフォルト値はtrueです。定義されたプロパティは、有効なスタイル設定可能プロパティの名前であると見なされます。無効な名前は無視されます。when句のデータバインディングコンテキストには、グラフィック、ドキュメント、インポートされたパッケージのいずれかで以前に使用されたViewport、環境、リソース定義、スタイルが含まれます。

AVG基本項目

AVG基本項目は、一般的なAVG項目プロパティを指定する抽象クラスです。AVG項目の具体的な種類としては、次の3つがあります。

• AVGパス項目
• AVGグループ項目
• AVGテキスト項目

すべてのAVG項目は、次の表にあるプロパティをサポートします。

bind

AVGのbindプロパティは、項目およびその子のデータバインディングコンテキストをローカルのバインド変数で拡張します。バインド変数の詳細については、APLバインド変数を参照してください。

filter、filters

このグループ内のすべての項目の描画に適用される1つ以上のフィルター操作です。フィルターは、項目が表示される前に適用されます。グループフィルターは、グループのすべての項目が描画され、フィルターが適用された後に適用されます。フィルターの詳細については、AVGフィルターを参照してください。

style

この項目に適用する名前付きAVGスタイルです。詳細については、AVGスタイルを参照してください。

type

インフレートする特定の項目の種類を指定します。次のいずれかになります。

• path - AVGパス項目
• group - AVGグループ項目
• text - AVGテキスト項目

typeプロパティは必須です。

when

trueの場合、AVG項目をインフレートします。falseの場合、AVG項目とその子項目をすべて無視します。

AVGパス項目

AVGパス項目では、通常の塗りつぶしと線で表示される形状を1つ以上定義します。AVGパス項目には以下のプロパティがあります。

• すべてのAVG基本項目プロパティ
• 次の表に挙げたパス項目プロパティ

少なくとも、fillまたはstrokeを指定する必要があります。fillとstrokeのどちらも指定されていない場合、グラフィックは描画されません。

fill

パスを塗りつぶすために使用する色、グラデーション、またはパターンです。指定しない場合、塗りつぶしは行われません。

以下は、グラデーションを使って塗りつぶした正方形を作成する例です。

{
  "gradientSquare": {
    "type": "AVG",
    "version": "1.2",
    "height": 100,
    "width": 100,
    "resources": [
      {
        "gradients": {
          "RedWhite": {
            "type": "linear",
            "colorRange": ["red","white"],
            "inputRange": [0,1],
            "angle": 90
          }
        }
      }
    ],
    "items": {
      "type": "path",
      "pathData": "M0,0 L40,0 L40,40 L0,40",
      "fill": "@RedWhite"
    }
  }
}

以下は、繰り返しパターンを使って塗りつぶした正方形を作成する例です。

{
  "patternSquare": {
    "type": "AVG",
    "version": "1.2",
    "height": 100,
    "width": 100,
    "resources": [
      {
        "patterns": {
          "RedCircle": {
            "width": 8,
            "height": 8,
            "items": [
              {
                "type": "path",
                "fill": "red",
                "pathData": "M0,4 a4,4,0,1,1,8,0 a4,4,0,1,1,-8,0"
              }
            ]
          }
        }
      }
    ],
    "items": {
      "type": "path",
      "pathData": "M0,0 L40,0 L40,40 L0,40",
      "fill": "@RedCircle"
    }
  }
}

resourcesとparametersを使えば、これらの定義を1つのAVG定義に統合してから、fillに渡すことができます。

fillOpacity

塗りつぶしに適用する不透明度です。塗りつぶしの色にも不透明度が含まれていることがあります。その場合、最終的な塗りつぶしの不透明度は、fillOpacityと、周囲のグループおよびホスティングコンポーネントのネストされたopacityプロパティの積になります。

fillTransform

塗りつぶしのグラデーションまたはパターンに対して適用するマトリックス変換です。fillTransformは、単色の塗りつぶしに対しては効果を持ちません。変換の構文については、AVGグループ項目セクションのtransformプロパティを参照してください。

pathData

SVGの「d」仕様で定義されている、1つ以上のパスコマンドを含む文字列です。以下の表は、パスのコマンドをまとめたものです。

正式な定義については、SVGの仕様を参照してください。

pathLength

pathLengthにより、ユーザーが定義した単位でパスの全長を指定できます。この値は距離の計算を調整するために使用され、pathLength/（実際のパスの長さ）の比率に基づいてstrokeDashArrayプロパティとstrokeDashOffsetプロパティがスケーリングされます。

ユーザー定義のpathLengthが負の値または0の場合、その値は無視されます。

stroke

パスのストロークに使用する色、グラデーション、またはパターンです。指定しない場合、ストロークは描画されません。

以下は、グラデーションストロークを使った正方形を作成する例です。

"resources": {
  "gradients": {
    "RedWhite": {
      "type": "linear",
      "colorRange": [ "red", "white" ],
      "inputRange": [0, 1],
      "angle": 90
    }
  }
}
...
{
  "type": "path",
  "pathData": "M4,4 l32,0 l0,32 l-32,0",
  "strokeWidth": 4,
  "stroke": "@RedWhite"
}

以下は、パターンストロークを使って正方形を作成する例です。

"resources": {
  "patterns": {
    "RedCircle": {
      "width": 8,
      "height": 8,
      "pathData": "M0,4 a4,4,0,1,1,8,0 a4,4,0,1,1,-8,0",
      "fill": "red"
    }
  }
}
...
{
  "type": "path",
  "pathData": "M4,4 l32,0 l0,32 l-32,0",
  "strokeWidth": 4,
  "fill": "@RedCircle"
}

strokeDashArray

strokeDashArrayは、パスのストロークに使用する破線と空白のパターンを定義する数値の配列です。配列が空の場合、ストロークは1本となります。配列要素の数が奇数の場合、暗黙的に2倍になります。たとえば、配列[1]は[1 1]と解釈され、[1,2,3]は[1,2,3,1,2,3]と解釈されます。配列の奇数インデックスは破線の長さ（Viewport描画単位）、偶数インデックスは空白の長さ（Viewport描画単位）です。正の数値以外を指定すると、未定義の動作となります。

strokeDashArrayはpathLengthの影響を受けます。それぞれの破線と空白の長さは、pathLengthに対して相対的に解釈されます。

strokeDashArrayの個々の要素は、負でない数値であることが必要です。strokeDashArrayの要素の和は正の数値になる必要があります。長さが0の破線の外観は、strokeLineCapの値によって変わります。「butt」の要素は描画されず、「round」の要素は直径がstrokeWidthと等しい円になり、「square」の要素は辺の長さがstrokeWidthと等しい正方形になります。

strokeDashOffset

strokeDashOffsetは、strokeDashArrayの開始点を、Viewport描画単位で指定した数値分、移動します。たとえば、strokeDashArrayが[2 1]の場合にstrokeDashOffsetを2に設定すると、線の描画は空白で始まります。

strokeDashOffsetはpathLengthの影響を受けます。それぞれの破線と空白の長さは、pathLengthに対して相対的に解釈されます。

strokeLineCap

strokeLineCapプロパティは、開いたパスの終端に使用される図形を決定します。

strokeLineJoin

strokeLineJoinプロパティは、パス内の角の描画方法を決定します。

strokeMiterLimit

strokeMiterLimitプロパティは、パス内のmiter結合を、どの時点でbevel結合に変更するかを決定します。

strokeOpacity

線に適用する不透明度です。線の色にも不透明度が含まれていることがあります。その場合、最終的な線の不透明度は、strokeOpacityと全体的なopacityの積になります。

strokeTransform

ストロークのグラデーションまたはパターンに対して適用するマトリックス変化です。strokeTransformは、単色のストロークに対しては効果を持ちません。変換構文については、transformを参照してください。

strokeWidth

線の幅です。デフォルトは1です。線はパスの位置に相対して中央に配置されます。

AVGグループ項目

AVGグループは、その子項目に変換を適用します。AVGグループ項目には、以下のプロパティがあります。

• すべてのAVG基本項目プロパティ
• 次の表に挙げたグループ項目プロパティ

clipPath

クリッピングパスは、描画されないpathDataの線です。代わりに、グループの子が切り抜かれます。切り抜きは、グループの座標内で行われます。

data

任意のデータ配列です。データ配列を指定すると、AVGグラフィックはデータ配列の要素ごとに、items配列から1つの項目をインフレートします。データバインディングコンテキストには、dataプロパティ、indexプロパティ、lengthプロパティが追加されます。

item, items

AVG項目の配列です。配列は描画順であるため、後の項目が前の項目の上に表示されます。AVG項目にはtypeプロパティがあります。項目の種類は次の3つです。

• Path
• Group
• Text

whenプロパティがtrueになるitemがインフレートされます。各項目のデータバインディングコンテキストには、indexプロパティとlengthプロパティが追加されます。これが、「子項目の単純な配列」のインフレーションアルゴリズムです。

dataプロパティに値が含まれる場合は、インフレーションアルゴリズムが変わります。data配列の項目ごとに、items配列から、whenプロパティがtrueになる最初の子項目がインフレートされます。データバインディングコンテキストには、dataプロパティ、indexプロパティ、lengthプロパティが追加されます。これが、「データ配列」のインフレーションアルゴリズムです。

opacity

このグループに適用する全体的な不透明度です。不透明度は、ほかの不透明度の値と掛け合わされます。

transform

グループのコンテンツに適用する変換です。transformプロパティは、SVG構文に従うテキスト文字列です。

transform     ::= ( `rotate` | `scale` | `translate` | `skewX` | `skewY` )*
rotate        ::="rotate" "(" `angle` [ `x` `y` ] ")"
scale         ::="scale" "(" `sx` [ `sy` ] ")"
translate     ::="translate" "(" `x` [ `y` ] ")"
skewX         ::="skewX" "(" `angle` ")"
skewY         ::="skewY" "(" `angle` ")"

数値以外の文字（スペースとコンマを含む）は無視されます。角度は度数で指定します。正の回転値は、グループの起点を中心に時計回りです。座標系は、正のx値が右側、正のy値が下側です。起点は、通常左上にあります。

以下は同等となります。

translate(x)  ⟺ translate(x 0)
scale(s)      ⟺ scale(s s)
rotate(a x y) ⟺ translate(x y) rotate(a) translate(-x -y)

ベクターグラフィックは、transformプロパティでデータバインディング式を使用できます。たとえば、アナログ時計の分針を正しく回転させるには、次のように記述します。

"transform": "rotate(${Time.minutes(localTime)*6})"

代替の変換プロパティ

状況によっては、サイズ調整、回転、移動の段階ごとに変換プロパティを記述する方が簡単な場合があります。代替の変換プロパティは、明示的な一連のプロパティを提供します。transformプロパティが指定されていないときは、これらのプロパティを利用できます。transformに値が含まれていると、これらの代替プロパティは無視されます。

変換は、サイズ調整、回転、移動の順に適用されます。transformプロパティでは、同等の変換を次のように定義できます。

"transform": "translate(tx ty) rotate(rotation px py) scale(sx sy)"

AVGテキスト項目

AVGテキスト項目は、1行のテキストとして表示されます。AVGテキスト項目には以下のプロパティがあります。

• すべてのAVG基本項目プロパティ
• 次の表に挙げたテキスト項目プロパティ

テキスト項目がストロークと塗りつぶしの両方で描画される場合、塗りつぶしがまず描画されて、ストロークがそれに重なって描画されます。

AVGテキスト項目には、AVGパス項目およびTextコンポーネントと同じプロパティが複数あります。

次の例は、明るい背景に赤いテキストを表示するテキスト項目のグラフィックを示しています。

{
  "type": "AVG",
  "version": "1.2",
  "height": 60,
  "width": 150,
  "items": [
    {
      "type": "path",
      "pathData": "M0,0 l150,0 l0,60 l-150,0 Z",
      "fill": "#d8d8d8"
    },
    {
      "type": "text",
      "fill": "red",
      "fontFamily": "amazon-ember, sans-serif",
      "fontSize": 60,
      "text": "Hello",
      "x": 75,
      "y": 50,
      "textAnchor": "middle"
    }
  ]
}

次のAPLドキュメントは、このテキスト項目をViewportの中央に表示します。

fill

fillプロパティの動作は、パス項目のfillプロパティと同じです。

fillOpacity

fillOpacityプロパティの動作は、パス項目のopacityプロパティと同じです。

fillTransform

塗りつぶしのグラデーションまたはパターンに対して適用するマトリックス変換です。fillTransformは、単色の塗りつぶしに対しては効果を持ちません。変換構文については、transformを参照してください。

fontFamily

fontFamilyプロパティの動作は、TextコンポーネントのfontFamilyプロパティと同じです。

fontSize

フォントのサイズです。Viewport単位で表します。デフォルトは40です。

fontStyle

fontStyleプロパティの動作は、TextコンポーネントのfontStyleプロパティと同じです。

fontWeight

fontWeightプロパティの動作は、TextコンポーネントのfontWeightプロパティと同じです。

letterSpacing

文字間に追加するスペースです。負の値を指定できます。デフォルトは0です。文字間隔はViewport単位で指定します。

stroke

strokeプロパティの動作は、パス項目のstrokeプロパティと同じです。

strokeOpacity

strokeOpacityプロパティの動作は、パス項目のstrokeOpacityプロパティと同じです。

strokeTransform

ストロークのグラデーションまたはパターンに対して適用するマトリックス変化です。strokeTransformは、単色のストロークに対しては効果を持ちません。変換構文については、transformを参照してください。

strokeWidth

strokeWidthプロパティの動作は、パス項目のstrokeWidthプロパティと同じです。

text

表示するテキストを指定します。表示されるテキストでは、Textコンポーネントのtextプロパティで使用される書式ルールのサブセットがサポートされます。<br>や<em>などのインラインマークアップ文字列は無視され、表示されません。マークアップ文字は、次の表に示すように文字実体参照で置き換えてください。

数値実体参照は10進数と16進数で表記できます。たとえば、©は©または©と表記できます。

文字列「Copyright &#169; 2018, Simon &amp; Schuster. <br><em>All Rights Reserved</em>」は、1行に表示されます。

Copyright © 2018, Simon & Schuster.All Rights Reserved

textAnchor

始点（x, y）を基準としたテキストの方向。以下の表は、オプションをまとめたものです。

x

テキストのベースラインのx座標です。textAnchorプロパティに従って、この位置がテキストの左端、右端、中央のいずれになります。

y

テキストのベースラインのy座標です。textAnchorプロパティに従って、この位置がテキストの左端、右端、中央のいずれになります。

AVGインフレートアルゴリズム

AVGオブジェクトは、次の手順でインフレートされます。

1. 新しいデータバインディングコンテキストを作成します。
2. 作成したデータバインディングコンテキストに各パラメーターを追加します。パラメーター値は、最初の一致を使用して次の順序で計算されます。
   1. JSONインフレートロジックから渡されます。たとえば、ユーザーはfillを外部から渡すことができます。VectorGraphicを参照してください。
   2. 現在のスタイルから名前別に抽出されます。
   3. デフォルト値がパラメーターに代入されます。
3. データバインディングコンテキストに、AVGオブジェクトの計算されたViewportのwidthとheightが追加されます。scaleTypeHeightとscaleTypeWidthを参照してください。
4. データバインディングを適用して、AVG JSON定義をネストされたグループ、パス、テキストオブジェクトにインフレートします。

関連トピック

• VectorGraphicコンポーネント

最終更新日: 2025 年 10 月 02 日