※この翻訳ドキュメントはスクリプトによって出力・同期されています。内容が怪しそうな場合はGitHubにissueを追加したり英語の原文の確認をお願いします。

Graphics クラスの draw_round_rect インターフェイス

このページではGraphicsクラスのdraw_round_rectメソッドのインターフェイスについて説明します。

インターフェイス概要

draw_round_rectインターフェイスは角丸の四角のベクターグラフィックスを描画します。

基本的な使い方

draw_round_rectインターフェイスはx、y、width、heightなどの各引数を持っています。xとy引数は四角の座標を設定し、widthとheightは四角のサイズを決定します。

このインターフェイスはさらに角丸のサイズを設定するためのellipse_widthとellipse_heightの引数を持っています。

import apysc as ap

ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=350,
    stage_height=150,
    stage_elem_id="stage",
)

sprite: ap.Sprite = ap.Sprite()
sprite.graphics.begin_fill(color=ap.Color("#0af"))

# Set 10-pixel ellipse size and draw the rectangle.
sprite.graphics.draw_round_rect(
    x=50, y=50, width=50, height=50, ellipse_width=10, ellipse_height=10
)

# Set 20-pixel ellipse size and draw the rectangle.
sprite.graphics.draw_round_rect(
    x=150, y=50, width=50, height=50, ellipse_width=20, ellipse_height=20
)

# Set 5-pixel ellipse width and 20-pixel ellipse height and
# draw the rectangle.
sprite.graphics.draw_round_rect(
    x=250, y=50, width=50, height=50, ellipse_width=5, ellipse_height=20
)

ap.save_overall_html(dest_dir_path="graphics_draw_round_rect_basic_usage/")

返却値

draw_round_rectインターフェイスはdraw_rectインターフェイスと同様にRectangleクラスのインスタンスを返却します。

Rectangleクラスのインスタンスは四角の角丸のサイズを変更するためのellipse_widthとellipse_height属性を持っています。

import apysc as ap

ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=150,
    stage_height=150,
    stage_elem_id="stage",
)

sprite: ap.Sprite = ap.Sprite()
sprite.graphics.begin_fill(color=ap.Color("#0af"))

rectangle: ap.Rectangle = sprite.graphics.draw_round_rect(
    x=50, y=50, width=50, height=50, ellipse_width=10, ellipse_height=10
)

# You can update the ellipse_width and ellipse_height
# attributes dynamically.
rectangle.ellipse_width = ap.Int(20)

ap.save_overall_html(dest_dir_path="graphics_draw_round_rect_return_value/")

draw_round_rect API

特記事項: このAPIドキュメントはドキュメントビルド用のスクリプトによって自動で生成・同期されています。そのためもしかしたらこの節の内容は前節までの内容と重複している場合があります。

[インターフェイスの構造] draw_round_rect(self, *, x: Union[float, apysc._type.number.Number], y: Union[float, apysc._type.number.Number], width: Union[int, apysc._type.int.Int], height: Union[int, apysc._type.int.Int], ellipse_width: Union[int, apysc._type.int.Int], ellipse_height: Union[int, apysc._type.int.Int], variable_name_suffix: str = '') -> apysc._display.rectangle.Rectangle

[インターフェイス概要]

角丸四角のベクターグラフィックスを描画します。

[引数]

  • x: float or Number

    • 描画を開始するX座標。

  • y: float or Number

    • 描画を開始するY座標。

  • width: Int or int

    • 四角の幅。

  • height: Int or int

    • 四角の高さ。

  • ellipse_width: Int or int

    • 四角の角丸の幅。

  • ellipse_height: Int or int

    • 四角の角丸の高さ。

  • variable_name_suffix: str, default “”

    • JavaScript上の変数のサフィックスの設定です。この設定はJavaScriptのデバッグ時に役立つことがあります。

[返却値]

  • rectangle: Rectangle

    • 生成された四角。

[コードサンプル]

>>> import apysc as ap
>>> stage: ap.Stage = ap.Stage()
>>> sprite: ap.Sprite = ap.Sprite()
>>> sprite.graphics.begin_fill(color=ap.Color("#0af"))
>>> round_rect: ap.Rectangle = sprite.graphics.draw_round_rect(
...     x=50, y=50, width=50, height=50, ellipse_width=10, ellipse_height=15
... )
>>> round_rect.ellipse_width
Int(10)

>>> round_rect.ellipse_height
Int(15)