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

SvgText クラス¶

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

クラス概要¶

SvgTextクラスはSVGテキストのオブジェクトを生成します。

基本的な使い方¶

SvgTextクラスのコンストラクタはtext引数の指定を必要とします。

コンストラクタではfont_sizeやfont_family、fill_color、boldなどのフォントやスタイルなどの引数を指定することもできます。

import apysc as ap

ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=200,
    stage_height=50,
    stage_elem_id="stage",
)
svg_text: ap.SvgText = ap.SvgText(
    text="Hello, world!",
    x=20,
    y=32,
    fill_color=ap.Color("#aaa"),
)
ap.save_overall_html(dest_dir_path="svg_text_basic_usage/")

テキストのY座標の基準点に対する特記事項¶

テキストのY座標の基準点はテキストの下部付近の位置となります（これはSVGテキストの仕様となります）。

そのためもしもY座標にy=0を指定した場合、テキストのコンテンツがほとんど見えなくなります（以下の例では辛うじてコンマの一部が確認できます）。

import apysc as ap

ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=200,
    stage_height=50,
    stage_elem_id="stage",
)
svg_text: ap.SvgText = ap.SvgText(
    text="Hello, world!",
    x=20,
    y=0,
    fill_color=ap.Color("#aaa"),
)
ap.save_overall_html(dest_dir_path="svg_text_note_on_the_y_baseline/")

text 属性のインターフェイス例¶

text属性ではインスタンスのテキストの更新もしくは取得を行えます。

import apysc as ap

ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=200,
    stage_height=50,
    stage_elem_id="stage",
)
svg_text: ap.SvgText = ap.SvgText(
    text="Hello, world!",
    x=20,
    y=32,
    fill_color=ap.Color("#aaa"),
)
svg_text.text = ap.String("Lorem ipsum")
ap.save_overall_html(dest_dir_path="svg_text_text/")

font_size 属性のインターフェイス例¶

font_size属性ではインスタンスのフォントサイズの更新もしくは取得を行えます。

import apysc as ap

ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=200,
    stage_height=50,
    stage_elem_id="stage",
)
svg_text: ap.SvgText = ap.SvgText(
    text="Hello, world!",
    x=20,
    y=34,
    fill_color=ap.Color("#aaa"),
)
svg_text.font_size = ap.Int(24)
ap.save_overall_html(dest_dir_path="svg_text_font_size/")

font_family 属性のインターフェイス例¶

font_family属性ではインスタンスのフォントファミリー（フォントの指定）の更新もしくは取得を行えます。

この属性は各フォント名のString型の文字列を格納したArray型の配列を必要とします。

import apysc as ap

ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=200,
    stage_height=50,
    stage_elem_id="stage",
)
svg_text: ap.SvgText = ap.SvgText(
    text="Hello, world!",
    x=20,
    y=32,
    fill_color=ap.Color("#aaa"),
)
svg_text.font_family = ap.Array([ap.String("Impact"), ap.String("Times New Roman")])
ap.save_overall_html(dest_dir_path="svg_text_font_family/")

x属性のインターフェイス例¶

x属性ではX座標の値の更新もしくは取得を行えます:

import apysc as ap

ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=200,
    stage_height=50,
    stage_elem_id="stage",
)
svg_text: ap.SvgText = ap.SvgText(
    text="Hello, world!",
    y=32,
    fill_color=ap.Color("#aaa"),
)
svg_text.x = ap.Number(50)
ap.save_overall_html(dest_dir_path="svg_text_x/")

y属性のインターフェイス例¶

y属性ではY座標の値の更新もしくは取得を行えます:

import apysc as ap

ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=200,
    stage_height=70,
    stage_elem_id="stage",
)
svg_text: ap.SvgText = ap.SvgText(
    text="Hello, world!",
    x=20,
    y=32,
    fill_color=ap.Color("#aaa"),
)
svg_text.y = ap.Number(45)
ap.save_overall_html(dest_dir_path="svg_text_y/")

fill_color属性のインターフェイス例¶

fill_color属性は塗りの色の値の更新もしくは取得を行えます:

import apysc as ap

ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=200,
    stage_height=50,
    stage_elem_id="stage",
)
svg_text: ap.SvgText = ap.SvgText(
    text="Hello, world!",
    x=20,
    y=32,
)
svg_text.fill_color = ap.Color("#0af")
ap.save_overall_html(dest_dir_path="svg_text_fill_color/")

fill_alpha属性のインターフェイス例¶

fill_alpha属性は塗りの透明度の値の更新もしくは取得を行えます:

import apysc as ap

ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=200,
    stage_height=50,
    stage_elem_id="stage",
)
svg_text: ap.SvgText = ap.SvgText(
    text="Hello, world!",
    x=20,
    y=32,
    fill_color=ap.Color("#aaa"),
)
svg_text.fill_alpha = ap.Number(0.3)
ap.save_overall_html(dest_dir_path="svg_text_fill_alpha/")

line_color属性のインターフェイス例¶

line_color属性では線の色の値の更新もしくは取得を行えます:

import apysc as ap

ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=200,
    stage_height=50,
    stage_elem_id="stage",
)
svg_text: ap.SvgText = ap.SvgText(
    text="Hello, world!",
    x=20,
    y=34,
    font_size=24,
    bold=True,
    fill_color=ap.COLORLESS,
    line_thickness=1,
)
svg_text.line_color = ap.Color("#0af")
ap.save_overall_html(dest_dir_path="svg_text_line_color/")

line_alpha属性のインターフェイス例¶

line_alpha属性では線の透明度の値の更新もしくは取得を行えます:

import apysc as ap

ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=200,
    stage_height=50,
    stage_elem_id="stage",
)
svg_text: ap.SvgText = ap.SvgText(
    text="Hello, world!",
    x=20,
    y=34,
    font_size=24,
    bold=True,
    fill_color=ap.COLORLESS,
    line_color=ap.Color("#0af"),
    line_thickness=1,
)
svg_text.line_alpha = ap.Number(0.3)
ap.save_overall_html(dest_dir_path="svg_text_line_alpha/")

line_thickness属性のインターフェイス例¶

line_thickness属性では線の幅の更新もしくは取得を行えます:

import apysc as ap

ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=200,
    stage_height=50,
    stage_elem_id="stage",
)
svg_text: ap.SvgText = ap.SvgText(
    text="Hello, world!",
    x=20,
    y=34,
    font_size=24,
    bold=True,
    fill_color=ap.COLORLESS,
    line_color=ap.Color("#0af"),
)
svg_text.line_thickness = ap.Int(3)
ap.save_overall_html(dest_dir_path="svg_text_line_thickness/")

leading 属性のインターフェイス例¶

leading属性ではインスタンスの行間の更新もしくは取得を行えます。

import apysc as ap

ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=500,
    stage_height=120,
    stage_elem_id="stage",
)
svg_text: ap.SvgText = ap.SvgText(
    text="Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
"
    "sed do eiusmod tempor incididunt",
    x=20,
    y=32,
    fill_color=ap.Color("#aaa"),
)
svg_text.leading = ap.Number(2.0)

ap.save_overall_html(dest_dir_path="svg_text_leading/")

align 属性のインターフェイス例¶

align属性ではインスタンスの水平方向の行揃えの設定（左端、中央、右端）の更新もしくは取得を行えます。

この属性はSvgTextAlignのenumの値を必要とします。

import apysc as ap

ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=500,
    stage_height=100,
    stage_elem_id="stage",
)
svg_text: ap.SvgText = ap.SvgText(
    text="Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
"
    "sed do eiusmod tempor incididunt",
    x=250,
    y=32,
    fill_color=ap.Color("#aaa"),
)
svg_text.align = ap.SvgTextAlign.CENTER

ap.save_overall_html(dest_dir_path="svg_text_align/")

特記事項: この属性はX座標の基準位置（x=0の位置）を以下のように変更します:

SvgTextAlign.CENTER: X座標の基準位置はテキストの中央位置になります。
SvgTextAlign.RIGHT: X座標の基準位置はテキストの右端の位置になります。

import apysc as ap

STAGE_WIDTH: int = 500
STAGE_HEIGHT: int = 120
ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=STAGE_WIDTH,
    stage_height=STAGE_HEIGHT,
    stage_elem_id="stage",
)
container_sprite: ap.Sprite = ap.Sprite()
container_sprite.x = ap.Number(STAGE_WIDTH / 2)

vertical_x0_line: ap.Line = ap.Line(
    start_point=ap.Point2D(0, 0),
    end_point=ap.Point2D(0, STAGE_HEIGHT),
    line_color=ap.Color("#666"),
    parent=container_sprite,
)
x0_text: ap.SvgText = ap.SvgText(
    text="Text's x=0 position",
    fill_color=ap.Color("#666"),
    x=5,
    y=20,
    parent=container_sprite,
)

left_align_sample_text: ap.SvgText = ap.SvgText(
    text="Left align sample (default)",
    x=0,
    y=52,
    fill_color=ap.Color("#aaa"),
    parent=container_sprite,
)

center_align_sample_text: ap.SvgText = ap.SvgText(
    text="Center align sample",
    x=0,
    y=72,
    fill_color=ap.Color("#aaa"),
    parent=container_sprite,
)
center_align_sample_text.align = ap.SvgTextAlign.CENTER

right_align_sample_text: ap.SvgText = ap.SvgText(
    text="Right align sample",
    x=0,
    y=92,
    fill_color=ap.Color("#aaa"),
    parent=container_sprite,
)
right_align_sample_text.align = ap.SvgTextAlign.RIGHT

ap.save_overall_html(dest_dir_path="svg_text_align_note/")

bold 属性のインターフェイス例¶

bold属性ではインスタンスの太字設定の更新もしくは取得を行えます。

import apysc as ap

ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=200,
    stage_height=50,
    stage_elem_id="stage",
)
svg_text: ap.SvgText = ap.SvgText(
    text="Bold style sample",
    x=20,
    y=32,
    fill_color=ap.Color("#aaa"),
)
svg_text.bold = ap.Boolean(True)
ap.save_overall_html(dest_dir_path="svg_text_bold/")

italic 属性のインターフェイス例¶

italic属性ではインスタンスの斜体の設定の更新もしくは取得を行えます。

import apysc as ap

ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=200,
    stage_height=50,
    stage_elem_id="stage",
)
svg_text: ap.SvgText = ap.SvgText(
    text="Italic style sample",
    x=20,
    y=32,
    fill_color=ap.Color("#aaa"),
)
svg_text.italic = ap.Boolean(True)
ap.save_overall_html(dest_dir_path="svg_text_italic/")

rotation_around_center属性のインターフェイス例¶

rotation_around_center属性ではインスタンスの中央座標での回転量（0～359）の更新もしくは取得を行えます:

import apysc as ap

stage: ap.Stage = ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=200,
    stage_height=50,
    stage_elem_id="stage",
)
svg_text: ap.SvgText = ap.SvgText(
    text="Hello, world!",
    x=100,
    y=32,
    fill_color=ap.Color("#aaa"),
    align=ap.SvgTextAlign.CENTER,
)


def on_enter_frame(e: ap.EnterFrameEvent, optional: dict) -> None:
    """
    The handler to handle a timer event.

    Parameters
    ----------
    e : ap.EnterFrameEvent
        Event instance.
    optional : dict
        Optional argument dictionary.
    """
    svg_text.rotation_around_center += 1


stage.enter_frame(handler=on_enter_frame)
ap.save_overall_html(dest_dir_path="svg_txt_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

stage: ap.Stage = ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=200,
    stage_height=120,
    stage_elem_id="stage",
)
X: ap.Number = ap.Number(20)
Y: ap.Number = ap.Number(32)
svg_text: ap.SvgText = ap.SvgText(
    text="Hello, world!",
    x=X,
    y=Y,
    fill_color=ap.Color("#aaa"),
)


