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

Graphics クラスの move_to と line_to インターフェイス¶

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

各インターフェイスの概要¶

move_toインターフェイスは線の描画の開始位置を設定します。line_toインターフェイスは現在の位置から終点位置に向けて線を描画します。連続してline_toを呼び出すと対象の線は折れ線になります。

もしもline_toインターフェイスを呼んだ後にmove_toインターフェイスを呼んだ場合には新しい線のインスタンスが生成されます。

基本的な使い方¶

move_toとline_toインターフェイスは共にxとyの引数を必要とします。

import apysc as ap

ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=300,
    stage_height=100,
    stage_elem_id="stage",
)
sprite: ap.Sprite = ap.Sprite()

sprite.graphics.line_style(color=ap.Color("#0af"), thickness=5)

# Move to x=50, y=50 point (no drawing).
sprite.graphics.move_to(x=50, y=50)

# Draw the line from the current point (50, 50) to the
# destination point (250, 50).
sprite.graphics.line_to(x=250, y=50)

ap.save_overall_html(dest_dir_path="graphics_move_to_and_line_to_basic_usage/")

line_to インターフェイスの連続した呼び出し¶

line_toインターフェイスを連続して呼び出した場合、結果の線は折れ線になります。

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()

sprite.graphics.line_style(color=ap.Color("#0af"), thickness=5)

# Move to x=50, y=50 point (no drawing).
sprite.graphics.move_to(x=50, y=50)

# Draw the line from the current point (50, 50) to the
# destination point (150, 50).
sprite.graphics.line_to(x=150, y=50)

# Draw the line from the current point (250, 50) to the
# destination point (50, 150). This calling changes the line
# to the polyline.
sprite.graphics.line_to(x=50, y=150)

# Finally the polyline becomes Z shape by drawing to
# destination point (150, 150).
sprite.graphics.line_to(x=150, y=150)

ap.save_overall_html(dest_dir_path="graphics_move_to_and_line_to_sequential_calling/")

line_to インターフェイスを呼び出した後の move_to インターフェイスの呼び出し¶

line_toインターフェイスを呼び出した後にmove_toを呼び出した場合新しい線のインスタンスが生成されます。

import apysc as ap

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

sprite.graphics.line_style(color=ap.Color("#0af"), thickness=5)

# First move_to interface calling.
sprite.graphics.move_to(x=50, y=50)
sprite.graphics.line_to(x=100, y=50)
sprite.graphics.line_to(x=50, y=100)
sprite.graphics.line_to(x=100, y=100)

# Second move_to interface calling. This will create a new
# polyline instance.
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)

ap.save_overall_html(
    dest_dir_path="graphics_move_to_and_line_to_multi_move_to_calling/"
)

Polyline インスタンス¶

move_toやline_toインターフェイスはPolylineクラスのインスタンスを返却します。そのインスタンスを使って各設定を更新したりイベントを設定したりすることができます。

例えば以下のコード例ではPolylineのインスタンスにマウスイベントを設定し、on_line_clickハンドラ内で線の色の更新と点線のスタイルを設定しています。

import apysc as ap


def on_line_click(e: ap.MouseEvent[ap.Polyline], options: dict) -> None:
    """
    The handler that the line instance calls when clicked.

    Parameters
    ----------
    e : MouseEvent
        The event instance.
    options : dict
        Optional arguments.
    """
    polyline: ap.Polyline = e.this
    polyline.line_color = ap.Color("#f0a")
    polyline.line_dot_setting = ap.LineDotSetting(dot_size=5)


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

sprite.graphics.line_style(color=ap.Color("#0af"), thickness=30)
polyline: ap.Polyline = sprite.graphics.move_to(x=50, y=50)
sprite.graphics.line_to(x=150, y=50)
polyline.click(on_line_click)

ap.save_overall_html(dest_dir_path="graphics_move_to_and_line_to_polyline/")

もし以下の四角をクリックし0た場合、線のスタイルは更新されます:

move_to API¶

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

[インターフェイスの構造] move_to(self, *, x: Union[float, apysc._type.number.Number], y: Union[float, apysc._type.number.Number], variable_name_suffix: str = '') -> '_polyline.Polyline'

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

指定された座標に線の描画位置を移動させます。

[引数]

x: float or Number
- 移動先となるX座標。
y: float or Number
- 移動先となるY座標。
variable_name_suffix: str, default “”
- JavaScript上の変数のサフィックスの設定です。この設定はJavaScriptのデバッグ時に役立つことがあります。

[返却値]

line: Polyline
- 線のグラフィックスのインスタンス。

[コードサンプル]

>>> import apysc as ap
>>> stage: ap.Stage = ap.Stage()
>>> sprite: ap.Sprite = ap.Sprite()
>>> sprite.graphics.line_style(color=ap.Color("#fff"), thickness=5)
>>> line_1: ap.Polyline = sprite.graphics.move_to(x=50, y=50)
>>> line_2: ap.Polyline = sprite.graphics.line_to(x=150, y=50)
>>> line_1 == line_2
True

>>> line_1.line_color
Color("#ffffff")

>>> line_1.line_thickness
Int(5)

line_to API¶