※この翻訳ドキュメントはスクリプトによって出力・同期されています。内容が怪しそうな場合はGitHubにissueを追加したり英語の原文の確認をお願いします。
Rectangle クラス¶
このページではRectangleクラスについて説明します。
クラス概要¶
Rectangleクラスは四角のベクターグラフィックスを生成します。
基本的な使い方¶
Rectangleクラスのコンストラクタではx、y、width、heightの引数指定が必要になります。
コンストラクタでは他のfill_colorなどのスタイル設定の各引数も受け付けます。
import apysc as ap
ap.Stage(
background_color=ap.Color("#333"),
stage_width=200,
stage_height=150,
stage_elem_id="stage",
)
rectangle: ap.Rectangle = ap.Rectangle(
x=50,
y=50,
width=100,
height=50,
fill_color=ap.Color("#0af"),
)
ap.save_overall_html(dest_dir_path="rectangle_basic_usage/")
draw_rect インターフェイスに対する特記事項¶
draw_rectインターフェイスを使っても四角のインスタンスを生成することができます。
関連資料:
x属性のインターフェイス例¶
x属性ではX座標の値の更新もしくは取得を行えます:
import apysc as ap
ap.Stage(
background_color=ap.Color("#333"),
stage_width=200,
stage_height=150,
stage_elem_id="stage",
)
rectangle: ap.Rectangle = ap.Rectangle(
x=0,
y=50,
width=50,
height=50,
fill_color=ap.Color("#0af"),
)
rectangle.x = ap.Number(100)
ap.save_overall_html(dest_dir_path="rectangle_x/")
y属性のインターフェイス例¶
y属性ではY座標の値の更新もしくは取得を行えます:
import apysc as ap
ap.Stage(
background_color=ap.Color("#333"),
stage_width=150,
stage_height=200,
stage_elem_id="stage",
)
rectangle: ap.Rectangle = ap.Rectangle(
x=50,
y=0,
width=50,
height=50,
fill_color=ap.Color("#0af"),
)
rectangle.y = ap.Number(100)
ap.save_overall_html(dest_dir_path="rectangle_y/")
width属性のインターフェイス例¶
width属性では幅の値の更新もしくは取得を行えます:
import apysc as ap
ap.Stage(
background_color=ap.Color("#333"),
stage_width=200,
stage_height=150,
stage_elem_id="stage",
)
rectangle: ap.Rectangle = ap.Rectangle(
x=50,
y=50,
width=50,
height=50,
fill_color=ap.Color("#0af"),
)
rectangle.width = ap.Int(100)
ap.save_overall_html(dest_dir_path="rectangle_width/")
height属性のインターフェイス例¶
height属性では高さの値の更新もしくは取得を行えます:
import apysc as ap
ap.Stage(
background_color=ap.Color("#333"),
stage_width=150,
stage_height=200,
stage_elem_id="stage",
)
rectangle: ap.Rectangle = ap.Rectangle(
x=50,
y=50,
width=50,
height=50,
fill_color=ap.Color("#0af"),
)
rectangle.height = ap.Int(100)
ap.save_overall_html(dest_dir_path="rectangle_height/")
ellipse_width属性のインターフェイス例¶
ellipse_width属性では四角の角丸の幅の値の更新もしくは取得を行えます:
import apysc as ap
ap.Stage(
background_color=ap.Color("#333"),
stage_width=150,
stage_height=150,
stage_elem_id="stage",
)
rectangle: ap.Rectangle = ap.Rectangle(
x=50,
y=50,
width=50,
height=50,
fill_color=ap.Color("#0af"),
)
rectangle.ellipse_width = ap.Int(30)
rectangle.ellipse_height = ap.Int(15)
ap.save_overall_html(dest_dir_path="rectangle_ellipse_width/")
ellipse_height属性のインターフェイス例¶
ellipse_height属性では四角の角丸の高さの値の更新もしくは取得を行えます:
import apysc as ap
ap.Stage(
background_color=ap.Color("#333"),
stage_width=150,
stage_height=150,
stage_elem_id="stage",
)
rectangle: ap.Rectangle = ap.Rectangle(
x=50,
y=50,
width=50,
height=50,
fill_color=ap.Color("#0af"),
)
rectangle.ellipse_width = ap.Int(15)
rectangle.ellipse_height = ap.Int(30)
ap.save_overall_html(dest_dir_path="rectangle_ellipse_height/")
fill_color属性のインターフェイス例¶
fill_color属性は塗りの色の値の更新もしくは取得を行えます:
import apysc as ap
ap.Stage(
background_color=ap.Color("#333"),
stage_width=150,
stage_height=150,
stage_elem_id="stage",
)
rectangle: ap.Rectangle = ap.Rectangle(
x=50,
y=50,
width=50,
height=50,
fill_color=ap.Color("#0af"),
)
rectangle.fill_color = ap.Color("#f0a")
ap.save_overall_html(dest_dir_path="rectangle_fill_color/")
fill_alpha属性のインターフェイス例¶
fill_alpha属性は塗りの透明度の値の更新もしくは取得を行えます:
import apysc as ap
ap.Stage(
background_color=ap.Color("#333"),
stage_width=150,
stage_height=150,
stage_elem_id="stage",
)
rectangle: ap.Rectangle = ap.Rectangle(
x=50,
y=50,
width=50,
height=50,
fill_color=ap.Color("#0af"),
)
rectangle.fill_alpha = ap.Number(0.3)
ap.save_overall_html(dest_dir_path="rectangle_fill_alpha/")
line_color属性のインターフェイス例¶
line_color属性では線の色の値の更新もしくは取得を行えます:
import apysc as ap
ap.Stage(
background_color=ap.Color("#333"),
stage_width=150,
stage_height=150,
stage_elem_id="stage",
)
rectangle: ap.Rectangle = ap.Rectangle(
x=50, y=50, width=50, height=50, line_thickness=5
)
rectangle.line_color = ap.Color("#0af")
ap.save_overall_html(dest_dir_path="rectangle_line_color/")
line_alpha属性のインターフェイス例¶
line_alpha属性では線の透明度の値の更新もしくは取得を行えます:
import apysc as ap
ap.Stage(
background_color=ap.Color("#333"),
stage_width=150,
stage_height=150,
stage_elem_id="stage",
)
rectangle: ap.Rectangle = ap.Rectangle(
x=50,
y=50,
width=50,
height=50,
line_color=ap.Color("#0af"),
line_thickness=5,
)
rectangle.line_alpha = ap.Number(0.3)
ap.save_overall_html(dest_dir_path="rectangle_line_alpha/")
line_thickness属性のインターフェイス例¶
line_thickness属性では線の幅の更新もしくは取得を行えます:
import apysc as ap
ap.Stage(
background_color=ap.Color("#333"),
stage_width=150,
stage_height=150,
stage_elem_id="stage",
)
rectangle: ap.Rectangle = ap.Rectangle(
x=50,
y=50,
width=50,
height=50,
line_color=ap.Color("#0af"),
)
rectangle.line_thickness = ap.Int(10)
ap.save_overall_html(dest_dir_path="rectangle_line_thickness/")
line_dot_setting属性のインターフェイス例¶
line_dot_setting属性では点線のスタイル設定の更新もしくは取得を行えます:
import apysc as ap
ap.Stage(
background_color=ap.Color("#333"),
stage_width=150,
stage_height=150,
stage_elem_id="stage",
)
rectangle: ap.Rectangle = ap.Rectangle(
x=50,
y=50,
width=50,
height=50,
line_color=ap.Color("#0af"),
line_thickness=5,
)
rectangle.line_dot_setting = ap.LineDotSetting(dot_size=3)
ap.save_overall_html(dest_dir_path="rectangle_line_dot_setting/")
line_dash_setting属性のインターフェイス例¶
line_dash_setting属性では破線のスタイル設定の更新もしくは取得を行えます:
import apysc as ap
ap.Stage(
background_color=ap.Color("#333"),
stage_width=150,
stage_height=150,
stage_elem_id="stage",
)
rectangle: ap.Rectangle = ap.Rectangle(
x=50,
y=50,
width=50,
height=50,
line_color=ap.Color("#0af"),
line_thickness=2,
)
rectangle.line_dash_setting = ap.LineDashSetting(dash_size=7, space_size=2)
ap.save_overall_html(dest_dir_path="rectangle_line_dash_setting/")
line_round_dot_setting属性のインターフェイス例¶
line_round_dot_setting属性では丸ドット線のスタイル設定の更新もしくは取得を行えます:
import apysc as ap
ap.Stage(
background_color=ap.Color("#333"),
stage_width=150,
stage_height=150,
stage_elem_id="stage",
)
rectangle: ap.Rectangle = ap.Rectangle(
x=50,
y=50,
width=50,
height=50,
line_color=ap.Color("#0af"),
)
rectangle.line_round_dot_setting = ap.LineRoundDotSetting(round_size=6, space_size=3)
ap.save_overall_html(dest_dir_path="rectangle_line_round_dot_setting/")
line_dash_dot_setting属性のインターフェイス例¶
line_dash_dot_setting属性では一点鎖線のスタイル設定の更新もしくは取得を行えます:
import apysc as ap
ap.Stage(
background_color=ap.Color("#333"),
stage_width=150,
stage_height=150,
stage_elem_id="stage",
)
rectangle: ap.Rectangle = ap.Rectangle(
x=50,
y=50,
width=50,
height=50,
line_color=ap.Color("#0af"),
line_thickness=3,
)
rectangle.line_dash_dot_setting = ap.LineDashDotSetting(
dot_size=3, dash_size=7, space_size=3
)
ap.save_overall_html(dest_dir_path="rectangle_line_dash_dot_setting/")
rotation_around_center属性のインターフェイス例¶
rotation_around_center属性ではインスタンスの中央座標での回転量（0～359）の更新もしくは取得を行えます:
import apysc as ap
ap.Stage(
background_color=ap.Color("#333"),
stage_width=150,
stage_height=150,
stage_elem_id="stage",
)
rectangle: ap.Rectangle = ap.Rectangle(
x=50,
y=50,
width=50,
height=50,
fill_color=ap.Color("#0af"),
)
def on_timer(e: ap.TimerEvent, options: dict) -> None:
"""
The timer event handler.
Parameters
----------
e : ap.TimerEvent
Event instance.
options : dict
Optional arguments dictionary.
"""
rectangle.rotation_around_center += 1
ap.Timer(on_timer, delay=ap.FPS.FPS_60).start()
ap.save_overall_html(dest_dir_path="rectangle_rotation_around_center/")
set_rotation_around_pointとget_rotation_around_pointメソッドのインターフェイス例¶
set_rotation_around_pointメソッドは指定された座標からのインスタンスの回転量（0～359）を更新します。
同様に、get_rotation_around_pointメソッドでは指定された座標のインスタンスの回転量（0～359）を取得します:
import apysc as ap
ap.Stage(
background_color=ap.Color("#333"),
stage_width=150,
stage_height=150,
stage_elem_id="stage",
)
rectangle: ap.Rectangle = ap.Rectangle(
x=50,
y=50,
width=50,
height=50,
fill_color=ap.Color("#0af"),
)
x: ap.Int = ap.Int(100)
y: ap.Int = ap.Int(100)
def on_timer(e: ap.TimerEvent, options: dict) -> None:
"""
The timer event handler.
Parameters
----------
e : ap.TimerEvent
Event instance.
options : dict
Optional arguments dictionary.
"""
rotation: ap.Int = rectangle.get_rotation_around_point(x=x, y=y)
rotation += 1
rectangle.set_rotation_around_point(rotation=rotation, x=x, y=y)
ap.Timer(on_timer, delay=ap.FPS.FPS_60).start()
ap.save_overall_html(dest_dir_path="rectangle_set_rotation_around_point/")
scale_x_from_center属性のインターフェイス例¶
scale_x_from_center属性ではインスタンスの中央座標でのX軸の拡縮値の更新もしくは取得を行えます:
import apysc as ap
ap.Stage(
background_color=ap.Color("#333"),
stage_width=150,
stage_height=150,
stage_elem_id="stage",
)
rectangle: ap.Rectangle = ap.Rectangle(
x=50,
y=50,
width=50,
height=50,
fill_color=ap.Color("#0af"),
)
direction: ap.Int = ap.Int(-1)
def on_timer(e: ap.TimerEvent, options: dict) -> None:
"""
The timer event handler.
Parameters
----------
e : ap.TimerEvent
Event instance.
options : dict
Optional arguments dictionary.
"""
with ap.If(rectangle.scale_x_from_center <= 0.001):
direction.value = 1
with ap.If(rectangle.scale_x_from_center >= 2.0):
direction.value = -1
rectangle.scale_x_from_center += direction * 0.005
ap.Timer(on_timer, delay=ap.FPS.FPS_60).start()
ap.save_overall_html(dest_dir_path="rectangle_scale_x_from_center/")
scale_y_from_center属性のインターフェイス例¶
scale_y_from_center属性ではインスタンスの中央座標でのX軸の拡縮値の更新もしくは取得を行えます:
import apysc as ap
ap.Stage(
background_color=ap.Color("#333"),
stage_width=150,
stage_height=150,
stage_elem_id="stage",
)
rectangle: ap.Rectangle = ap.Rectangle(
x=50,
y=50,
width=50,
height=50,
fill_color=ap.Color("#0af"),
)
direction: ap.Int = ap.Int(-1)
def on_timer(e: ap.TimerEvent, options: dict) -> None:
"""
The timer event handler.
Parameters
----------
e : ap.TimerEvent
Event instance.
options : dict
Optional arguments dictionary.
"""
with ap.If(rectangle.scale_y_from_center <= 0.001):
direction.value = 1
with ap.If(rectangle.scale_y_from_center >= 2.0):
direction.value = -1
rectangle.scale_y_from_center += direction * 0.005
ap.Timer(on_timer, delay=ap.FPS.FPS_60).start()
ap.save_overall_html(dest_dir_path="rectangle_scale_y_from_center/")
set_scale_x_from_pointとget_scale_x_from_pointメソッドのインターフェイス例¶
set_scale_x_from_pointメソッドは指定されたX座標を基準としてX軸の拡縮値を更新します。
同様に、get_scale_x_from_pointメソッドでは指定されたX座標を基準としたX軸の拡縮値を取得します:
import apysc as ap
ap.Stage(
background_color=ap.Color("#333"),
stage_width=150,
stage_height=150,
stage_elem_id="stage",
)
rectangle: ap.Rectangle = ap.Rectangle(
x=50,
y=50,
width=50,
height=50,
fill_color=ap.Color("#0af"),
)
direction: ap.Int = ap.Int(-1)
x: ap.Int = ap.Int(100)
def on_timer(e: ap.TimerEvent, options: dict) -> None:
"""
The timer event handler.
Parameters
----------
e : ap.TimerEvent
Event instance.
options : dict
Optional arguments dictionary.
"""
scale: ap.Number = rectangle.get_scale_x_from_point(x=x)
with ap.If(scale <= 0.001):
direction.value = 1
with ap.If(scale >= 2.0):
direction.value = -1
scale += direction * 0.005
rectangle.set_scale_x_from_point(scale_x=scale, x=x)
ap.Timer(on_timer, delay=ap.FPS.FPS_60).start()
ap.save_overall_html(dest_dir_path="rectangle_scale_x_from_point/")
set_scale_y_from_pointとget_scale_y_from_pointメソッドのインターフェイス例¶
set_scale_y_from_pointメソッドは指定されたY座標を基準としてY軸の拡縮値を更新します。
同様に、get_scale_y_from_pointメソッドでは指定されたY座標を基準としたY軸の拡縮値を取得します。
import apysc as ap
ap.Stage(
background_color=ap.Color("#333"),
stage_width=150,
stage_height=150,
stage_elem_id="stage",
)
rectangle: ap.Rectangle = ap.Rectangle(
x=50,
y=50,
width=50,
height=50,
fill_color=ap.Color("#0af"),
)
direction: ap.Int = ap.Int(-1)
y: ap.Int = ap.Int(100)
def on_timer(e: ap.TimerEvent, options: dict) -> None:
"""
The timer event handler.
Parameters
----------
e : ap.TimerEvent
Event instance.
options : dict
Optional arguments dictionary.
"""
scale: ap.Number = rectangle.get_scale_y_from_point(y=y)
with ap.If(scale <= 0.001):
direction.value = 1
with ap.If(scale >= 2.0):
direction.value = -1
scale += direction * 0.005
rectangle.set_scale_y_from_point(scale_y=scale, y=y)
ap.Timer(on_timer, delay=ap.FPS.FPS_60).start()
ap.save_overall_html(dest_dir_path="rectangle_scale_y_from_point/")
flip_x属性のインターフェイス例¶
flip_x属性ではインスタンスのX軸の反転状況の真偽値の更新もしくは取得を行えます:
import apysc as ap
ap.Stage(
background_color=ap.Color("#333"),
stage_width=150,
stage_height=150,
stage_elem_id="stage",
)
rectangle: ap.Rectangle = ap.Rectangle(
x=50,
y=50,
width=50,
height=50,
fill_color=ap.Color("#0af"),
)
rectangle.rotation_around_center = ap.Int(30)
def on_timer(e: ap.TimerEvent, options: dict) -> None:
"""
The timer event handler.
Parameters
----------
e : ap.TimerEvent
Event instance.
options : dict
Optional arguments dictionary.
"""
rectangle.flip_x = rectangle.flip_x.not_
ap.Timer(on_timer, delay=1000).start()
ap.save_overall_html(dest_dir_path="rectangle_flip_x/")
特記事項: インスタンスの形状によってはこのインターフェイスはX軸とY軸の各インターフェイスで違いが分かりづらいケースが発生します。
flip_y属性のインターフェイス例¶
flip_y属性ではインスタンスのX軸の反転状況の真偽値の更新もしくは取得を行えます:
import apysc as ap
ap.Stage(
background_color=ap.Color("#333"),
stage_width=150,
stage_height=150,
stage_elem_id="stage",
)
rectangle: ap.Rectangle = ap.Rectangle(
x=50,
y=50,
width=50,
height=50,
fill_color=ap.Color("#0af"),
)
rectangle.rotation_around_center = ap.Int(30)
def on_timer(e: ap.TimerEvent, options: dict) -> None:
"""
The timer event handler.
Parameters
----------
e : ap.TimerEvent
Event instance.
options : dict
Optional arguments dictionary.
"""
rectangle.flip_y = rectangle.flip_y.not_
ap.Timer(on_timer, delay=1000).start()
ap.save_overall_html(dest_dir_path="rectangle_flip_y/")
特記事項: インスタンスの形状によってはこのインターフェイスはX軸とY軸の各インターフェイスで違いが分かりづらいケースが発生します。
skew_x属性のインターフェイス例¶
skew_x属性ではインスタンスのX軸の歪みの値の更新もしくは取得を行えます:
import apysc as ap
ap.Stage(
background_color=ap.Color("#333"),
stage_width=150,
stage_height=150,
stage_elem_id="stage",
)
rectangle: ap.Rectangle = ap.Rectangle(
x=50,
y=50,
width=50,
height=50,
fill_color=ap.Color("#0af"),
)
def on_timer(e: ap.TimerEvent, options: dict) -> None:
"""
The timer event handler.
Parameters
----------
e : ap.TimerEvent
Event instance.
options : dict
Optional arguments dictionary.
"""
rectangle.skew_x += 1
ap.Timer(on_timer, delay=ap.FPS.FPS_60).start()
ap.save_overall_html(dest_dir_path="rectangle_skew_x/")
skew_y属性のインターフェイス例¶
skew_y属性ではインスタンスのY軸の歪みの値の更新もしくは取得を行えます:
import apysc as ap
ap.Stage(
background_color=ap.Color("#333"),
stage_width=150,
stage_height=150,
stage_elem_id="stage",
)
rectangle: ap.Rectangle = ap.Rectangle(
x=50,
y=50,
width=50,
height=50,
fill_color=ap.Color("#0af"),
)
def on_timer(e: ap.TimerEvent, options: dict) -> None:
"""
The timer event handler.
Parameters
----------
e : ap.TimerEvent
Event instance.
options : dict
Optional arguments dictionary.
"""
rectangle.skew_y += 1
ap.Timer(on_timer, delay=ap.FPS.FPS_60).start()
ap.save_overall_html(dest_dir_path="rectangle_skew_y/")
Rectangle クラスのコンストラクタのAPI¶
特記事項: このAPIドキュメントはドキュメントビルド用のスクリプトによって自動で生成・同期されています。そのためもしかしたらこの節の内容は前節までの内容と重複している場合があります。
[インターフェイスの構造] __init__(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], ellipse_width: Union[int, apysc._type.int.Int] = 0, ellipse_height: Union[int, apysc._type.int.Int] = 0, fill_color: apysc._color.color.Color = Color(""), fill_alpha: Union[float, apysc._type.number.Number] = 1.0, line_color: apysc._color.color.Color = Color(""), line_alpha: Union[float, apysc._type.number.Number] = 1.0, line_thickness: Union[int, apysc._type.int.Int] = 1, line_cap: Union[apysc._type.string.String, apysc._display.line_caps.LineCaps, NoneType] = None, line_joints: Union[apysc._type.string.String, apysc._display.line_joints.LineJoints, NoneType] = None, line_dot_setting: Union[apysc._display.line_dot_setting.LineDotSetting, NoneType] = None, line_dash_setting: Union[apysc._display.line_dash_setting.LineDashSetting, NoneType] = None, line_round_dot_setting: Union[apysc._display.line_round_dot_setting.LineRoundDotSetting, NoneType] = None, line_dash_dot_setting: Union[apysc._display.line_dash_dot_setting.LineDashDotSetting, NoneType] = None, parent: Union[apysc._display.child_mixin.ChildMixIn, NoneType] = None, variable_name_suffix: str = '') -> None
[インターフェイス概要]
四角のベクターグラフィックスを作成します。
[引数]
x: float or Number描画を開始するX座標。
y: float or Number描画を開始するY座標。
width: Int or int四角の幅。
height: Int or int四角の高さ。
ellipse_width: int or Int楕円の幅。
ellipse_height: int or Int楕円の高さ。
fill_color: Color, default COLORLESS設定する塗りの色。
fill_alpha: float or Number, default 1.0設定する塗りの透明度。
line_color: Color, default COLORLESS設定する線の色。
line_alpha: float or Number, default 1.0設定する線の透明度。
line_thickness: int or Int, default 1設定の線幅。
line_cap: String or LineCaps or None, default None設定する線の端のスタイル設定。
line_joints: String or LineJoints or None, default None設定する線の連結部分のスタイル設定。
line_dot_setting: LineDotSetting or None, default None設定する点線のスタイル設定。
line_dash_setting: LineDashSetting or None, default None設定する破線のスタイル設定。
line_round_dot_setting: LineRoundDotSetting or None, default None設定する丸ドットのスタイル設定。
line_dash_dot_setting: LineDashDotSetting or None, default None設定する一点鎖線のスタイル設定。
parent: ChildMixIn or None, default Noneこのインスタンスを追加する親のインスタンス。もしもNoneが指定された場合、このインスタンスはステージのインスタンスへと追加されます。
variable_name_suffix: str, default “”JavaScript上の変数のサフィックスの設定です。この設定はJavaScriptのデバッグ時に役立つことがあります。
[コードサンプル]
>>> import apysc as ap
>>> stage: ap.Stage = ap.Stage()
>>> rectangle: ap.Rectangle = ap.Rectangle(
... x=50, y=50, width=100, height=100, fill_color=ap.Color("#00aaff")
... )
>>> rectangle.x
Number(50.0)
>>> rectangle.y
Number(50.0)
>>> rectangle.width
Int(100)
>>> rectangle.height
Int(100)
>>> rectangle.fill_color
Color("#00aaff")
