Polyline

一連の点を順番に接続してポリラインを描画します。 closed は、最後の点と最初の点を接続して閉じた輪郭を形成し、塗りつぶしを行うことができます。座標には、現在の View 内のポイントの数が使用されます。

例

function main() {
  return (
    <Polyline
      points={[
        { x: 0, y: 80 },
        { x: 60, y: 10 },
        { x: 120, y: 80 },
      ]}
      closed={true}
      background="#30B3A233"
      stroke={$env.accent}
      lineWidth={3}
    />
  );
}

使い方

points を入力順に結び、2 点未満なら描きません。closed=true で末尾と先頭を結び background を有効にします。座標は百分率でなくポイントなので、寸法に応じて計算してください。
contentAnimation は文字、画像、構造データの遷移です。interpolate には Polyline の点数と closed、Path の命令列、グラフ構造の対応が必要です。構造が変われば即時更新します。

プロパティ

pointsReadonlyArray<ViewPoint>

ローカル座標（pt）。点が2つ未満の場合は描画しません。

例[{x: 0, y: 20}, {x: 40, y: 0}, {x: 80, y: 40}]

closed?boolean

最後の点を始点へ結びます。閉じると background で塗りつぶせます。

例false

background?Paint

閉じた折れ線の内部の塗りつぶし。closed が false の場合は描画しません。

例"clear"

stroke?Paint

線の色またはグラデーション。clear で非表示。

例HDR($env.dark ? "white" : "black")

lineWidth?number

線幅（ポイント）。0 で線を描きません。

例2

lineCap?"round" | "butt" | "square"

線端：butt は切断、square は四角く延長、round は丸形。

例"round"

lineJoin?"round" | "miter" | "bevel"

接合部の形：miter、round、bevel。

例"round"

dash?number[]

線と空白の長さを交互に指定（ポイント）。空配列は実線。

例[]

dashPhase?number

破線パターンの位相（ポイント）。

例0

trimStart?number

trimStart～trimEnd の表示区間（0–1）。Circle/Ellipse/Arc は角度を使用。

例0

trimEnd?number

trimStart～trimEnd の表示区間（0–1）。Circle/Ellipse/Arc は角度を使用。

例1

contentAnimation?ContentAnimation

任意のコンテンツ遷移。interpolate は点の数と閉じた状態が同じ場合に使用し、それ以外は即時更新します。

例{type: "interpolate", duration: 0.25}

共通プロパティ

width?number | "auto" | "fill"

幅。ポイント指定、自動サイズ、親領域への拡張に対応します。

例"fill"

height?number | "auto" | "fill"

高さ。ポイント指定、自動サイズ、親領域への拡張に対応します。

例"fill"

x?number

見た目の移動量（ポイント）。x は右、y は下。レイアウトの占有領域は変わりません。

例0

y?number

見た目の移動量（ポイント）。x は右、y は下。レイアウトの占有領域は変わりません。

例0

transform?ViewTransform

レイアウトを変えず全体を変形。移動はポイント、回転・傾きは度、倍率 1 は等倍、基点は 0–1。

例{rotation: 0}

opacity?number

View 全体の不透明度。0 は透明、1 は不透明。

例1

clipped?boolean

View の境界からはみ出す描画を切り抜きます。

例false

clip?"rectangle" | "ellipse"

切り抜き形状は rectangle または ellipse。Material は false で無効化も可能。

例"rectangle"

mask?View | null

アルファマスク用の View。レイアウトに影響せず中央に配置されます。null でマスクを無効にします。

例<Circle width="fill" height="fill" background="white"/>

zIndex?number

兄弟 View の重なり順。大きい値ほど手前。

例0

blur?number

ぼかし半径（ポイント）。0 で無効。

例4

innerShadow?DrawingEffect

効果の色、不透明度、ぼかし半径、x/y オフセット。距離はポイント。

例{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}

glow?DrawingEffect

効果の色、不透明度、ぼかし半径、x/y オフセット。距離はポイント。

例{color: HDR("cyan"), radius: 8, opacity: 0.8}

shadowColor?Color

外側の影の色。

例HDR("black")

shadowOpacity?number

外側の影の不透明度 0–1。0 で非表示。

例0

shadowRadius?number

外側の影のぼかし半径（ポイント）。

例4

shadowX?number

影の移動量（ポイント）。x は右、y は下。

例0

shadowY?number

影の移動量（ポイント）。x は右、y は下。

例2

animations?Animation[]

プロパティ変更のアニメーション。duration/delay は秒、from/to は端点、repeat/autoreverse は反復、wrap は周期。

例[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

兄弟要素間で安定した識別子。

組み合わせ例

function main() {
  return (
    <HStack spacing={12}>
      <Polyline
        width={100}
        height={80}
        points={[
          { x: 0, y: 70 },
          { x: 50, y: 10 },
          { x: 100, y: 70 },
        ]}
        closed={false}
        background="#30B3A244"
        stroke={$env.accent}
      />
      <Polyline
        width={100}
        height={80}
        points={[
          { x: 0, y: 70 },
          { x: 50, y: 10 },
          { x: 100, y: 70 },
        ]}
        closed={true}
        background="#30B3A244"
        stroke={$env.accent}
      />
    </HStack>
  );
}

アニメーション

widthheightxyopacitybackgroundblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtrimStarttrimEnddashPhasestrokelineWidthtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

省略時の動作

表は実装で確認した省略時の動作です。プロパティ例は既定値ではありません。固定結果には明示指定し、環境に依存する寸法やテーマ色を定数と思わないでください。

プロパティ	省略時の動作
`closed`	`false`
`background`	`"clear"`
`lineWidth`	`2`
`trimStart`	`0`
`trimEnd`	`1`
`stroke`	`HDR($env.dark ? 'white' : 'black')`

例

使い方

プロパティ

組み合わせ例

アニメーション

省略時の動作

Path

LineChart

Color / Gradient

このページの内容

Polyline

例

使い方

プロパティ

組み合わせ例

アニメーション

省略時の動作

関連 API

Path

LineChart

Color / Gradient

このページの内容