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

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

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

インターフェイス概要

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

基本的な使い方

draw_triangleインターフェイスはx1, y1, x2, y2, x3, y3の各引数の指定を必要とします。

x1とy1の引数は三角形の1つ目の頂点の座標となります。

x2とy2は2つ目の頂点の座標となり、x3とy3は3つ目の頂点の座標となりま。

import apysc as ap

ap.Stage(
    stage_width=150,
    stage_height=150,
    background_color=ap.Color("#333"),
    stage_elem_id="stage",
)
sprite: ap.Sprite = ap.Sprite()
sprite.graphics.begin_fill(color=ap.Color("#0af"))
triangle: ap.Triangle = sprite.graphics.draw_triangle(
    x1=75,
    y1=50,
    x2=50,
    y2=100,
    x3=100,
    y3=100,
)

ap.save_overall_html(dest_dir_path="./graphics_draw_triangle_basic_usage/")

Triangle インスタンス

draw_triangleインターフェイスはTriangleクラスのインスタンスを返却します。

そのインスタンスを使って各種設定を更新したりイベントの設定などを行うことができます。

例えば、以下の例ではTriangleのインスタンスにマウスイベントを設定し、on_clickのハンドラ内でX座標の更新を行っています:

import apysc as ap


def on_click(e: ap.MouseEvent[ap.Triangle], options: dict) -> None:
    """
    The handler for the click event.

    Parameters
    ----------
    e : ap.MouseEvent[ap.Rectangle]
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    triangle: ap.Triangle = e.this
    triangle.x += 2


ap.Stage(
    stage_width=150,
    stage_height=150,
    background_color=ap.Color("#333"),
    stage_elem_id="stage",
)
sprite: ap.Sprite = ap.Sprite()
sprite.graphics.begin_fill(color=ap.Color("#0af"))
triangle: ap.Triangle = sprite.graphics.draw_triangle(
    x1=75,
    y1=50,
    x2=50,
    y2=100,
    x3=100,
    y3=100,
)
triangle.click(handler=on_click)

ap.save_overall_html(dest_dir_path="./graphics_draw_triangle_triangle_instance/")

draw_triangle のAPI

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

[インターフェイスの構造] draw_triangle(self, *, x1: Union[float, apysc._type.number.Number], y1: Union[float, apysc._type.number.Number], x2: Union[float, apysc._type.number.Number], y2: Union[float, apysc._type.number.Number], x3: Union[float, apysc._type.number.Number], y3: Union[float, apysc._type.number.Number], variable_name_suffix: str = '') -> apysc._display.triangle.Triangle

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

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

[引数]

  • x1: Union[float, Number]

    • 1つ目の頂点のX座標。

  • y1: Union[float, Number]

    • 1つ目の頂点のY座標。

  • x2: Union[float, Number]

    • 2つ目の頂点のX座標。

  • y2: Union[float, Number]

    • 2つ目の頂点のY座標。

  • x3: Union[float, Number]

    • 3つ目の頂点のX座標。

  • y3: Union[float, Number]

    • 3つ目の頂点のY座標。

  • variable_name_suffix: str, optional

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

[返却値]

  • triangle: Triangle

    • 生成された三角形のグラフィックスのインスタンス。

[コードサンプル]

>>> import apysc as ap
>>> _ = ap.Stage()
>>> sprite: ap.Sprite = ap.Sprite()
>>> sprite.graphics.begin_fill(color=ap.Color("#0af"), alpha=0.7)
>>> sprite.graphics.line_style(color=ap.Color("#fff"), thickness=5, alpha=0.5)
>>> triangle: ap.Triangle = sprite.graphics.draw_triangle(
...     x1=75,
...     y1=50,
...     x2=25,
...     y2=100,
...     x3=100,
...     y3=100,
... )
>>> triangle.x1
Number(75.0)

>>> triangle.y1 = ap.Number(30)
>>> triangle.y1
Number(30.0)

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

[関連資料]