def on_enter_frame(e: ap.EnterFrameEvent, optional: dict) -> None:
    """
    The handler to handle a timer event.

    Parameters
    ----------
    e : ap.EnterFrameEvent
        Event instance.
    optional : dict
        Optional argument dictionary.
    """
    rotation: ap.Int = (
        svg_text.get_rotation_around_point(
            x=X,
            y=Y,
        )
        + 1
    )
    svg_text.set_rotation_around_point(
        rotation=rotation,
        x=X,
        y=Y,
    )


stage.enter_frame(handler=on_enter_frame)
ap.save_overall_html(dest_dir_path="svg_txt_rotation_around_point/")

拡縮関係のインターフェイスに対する特記事項¶

拡縮関係のインターフェイスは設定次第では表示が崩れたりするため利用は非推奨です。

scale_x_from_center属性のインターフェイス例¶

scale_x_from_center属性ではインスタンスの中央座標でのX軸の拡縮値の更新もしくは取得を行えます:

import apysc as ap

stage: ap.Stage = ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=200,
    stage_height=50,
    stage_elem_id="stage",
)
direction: ap.Int = ap.Int(-1)
svg_text: ap.SvgText = ap.SvgText(
    text="Hello, world!",
    x=20,
    y=32,
    fill_color=ap.Color("#aaa"),
)


def on_enter_frame(e: ap.EnterFrameEvent, optional: dict) -> None:
    """
    The handler to handle a timer event.

    Parameters
    ----------
    e : ap.EnterFrameEvent
        Event instance.
    optional : dict
        Optional argument dictionary.
    """
    scale: ap.Number = svg_text.scale_x_from_center
    with ap.If(scale > 1):
        direction.value = -1
    with ap.If(scale <= 0.3):
        direction.value = 1
    scale += direction * 0.005
    svg_text.scale_x_from_center = scale


stage.enter_frame(handler=on_enter_frame)
ap.save_overall_html(dest_dir_path="svg_txt_scale_x_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

stage: ap.Stage = ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=200,
    stage_height=50,
    stage_elem_id="stage",
)
X: ap.Number = ap.Number(20)
direction: ap.Int = ap.Int(-1)
svg_text: ap.SvgText = ap.SvgText(
    text="Hello, world!",
    x=X,
    y=32,
    fill_color=ap.Color("#aaa"),
)


def on_enter_frame(e: ap.EnterFrameEvent, optional: dict) -> None:
    """
    The handler to handle a timer event.

    Parameters
    ----------
    e : ap.EnterFrameEvent
        Event instance.
    optional : dict
        Optional argument dictionary.
    """
    scale: ap.Number = svg_text.get_scale_x_from_point(x=X)
    with ap.If(scale > 1):
        direction.value = -1
    with ap.If(scale <= 0.3):
        direction.value = 1
    scale += direction * 0.005
    svg_text.set_scale_x_from_point(scale_x=scale, x=X)


stage.enter_frame(handler=on_enter_frame)
ap.save_overall_html(dest_dir_path="svg_txt_scale_x_from_point/")

flip_x属性のインターフェイス例¶

flip_x属性ではインスタンスのX軸の反転状況の真偽値の更新もしくは取得を行えます:

import apysc as ap

stage: ap.Stage = ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=200,
    stage_height=50,
    stage_elem_id="stage",
)
svg_text: ap.SvgText = ap.SvgText(
    text="Hello, world!",
    x=20,
    y=32,
    fill_color=ap.Color("#aaa"),
)


def on_timer(e: ap.TimerEvent, options: dict) -> None:
    """
    The handler to handle a timer event.

    Parameters
    ----------
    e : ap.TimerEvent
        Event instance.
    options : dict
        Optional argument dictionary.
    """
    svg_text.flip_x = svg_text.flip_x.not_


ap.Timer(handler=on_timer, delay=1000).start()
ap.save_overall_html(dest_dir_path="svg_txt_flip_x/")

flip_y属性のインターフェイス例¶

flip_y属性ではインスタンスのX軸の反転状況の真偽値の更新もしくは取得を行えます:

