※この翻訳ドキュメントはスクリプトによって出力・同期されています。内容が怪しそうな場合はGitHubにissueを追加したり英語の原文の確認をお願いします。
apysc ライブラリが現在の実装でできること¶
このページでは apysc ライブパリの現在の実装と機能の概要について説明します。
Pythonを使って書き、それをHTMLへ出力・もしくはJupyter上で利用する¶
apysc ライブラリではフロントエンドをPythonを使って書くことができ、結果をHTMLに出力したりもしくはJupyter notebookやJupyterLab、Google Colaboratory上などで表示することができます。
参考資料:
様々な種類のベクターグラフィックスの描画¶
apysc ライブラリでは四角や円、線などの様々な種類のベクターグラフィックスの描画を行うことができます。
コードブロックを表示:
import apysc as ap
ap.Stage(
stage_width=650,
stage_height=210,
background_color=ap.Color("#333"),
stage_elem_id="stage",
)
sprite: ap.Sprite = ap.Sprite()
sprite.graphics.begin_fill(color=ap.Color("#0af"))
sprite.graphics.draw_rect(x=50, y=50, width=50, height=50)
sprite.graphics.draw_round_rect(
x=150, y=50, width=50, height=50, ellipse_width=12, ellipse_height=12
)
sprite.graphics.draw_circle(x=275, y=75, radius=25)
sprite.graphics.draw_ellipse(x=375, y=75, width=50, height=30)
sprite.graphics.draw_polygon(
points=[
ap.Point2D(x=475, y=50),
ap.Point2D(x=450, y=100),
ap.Point2D(x=500, y=100),
]
)
sprite.graphics.begin_fill(color=ap.COLORLESS)
sprite.graphics.line_style(color=ap.Color("#eee"), thickness=3)
sprite.graphics.move_to(x=550, y=50)
sprite.graphics.line_to(x=600, y=50)
sprite.graphics.line_to(x=550, y=100)
sprite.graphics.line_to(x=600, y=100)
sprite.graphics.draw_line(x_start=50, y_start=130, x_end=600, y_end=130)
sprite.graphics.draw_dotted_line(
x_start=50, y_start=145, x_end=600, y_end=145, dot_size=2
)
sprite.graphics.draw_round_dotted_line(
x_start=53, y_start=160, x_end=600, y_end=160, round_size=6, space_size=6
)
ap.save_overall_html(dest_dir_path="what_apysc_can_do_draw_vector_graphics/")
参考資料:
各種マウスイベントの設定¶
apysc ライブラリではクリックやマウスダウン、マウスオーバー、マウスムーブなどの各種マウスイベントの設定をサポートしています。
クリックイベントの例（以下の四角をクリックしてご確認ください）:
コードブロックを表示:
import apysc as ap
def on_click(e: ap.MouseEvent[ap.Rectangle], options: dict) -> None:
"""
The handler that the rectangle calls when clicked.
Parameters
----------
e : ap.MouseEvent
Event instance.
options : dict
Optional arguments dictionary.
"""
color: ap.Color = e.this.fill_color
condition: ap.Boolean = color == ap.Color("#00aaff")
with ap.If(condition):
e.this.fill_color = ap.Color("#f0a")
with ap.Else():
e.this.fill_color = ap.Color("#0af")
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"))
rectangle: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=50, width=50, height=50)
rectangle.click(on_click)
ap.save_overall_html(dest_dir_path="what_apysc_can_do_mouse_event_click/")
参考資料:
タイマーのインターフェイスとアニメーション¶
タイマーに関係したインターフェイスを利用することができ、それを使ってアニメーションを設定することができます。
コードブロックを表示:
from typing_extensions import TypedDict
import apysc as ap
class _Options(TypedDict):
rectangle: ap.Rectangle
alpha_direction: ap.Int
def on_timer(e: ap.TimerEvent, options: _Options) -> None:
"""
The handler that the timer calls.
Parameters
----------
e : ap.TimerEvent
Event instance.
options : dict
Optional arguments dictionary.
"""
rectangle: ap.Rectangle = options["rectangle"]
alpha_direction: ap.Int = options["alpha_direction"]
current_alpha: ap.Number = rectangle.fill_alpha
condition_1: ap.Boolean = current_alpha < 0.0
condition_2: ap.Boolean = current_alpha > 1.0
with ap.If(condition_1):
alpha_direction.value = 1
with ap.Elif(condition_2):
alpha_direction.value = -1
rectangle.fill_alpha += alpha_direction * 0.03
rectangle.rotation_around_center += 1
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"))
alpha_direction: ap.Int = ap.Int(1)
rectangle: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=50, width=50, height=50)
options: _Options = {"rectangle": rectangle, "alpha_direction": alpha_direction}
timer: ap.Timer = ap.Timer(on_timer, delay=ap.FPS.FPS_60, options=options)
timer.start()
ap.save_overall_html(dest_dir_path="what_apysc_can_do_timer_animation/")
参考資料:
アニメーションのインターフェイスによる各属性のアニメーション¶
各アニメーション（Tween）のインターフェイスを使ってアニメーションをさせることができます。
参考資料:
