メインコンテンツまでスキップ
バージョン: 2.0.0-preview

角丸四角形

角の半径を指定して各角の丸さを調整した矩形を描画します。なめらかさ を上げると iOS 風のスクワークル(superellipse)に近づき、より滑らかな角になります。

ライブラリでの場所

「ライブラリ」 → 角丸四角形

プロパティ

幅 (Width)

矩形の幅(ピクセル)。

  • 型: float
  • 既定値: 100
  • アニメーション:
  • 範囲: [0, ∞)

高さ (Height)

矩形の高さ(ピクセル)。

  • 型: float
  • 既定値: 100
  • アニメーション:
  • 範囲: [0, ∞)

角の半径 (CornerRadius)

角ごとの丸めの半径(左上 / 右上 / 右下 / 左下)。

  • 型: CornerRadius
  • 既定値: new(25)
  • アニメーション:
  • 範囲: [0, ∞)

なめらかさ (Smoothing)

0 で通常の円弧、100 でフルスクワークル。

  • 型: float
  • 既定値: 0
  • アニメーション:
  • 範囲: [0, 100]

共通プロパティ

このオブジェクトは シェイプ を継承しているため、基底クラスで宣言された共通プロパティも利用できます。

使い方

ボタン・カード・チップなどに使います。角の半径を別々に設定すれば非対称な丸めが可能で、なめらかさ を高くすると曲線部と直線部の繋がりがより滑らかになります。

ソース

src/Beutl.Engine/Graphics/Shapes/RoundedRectShape.cs