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

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

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

インターフェイス概要

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

基本的な使い方

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

import apysc as ap

ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=200,
    stage_height=150,
    stage_elem_id="stage",
)
sprite: ap.Sprite = ap.Sprite()
sprite.graphics.begin_fill(color=ap.Color("#0af"))
sprite.graphics.draw_rect(x=50, y=50, width=100, height=50)

ap.save_overall_html(dest_dir_path="graphics_draw_rect_basic_usage/")

前述のコードでは横長の四角を描画しています。

特記事項: draw_rectのインターフェイスを呼ぶ前にbegin_fillメソッド（塗りの設定のインターフェイス）を呼んでおく必要があります。もしbegin_fillの呼び出しがされていない場合画面上に四角が表示されません。

import apysc as ap

stage: ap.Stage = ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=200,
    stage_height=150,
    stage_elem_id="stage",
)
sprite: ap.Sprite = ap.Sprite()
sprite.graphics.draw_rect(x=50, y=50, width=100, height=50)

ap.save_overall_html(dest_dir_path="graphics_draw_rect_basic_usage_skipped_begin_fill/")

Rectangle インスタンス

draw_rectインターフェイスはRectangleクラスのインスタンスを変逆します。そのインスタンスに対して各属性の更新やイベントハンドラの登録などを行うことができます。

例えば以下のコードではRectangleのインスタンスに対してクリックのマウスイベントを登録し、on_clickのハンドラ内でX座標を更新しています。

import apysc as ap


def on_click(e: ap.MouseEvent[ap.Rectangle], options: dict) -> None:
    """
    The handler that the rectangle calls when clicked.

    Parameters
    ----------
    e : MouseEvent
        Created event instance.
    options : dict
        Optional arguments.
    """
    rectangle: ap.Rectangle = e.this
    rectangle.x = ap.Int(100)


ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=200,
    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_rect(x=50, y=50, width=50, height=50)
rectangle.click(on_click)

ap.save_overall_html(dest_dir_path="graphics_draw_rect_rectangle/")

四角をクリックしてみると、ハンドラはX座標を100pxの位置に変更します。

draw_rect API

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

[インターフェイスの構造] draw_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], 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

    • 四角の高さ。

  • 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"))
>>> rectangle: ap.Rectangle = sprite.graphics.draw_rect(
...     x=50, y=50, width=50, height=50
... )
>>> rectangle.x
Number(50.0)

>>> rectangle.width
Int(50)

>>> rectangle.fill_color
Color("#00aaff")