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

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

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

インターフェイス概要

draw_polygonインターフェイスは多角形のベクターグラフィックスを描画します。このインターフェイスはline_toやmove_toなどのインターフェイスと挙動が少し似ていますが、パスを閉じなくても良いという違いがあります。

基本的な使い方

draw_polygonインターフェイスは各頂点の座標を決めるためのpoints引数を必要とします。

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

# Draw the triangle with the draw_polygon interface.
sprite.graphics.begin_fill(color=ap.Color("#0af"))
sprite.graphics.draw_polygon(
    points=ap.Array(
        [
            ap.Point2D(x=75, y=50),
            ap.Point2D(x=50, y=100),
            ap.Point2D(x=100, y=100),
        ]
    )
)

# Draw the diamond shape with the draw_polygon interface.
sprite.graphics.draw_polygon(
    points=ap.Array(
        [
            ap.Point2D(x=175, y=50),
            ap.Point2D(x=150, y=75),
            ap.Point2D(x=175, y=100),
            ap.Point2D(x=200, y=75),
        ]
    )
)

ap.save_overall_html(dest_dir_path="graphics_draw_polygon_basic_usage/")

line_to と draw_polygon の各インターフェイスの違いについて

塗りの色の設定をした場合draw_polygonとline_to（及びmove_to）のインターフェイスの挙動は少し近くなります。例えば以下のコード例では各インターフェイスでどちらも三角形が描画しています。

draw_polygonインターフェイスでは左側の三角形を描画し、move_toとline_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.begin_fill(color=ap.Color("#0af"))

# Draw the triangle with the draw_polygon interface.
sprite.graphics.draw_polygon(
    points=ap.Array(
        [
            ap.Point2D(x=75, y=50),
            ap.Point2D(x=50, y=100),
            ap.Point2D(x=100, y=100),
        ]
    )
)

# Draw the triangle with the move_to and line_to interfaces.
sprite.graphics.move_to(x=175, 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_draw_polygon_line_to_difference_1/")

一方で、各インターフェイスにはパスを閉じる必要があるかどうかの違いがあります。この違いは線の設定を行った場合には顕著になります。line_toのインターフェイスでは終点の座標から始点の座標へはパスが自動では繋がりません。

import apysc as ap

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

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

# Set the line style to see the difference.
sprite.graphics.line_style(color=ap.Color("#fff"), thickness=3)

# Draw the triangle with the draw_polygon interface.
sprite.graphics.draw_polygon(
    points=ap.Array(
        [
            ap.Point2D(x=75, y=50),
            ap.Point2D(x=50, y=100),
            ap.Point2D(x=100, y=100),
        ]
    )
)

# Draw the triangle with the move_to and line_to interfaces.
sprite.graphics.move_to(x=175, 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_draw_polygon_line_to_difference_2/")

返却値

draw_polygonインターフェイスはPolygonクラスのインスタンスを返却します。そのインスタンスは他のグラフィックス系のインスタンスと同様の基本的なインターフェイスを持っています。加えて、Polygonクラスは頂点を加えるためのappend_line_pointメソッドを持っています。

例えば以下のコード例では座標の追加を行い三角から四角に変換しています。

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

# Draw the triangle.
polygon: ap.Polygon = sprite.graphics.draw_polygon(
    points=ap.Array(
        [
            ap.Point2D(x=75, y=50),
            ap.Point2D(x=50, y=75),
            ap.Point2D(x=75, y=100),
        ]
    )
)

# Append the point and change to the rectangle dynamically.
polygon.append_line_point(x=100, y=75)

ap.save_overall_html(dest_dir_path="graphics_draw_polygon_append_line_point/")

draw_polygon API

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

[インターフェイスの構造] draw_polygon(self, *, points: Union[List[apysc._geom.point2d.Point2D], apysc._type.array.Array[apysc._geom.point2d.Point2D]], variable_name_suffix: str = '') -> '_polyg.Polygon'

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

多角形のベクターグラフィックスを描画します。このインターフェイスはPolylineクラス（move_toやline_toのインターフェイスで作成されます）に似ていますが、このインターフェイスは始点と終点が連結されるという違いがあります。

[引数]

  • points: list of Point2D or Array.

    • 多角形の頂点の各座標。

  • variable_name_suffix: str, default “”

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

[返却値]

  • polygon: Polygon

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

[コードサンプル]

>>> import apysc as ap
>>> stage: ap.Stage = ap.Stage()
>>> sprite: ap.Sprite = ap.Sprite()
>>> sprite.graphics.begin_fill(color=ap.Color("#0af"))
>>> polygon: ap.Polygon = sprite.graphics.draw_polygon(
...     points=[
...         ap.Point2D(x=25, y=0),
...         ap.Point2D(x=0, y=50),
...         ap.Point2D(x=50, y=50),
...     ]
... )
>>> polygon.fill_color
Color("#00aaff")