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

Graphics クラス

このページではGraphicsクラスについて説明します。

Graphics クラスの概要

Graphicsクラスは各ベクターグラフィックスの描画のインターフェイスを扱うクラスです。このインターフェイスには四角の描画や線の描画など様々なインターフェイスが存在します。

SpriteクラスなどのインスタンスはこのGraphicsクラスのインスタンスを内部で生成します。

Sprite のインスタンスを経由した各インターフェイスの呼び出し

Sprite のインスタンスはgraphics属性を持っており、その属性を使用して各描画のインターフェイスを呼び出すことができます。

import apysc as ap

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

sprite: ap.Sprite = ap.Sprite()

# Draw the white border and cyan color rectangle.
sprite.graphics.line_style(color=ap.Color("#fff"), thickness=5)
sprite.graphics.begin_fill(color=ap.Color("#0af"))
sprite.graphics.draw_rect(x=50, y=50, width=50, height=50)

# Draw the magenta color polyline.
sprite.graphics.begin_fill(color=ap.COLORLESS)
sprite.graphics.line_style(color=ap.Color("#f0a"), thickness=5)
sprite.graphics.move_to(x=150, y=50)
sprite.graphics.line_to(x=200, y=50)
sprite.graphics.line_to(x=150, y=100)
sprite.graphics.line_to(x=200, y=100)

# Draw the dashed line.
sprite.graphics.draw_dashed_line(
    x_start=50, y_start=130, x_end=200, y_end=130, dash_size=10, space_size=5
)

ap.save_overall_html(dest_dir_path="graphics_call_interfaces_from_sprite_instance/")

各返却値について

各インターフェイスはRectangleやPolylineクラスなどの生成されたグラフィックスのインスタンスを返却します。これらのインスタンスはxやy、fill_alpha、visibleなどの基本的なDisplayObjectクラスの各属性やメソッドなどを持っています。

例えば以下のコード例のようにこれらのインスタンスに対してイベントを設定して座標の更新処理などを設定することができます:

import apysc as ap

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

sprite: ap.Sprite = ap.Sprite()


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

    Parameters
    ----------
    e : MouseEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    rectangle: ap.Rectangle = e.this

    # Update the coordinates, fill alpha, and fill color.
    rectangle.x = ap.Number(100)
    rectangle.y = ap.Number(100)
    rectangle.fill_alpha = ap.Number(0.5)
    rectangle.fill_color = ap.Color("#f0a")


# drew_rect interface will return Rectangle instance.
sprite.graphics.begin_fill(color=ap.Color("#0af"))
rectangle: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=50, width=50, height=50)

# Bind click event to the rectangle.
rectangle.click(on_rectangle_click)

ap.save_overall_html(dest_dir_path="graphics_return_values/")

もし以下の四角をクリックすると座標値や塗りの色、透明度などの値が更新されます。

関連資料