CapDrive
利用ガイド

Circle

利用可能な領域内に完全な円または円弧を描きます。円形の進行状況やメータースケールに適しています。直径は、幅と中心の小さい方の値になります。 startAngle と sweepAngle は表示範囲を制御します。円全体を閉じると背景を塗りつぶすことができます。

例

function main() {
  return (
    <Circle
      width={120}
      height={120}
      background="clear"
      stroke={$env.accent}
      lineWidth={8}
      startAngle={-90}
      sweepAngle={240}
      strokePosition="inside"
    />
  );
}

使い方

  • Circle は短辺を直径にして中央に正円を描きます。160×100 なら直径 100 です。startAngle/sweepAngle は輪郭範囲、transform は完成した描画全体を変えます。
  • 角度は度で 0 が右、90 が下、正 sweep は時計回り。startAngle は 360 周期、sweepAngle は方向を保って −360…360 に制限します。0 は空、±360 は一周。wrap:360 は startAngle 用で sweepAngle には使えません。
  • Ellipse と Arc は幅と高さ全体を楕円境界に使い、同寸法なら円になります。部分円弧は中心と結ばず扇形になりません。background は完全に閉じた一周のみ有効です。

プロパティ

startAngle?number

開始角度（度）。サンプリング時に 360 を法として正規化します。

例0
sweepAngle?number

掃引角度（度）。サンプリング時に -360…360 に制限します。正の値は時計回りです。wrap は使用できません。

例360
background?Paint

完全に閉じた円または楕円の塗りつぶし。部分的な円弧では描画しません。

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

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

例"clear"
lineWidth?number

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

例2
strokePosition?"inside" | "center" | "outside"

完全な円または楕円の輪郭に対する線の位置。デフォルトは inside です。

例"inside"
lineCap?"round" | "butt" | "square"

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

例"round"
dash?number[]

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

例[]
dashPhase?number

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

例0
共通プロパティ
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?CircleAnimation[]

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

例[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

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

組み合わせ例

function main() {
  return (
    <ZStack width={140} height={140}>
      <Circle
        width="fill"
        height="fill"
        background="clear"
        stroke="#88888833"
        lineWidth={10}
      />
      <Circle
        width="fill"
        height="fill"
        background="clear"
        stroke={$env.accent}
        lineWidth={10}
        startAngle={-90}
        sweepAngle={270}
        lineCap="round"
      />
      <Text fontSize={36}>75%</Text>
    </ZStack>
  );
}

アニメーション

アニメーション

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

省略時の動作

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

プロパティ省略時の動作
startAngle0
sweepAngle360
lineWidth2
strokePosition"inside"
backgroundHDR($env.dark ? 'white' : 'black')

Arc

Ellipse

アニメーション

Color / Gradient

RadialLayout

前へ

Ellipse

次のステップ

このページの内容

例使い方プロパティ組み合わせ例アニメーション省略時の動作関連 API