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

PathBezier3D クラス¶

このページではPathBezier3Dクラスについて説明します。

クラス概要¶

PathBezier3Dクラスはパス上に3次のベジェ曲線を設定するためのクラスです。

このクラスは2つの制御点を持ちます（比較対象として、2次のベジェ曲線では1つの制御点のみを持ちます）。

主にこの設定はPathクラスのコンストラクタとdraw_pathメソッドのインターフェイスで使用されます。

基本的な使い方¶

PathBezier3Dクラスのコンストラクタではcontrol_x1、control_y1、control_x2、control_y2、dest_x、dest_yの各引数の指定が必要です。

control_x1とcontrol_y1はベジェ曲線の最初の制御点の位置を決定するための座標指定です。

同様に、control_x2とcontrol_y2はベジェ曲線の2番目の制御点の位置を決定するための座標指定です。

dest_xとdest_yはベジェ曲線の終点座標の指定となります。

import apysc as ap

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

path: ap.Path = ap.Path(
    path_data_list=[
        ap.PathMoveTo(x=50, y=200),
        ap.PathBezier3D(
            control_x1=50,
            control_y1=25,
            control_x2=200,
            control_y2=25,
            dest_x=200,
            dest_y=200,
        ),
    ],
    line_color=ap.Color("#0af"),
    line_thickness=5,
)

ap.save_overall_html(dest_dir_path="path_bezier_3d_basic_usage_1/")

以下のコード例では、シアン色の円はベジェ曲線の最初の制御点を示しています。

マゼンタの円ではベジェ曲線の2つ目の制御点を示しています。

また、黄色の円ではベジェ曲線の終点座標を示しています。

import apysc as ap

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

CONTROL_X1: float = 50
CONTROL_Y1: float = 25
CONTROL_X2: float = 200
CONTROL_Y2: float = 25
DEST_X: float = 200
DEST_Y: float = 200

path: ap.Path = ap.Path(
    path_data_list=[
        ap.PathMoveTo(x=50, y=200),
        ap.PathBezier3D(
            control_x1=CONTROL_X1,
            control_y1=CONTROL_Y1,
            control_x2=CONTROL_X2,
            control_y2=CONTROL_Y2,
            dest_x=DEST_X,
            dest_y=DEST_Y,
        ),
    ],
    line_color=ap.Color("#fff"),
    line_thickness=5,
)

RADIUS: int = 10
cyan_circle: ap.Circle = ap.Circle(
    x=CONTROL_X1,
    y=CONTROL_Y1,
    radius=RADIUS,
    fill_color=ap.Color("#0af"),
)

magenta_circle: ap.Circle = ap.Circle(
    x=CONTROL_X2,
    y=CONTROL_Y2,
    radius=RADIUS,
    fill_color=ap.Color("#f0a"),
)

yellow_circle: ap.Circle = ap.Circle(
    x=DEST_X,
    y=DEST_Y,
    radius=RADIUS,
    fill_color=ap.Color("#ff0"),
)

ap.save_overall_html(dest_dir_path="path_bezier_3d_basic_usage_2/")

相対座標設定¶

コンストラクタのrelativeのオプション引数はその挙動を変更します。

例として、もしその引数にTrueを指定した場合座標は相対座標として設定されます。

デフォルト値はFalseとなっており、この設定では絶対座標として扱われます。

基準点は開始位置の座標となります。最初の制御点や2つ目の制御点ではありません。

以下のコード例ではrelativeの設定をしてベジェ曲線を描画しています。

import apysc as ap

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

path: ap.Path = ap.Path(
    path_data_list=[
        ap.PathMoveTo(x=50, y=200),
        ap.PathBezier3D(
            control_x1=0,
            control_y1=-175,
            control_x2=150,
            control_y2=-175,
            dest_x=150,
            dest_y=0,
            relative=True,
        ),
    ],
    line_color=ap.Color("#0af"),
    line_thickness=5,
)

ap.save_overall_html(dest_dir_path="path_bezier_3d_relative/")