import apysc as ap

stage: ap.Stage = ap.Stage(
    background_color=ap.Color("#333"),
    stage_width=200,
    stage_height=50,
    stage_elem_id="stage",
)
svg_text: ap.SvgText = ap.SvgText(
    text="Hello, world!",
    x=20,
    y=32,
    fill_color=ap.Color("#aaa"),
)


def on_timer(e: ap.TimerEvent, options: dict) -> None:
    """
    The handler to handle a timer event.

    Parameters
    ----------
    e : ap.TimerEvent
        Event instance.
    options : dict
        Optional argument dictionary.
    """
    svg_text.flip_y = svg_text.flip_y.not_


ap.Timer(handler=on_timer, delay=1000).start()
ap.save_overall_html(dest_dir_path="svg_txt_flip_y/")

SvgText クラスのコンストラクタのAPI¶

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

[インターフェイスの構造] __init__(self, *, text: Union[str, apysc._type.string.String], font_size: Union[int, apysc._type.int.Int] = 16, font_family: Union[List[str], apysc._type.array.Array[apysc._type.string.String], NoneType] = None, x: Union[float, apysc._type.number.Number] = 0.0, y: Union[float, apysc._type.number.Number] = 16.0, fill_color: apysc._color.color.Color = Color("#666666"), 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, leading: Union[float, apysc._type.number.Number] = 1.5, align: apysc._display.svg_text_align_mixin.SvgTextAlign = <SvgTextAlign.LEFT: 'start'>, bold: Union[bool, apysc._type.boolean.Boolean] = False, italic: Union[bool, apysc._type.boolean.Boolean] = False, parent: Union[apysc._display.child_mixin.ChildMixIn, NoneType] = None, variable_name_suffix: str = '') -> None

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

SVGテキストのためのクラスです。

[引数]

text: Union[str, String]
- このクラスで使用するテキスト。
font_size: Union[int, Int], optional
- フォントサイズ設定。
font_family: Optional[Union[Array[String], List[str]]], optional
- フォントファミリー設定。配列内の各文字列には個別のフォント名を指定する必要があります（例: Times New Roman）。
x: float or Number, optional
- 描画を開始するX座標。
y: float or Number, optional
- 描画を開始するY座標（特記事項の節も確認をお願いします）。
fill_color: Color
- 塗りの色の設定。
fill_alpha: float or Number, optional
- 塗りの透明度の設定。
line_color: Color, optional
- 線の色の設定。
line_alpha: float or Number, optional
- 線の透明度の設定。
line_thickness: int or Int, optional
- 線幅の設定。
leading: float or Number, optional
- テキストの行間のサイズ。
align: SvgTextAlign, default SvgTextAlign.LEFT
- テキストの行揃えの設定。
bold: Union[bool, Boolean], optional
- テキストに太字のスタイル設定を行うかどうかの真偽値。
italic: Union[bool, Boolean], optional
- テキストを斜体表示のスタイル設定を行うかどうかの真偽値。
parent: ChildMixIn or None, optional
- このインスタンスを追加する親のインスタンス。もしもNoneが指定された場合、このインスタンスはステージのインスタンスへと追加されます。
variable_name_suffix: str, optional
- JavaScript上の変数のサフィックスの設定です。この設定はJavaScriptのデバッグ時に役立つことがあります。

[特記事項]

・SVGTextクラスの座標の0の位置はテキストの下部からスタートします。そのためもしもy=0を指定した場合、テキストはほとんど見えない状態になります。

[コードサンプル]

>>> import apysc as ap
>>> stage: ap.Stage = ap.Stage(
...     background_color=ap.Color("#333"),
...     stage_width=200,
...     stage_height=50,
...     stage_elem_id="stage",
... )
>>> svg_text: ap.SvgText = ap.SvgText(
...     text="Hello, world!",
...     font_size=20,
...     fill_color=ap.Color("#0af"),
... )
>>> svg_text.text
String("Hello, world!")

>>> svg_text.font_size
Int(20)

>>> svg_text.fill_color
Color("#00aaff")