メインコンテンツまでスキップ
バージョン: 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