※この翻訳ドキュメントはスクリプトによって出力・同期されています。内容が怪しそうな場合はGitHubにissueを追加したり英語の原文の確認をお願いします。
SvgTextSpan クラス¶
このページではSvgTextSpanクラスについて説明します。
インターフェイス概要¶
SvgTextSpanはSvgTextの子となるテキスト要素を作成するためのクラスです。
複数のSvgTextSpanクラスのインスタンスを使ってそれぞれに異なるテキストのスタイルを設定した状態のSvgTextのインスタンスを作成することができます。
基本的な使い方¶
SvgTextSpanクラスのコンストラクタにはtext引数を必要とします。
コンストラクタではfont_sizeやfont_family、fill_color、boldなどの各スタイル設定の引数を受け付けます。
もしもそれらのスタイル設定の引数指定を省略した場合、親のSVGTextのインスタンスのスタイルが反映されます。
また、複数のSvgTextSpanのインスタンスを使ってSvgTextのインスタンスの作成するにはcreate_with_svg_text_spansのクラスメソッドを使うことで対応ができます。
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.create_with_svg_text_spans(
text_spans=[
ap.SvgTextSpan(text="Lorem "),
ap.SvgTextSpan(text="ipsum ", font_size=20, fill_color=ap.Color("#0af")),
ap.SvgTextSpan(text="dolor ", font_size=12),
],
fill_color=ap.Color("#aaa"),
font_size=16,
x=20,
y=32,
)
ap.save_overall_html(dest_dir_path="svg_txt_span_basic_usage/")
改行に対する特記事項¶
SvgTextSpanクラスは改行設定を無視します。
例えば、以下の例では改行用の文字列（ ）を含んでいますがテキストの行は単一行になっています。
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.create_with_svg_text_spans(
text_spans=[
ap.SvgTextSpan(text="Lorem
"),
ap.SvgTextSpan(text="ipsum
"),
ap.SvgTextSpan(text="dolor"),
],
x=20,
y=32,
fill_color=ap.Color("#aaa"),
)
ap.save_overall_html(dest_dir_path="svg_txt_span_notes_of_the_line_break/")
もしも改行を加えたい場合にはSvgTextSpanクラスではなくSvgTextクラスを使用するか、もしくは複数のインスタンスを作成して対応をお願いします。
text 属性のインターフェイス例¶
text属性ではインスタンスのテキストの更新もしくは取得を行えます。
import apysc as ap
stage: ap.Stage = ap.Stage(
background_color=ap.Color("#333"),
stage_width=200,
stage_height=50,
stage_elem_id="stage",
)
text_span_1: ap.SvgTextSpan = ap.SvgTextSpan(text="Lorem ")
text_span_2: ap.SvgTextSpan = ap.SvgTextSpan(text="ipsum")
text_span_2.text = ap.String("dolor")
svg_text: ap.SvgText = ap.SvgText.create_with_svg_text_spans(
text_spans=[text_span_1, text_span_2],
font_size=16,
x=20,
y=32,
fill_color=ap.Color("#aaa"),
)
ap.save_overall_html(dest_dir_path="svg_txt_span_text/")
font_size 属性のインターフェイス例¶
font_size属性ではインスタンスのフォントサイズの更新もしくは取得を行えます。
import apysc as ap
stage: ap.Stage = ap.Stage(
background_color=ap.Color("#333"),
stage_width=200,
stage_height=50,
stage_elem_id="stage",
)
text_span_1: ap.SvgTextSpan = ap.SvgTextSpan(text="Lorem ")
text_span_2: ap.SvgTextSpan = ap.SvgTextSpan(text="ipsum")
text_span_2.font_size = ap.Int(25)
svg_text: ap.SvgText = ap.SvgText.create_with_svg_text_spans(
text_spans=[text_span_1, text_span_2],
font_size=16,
x=20,
y=32,
fill_color=ap.Color("#aaa"),
)
ap.save_overall_html(dest_dir_path="svg_txt_span_font_size/")
font_family 属性のインターフェイス例¶
font_family属性ではインスタンスのフォントファミリー（フォントの指定）の更新もしくは取得を行えます。
この属性は各フォント名のString型の文字列を格納したArray型の配列を必要とします。
import apysc as ap
stage: ap.Stage = ap.Stage(
background_color=ap.Color("#333"),
stage_width=200,
stage_height=50,
stage_elem_id="stage",
)
text_span_1: ap.SvgTextSpan = ap.SvgTextSpan(text="Lorem ")
text_span_2: ap.SvgTextSpan = ap.SvgTextSpan(text="ipsum")
text_span_2.font_family = ap.Array([ap.String("Impact"), ap.String("Arial")])
svg_text: ap.SvgText = ap.SvgText.create_with_svg_text_spans(
text_spans=[text_span_1, text_span_2],
font_size=16,
x=20,
y=32,
fill_color=ap.Color("#aaa"),
)
ap.save_overall_html(dest_dir_path="svg_txt_span_font_family/")
fill_color属性のインターフェイス例¶
fill_color属性は塗りの色の値の更新もしくは取得を行えます:
import apysc as ap
stage: ap.Stage = ap.Stage(
background_color=ap.Color("#333"),
stage_width=200,
stage_height=50,
stage_elem_id="stage",
)
text_span_1: ap.SvgTextSpan = ap.SvgTextSpan(text="Lorem ")
text_span_2: ap.SvgTextSpan = ap.SvgTextSpan(text="ipsum")
text_span_2.fill_color = ap.Color("#0af")
svg_text: ap.SvgText = ap.SvgText.create_with_svg_text_spans(
text_spans=[text_span_1, text_span_2],
font_size=16,
x=20,
y=32,
fill_color=ap.Color("#aaa"),
)
ap.save_overall_html(dest_dir_path="svg_txt_span_fill_color/")
fill_alpha属性のインターフェイス例¶
fill_alpha属性は塗りの透明度の値の更新もしくは取得を行えます:
import apysc as ap
stage: ap.Stage = ap.Stage(
background_color=ap.Color("#333"),
stage_width=200,
stage_height=50,
stage_elem_id="stage",
)
text_span_1: ap.SvgTextSpan = ap.SvgTextSpan(text="Lorem ")
text_span_2: ap.SvgTextSpan = ap.SvgTextSpan(text="ipsum")
text_span_2.fill_alpha = ap.Number(0.3)
svg_text: ap.SvgText = ap.SvgText.create_with_svg_text_spans(
text_spans=[text_span_1, text_span_2],
font_size=16,
x=20,
y=32,
fill_color=ap.Color("#aaa"),
)
ap.save_overall_html(dest_dir_path="svg_txt_span_fill_alpha/")
line_color属性のインターフェイス例¶
line_color属性では線の色の値の更新もしくは取得を行えます:
import apysc as ap
stage: ap.Stage = ap.Stage(
background_color=ap.Color("#333"),
stage_width=200,
stage_height=50,
stage_elem_id="stage",
)
text_span_1: ap.SvgTextSpan = ap.SvgTextSpan(
text="Lorem ", line_thickness=1, font_size=20, bold=True
)
text_span_1.line_color = ap.Color("#aaa")
text_span_2: ap.SvgTextSpan = ap.SvgTextSpan(
text="ipsum", line_thickness=1, font_size=20, bold=True
)
text_span_2.line_color = ap.Color("#0af")
svg_text: ap.SvgText = ap.SvgText.create_with_svg_text_spans(
text_spans=[text_span_1, text_span_2],
font_size=16,
x=20,
y=32,
fill_color=ap.COLORLESS,
)
ap.save_overall_html(dest_dir_path="svg_txt_span_line_color/")
line_alpha属性のインターフェイス例¶
line_alpha属性では線の透明度の値の更新もしくは取得を行えます:
import apysc as ap
stage: ap.Stage = ap.Stage(
background_color=ap.Color("#333"),
stage_width=200,
stage_height=50,
stage_elem_id="stage",
)
text_span_1: ap.SvgTextSpan = ap.SvgTextSpan(
text="Lorem ",
line_color=ap.Color("#0af"),
line_thickness=1,
font_size=20,
bold=True,
)
text_span_2: ap.SvgTextSpan = ap.SvgTextSpan(
text="ipsum",
line_color=ap.Color("#0af"),
line_thickness=1,
font_size=20,
bold=True,
)
text_span_2.line_alpha = ap.Number(0.3)
svg_text: ap.SvgText = ap.SvgText.create_with_svg_text_spans(
text_spans=[text_span_1, text_span_2],
font_size=16,
x=20,
y=32,
fill_color=ap.COLORLESS,
)
ap.save_overall_html(dest_dir_path="svg_txt_span_line_alpha/")
line_thickness属性のインターフェイス例¶
line_thickness属性では線の幅の更新もしくは取得を行えます:
import apysc as ap
stage: ap.Stage = ap.Stage(
background_color=ap.Color("#333"),
stage_width=200,
stage_height=50,
stage_elem_id="stage",
)
text_span_1: ap.SvgTextSpan = ap.SvgTextSpan(
text="Lorem ",
line_color=ap.Color("#0af"),
font_size=20,
bold=True,
)
text_span_2: ap.SvgTextSpan = ap.SvgTextSpan(
text="ipsum",
line_color=ap.Color("#0af"),
font_size=20,
bold=True,
)
text_span_1.line_thickness = ap.Int(3)
text_span_2.line_thickness = ap.Int(3)
svg_text: ap.SvgText = ap.SvgText.create_with_svg_text_spans(
text_spans=[text_span_1, text_span_2],
font_size=16,
x=20,
y=32,
fill_color=ap.COLORLESS,
)
ap.save_overall_html(dest_dir_path="svg_txt_span_line_thickness/")
bold 属性のインターフェイス例¶
bold属性ではインスタンスの太字設定の更新もしくは取得を行えます。
import apysc as ap
stage: ap.Stage = ap.Stage(
background_color=ap.Color("#333"),
stage_width=200,
stage_height=50,
stage_elem_id="stage",
)
text_span_1: ap.SvgTextSpan = ap.SvgTextSpan(text="Lorem ")
text_span_2: ap.SvgTextSpan = ap.SvgTextSpan(text="ipsum")
text_span_2.bold = ap.Boolean(True)
svg_text: ap.SvgText = ap.SvgText.create_with_svg_text_spans(
text_spans=[text_span_1, text_span_2],
font_size=16,
x=20,
y=32,
fill_color=ap.Color("#aaa"),
)
ap.save_overall_html(dest_dir_path="svg_txt_span_bold/")
italic 属性のインターフェイス例¶
italic属性ではインスタンスの斜体の設定の更新もしくは取得を行えます。
import apysc as ap
stage: ap.Stage = ap.Stage(
background_color=ap.Color("#333"),
stage_width=200,
stage_height=50,
stage_elem_id="stage",
)
text_span_1: ap.SvgTextSpan = ap.SvgTextSpan(text="Lorem ")
text_span_2: ap.SvgTextSpan = ap.SvgTextSpan(text="ipsum")
text_span_2.italic = ap.Boolean(True)
svg_text: ap.SvgText = ap.SvgText.create_with_svg_text_spans(
text_spans=[text_span_1, text_span_2],
font_size=16,
x=20,
y=32,
fill_color=ap.Color("#aaa"),
)
ap.save_overall_html(dest_dir_path="svg_txt_span_italic/")
delta_x 属性のインターフェイス例¶
delta_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",
)
text_span_1: ap.SvgTextSpan = ap.SvgTextSpan(text="Lorem ")
text_span_2: ap.SvgTextSpan = ap.SvgTextSpan(text="ipsum")
text_span_2.delta_x = ap.Number(-20)
svg_text: ap.SvgText = ap.SvgText.create_with_svg_text_spans(
text_spans=[text_span_1, text_span_2],
font_size=16,
x=20,
y=32,
fill_color=ap.Color("#aaa"),
)
ap.save_overall_html(dest_dir_path="svg_txt_span_delta_x/")
delta_y 属性のインターフェイス例¶
delta_y属性ではインスタンスのY座標の調整値の更新もくしは取得を行えます。
特記事項: この設定は直前のSvgTextSpanインスタンスの設定を引き継ぎます。
import apysc as ap
stage: ap.Stage = ap.Stage(
background_color=ap.Color("#333"),
stage_width=200,
stage_height=80,
stage_elem_id="stage",
)
text_span_1: ap.SvgTextSpan = ap.SvgTextSpan(text="Lorem ")
text_span_2: ap.SvgTextSpan = ap.SvgTextSpan(text="ipsum ")
text_span_3: ap.SvgTextSpan = ap.SvgTextSpan(text="dolar")
text_span_2.delta_y = ap.Number(10)
text_span_3.delta_y = ap.Number(10)
svg_text: ap.SvgText = ap.SvgText.create_with_svg_text_spans(
text_spans=[text_span_1, text_span_2],
font_size=16,
x=20,
y=32,
fill_color=ap.Color("#aaa"),
)
ap.save_overall_html(dest_dir_path="svg_txt_span_delta_y/")
SvgTextSpan クラスのコンストラクタのAPI¶
特記事項: このAPIドキュメントはドキュメントビルド用のスクリプトによって自動で生成・同期されています。そのためもしかしたらこの節の内容は前節までの内容と重複している場合があります。
[インターフェイスの構造] __init__(self, *, text: Union[str, apysc._type.string.String], font_size: Union[int, apysc._type.int.Int, NoneType] = None, font_family: Union[List[str], apysc._type.array.Array[apysc._type.string.String], NoneType] = None, fill_color: Union[apysc._color.color.Color, NoneType] = None, fill_alpha: Union[float, apysc._type.number.Number, NoneType] = None, line_color: Union[apysc._color.color.Color, NoneType] = None, line_alpha: Union[float, apysc._type.number.Number, NoneType] = None, line_thickness: Union[int, apysc._type.int.Int, NoneType] = None, bold: Union[bool, apysc._type.boolean.Boolean, NoneType] = None, italic: Union[bool, apysc._type.boolean.Boolean, NoneType] = None, delta_x: Union[float, apysc._type.number.Number] = 0.0, delta_y: Union[float, apysc._type.number.Number] = 0.0, variable_name_suffix: str = '') -> None
[インターフェイス概要]
SvgTextの子となるSVGのtext-span要素のためのクラスです。
[引数]
text: Union[str, String]このクラスで使用するテキスト。
font_size: Optional[Union[int, Int]], optionalフォントサイズ設定。
font_family: Optional[Union[Array[String], List[str]]], optionalフォントファミリー設定。配列内の各文字列には個別のフォント名を指定する必要があります（例:
Times New Roman）。
fill_color: Optional[Color], optional塗りの色の設定。
fill_alpha: Optional[Union[float, Number]], optional塗りの透明度の設定。
line_color: Optional[Color], optional線の色の設定。
line_alpha: Optional[Union[float, Number]], optional線の透明度の設定。
line_thickness: Optional[Union[int, Int]], optional設定の線幅。
bold: Optional[Union[bool, Boolean]], optionalテキストに太字のスタイル設定を行うかどうかの真偽値。
italic: Optional[Union[bool, Boolean]], optionalテキストを斜体表示のスタイル設定を行うかどうかの真偽値。
delta_x: Union[float, Number], optionalX座標の調整値の設定。特記事項 : この設定は後に続く
SvgTextSpanのインスタンスの座標も変更します。
delta_y: Union[float, Number], optionalY座標の調整値の設定。特記事項 : この設定は後に続く
SvgTextSpanのインスタンスの座標も更新します。
variable_name_suffix: str, optionalJavaScript上の変数のサフィックスの設定です。この設定はJavaScriptのデバッグ時に役立つことがあります。
[特記事項]
・もしも各種スタイル設定にNoneが指定された場合、そのスタイルは親のスタイル設定を引き継ぎます。
[コードサンプル]
>>> import apysc as ap
>>> stage: ap.Stage = ap.Stage(
... background_color=ap.Color("#333"), stage_width=200, stage_height=50
... )
>>> svg_text: ap.SvgText = ap.SvgText.create_with_svg_text_spans(
... text_spans=[
... ap.SvgTextSpan(text="Hello, "),
... ap.SvgTextSpan(text="Hello, ", font_size=14),
... ],
... font_size=20,
... fill_color=ap.Color("#0af"),
... )
[関連資料]
SvgText クラスの create_with_svg_text_spans クラスメソッドのAPI¶
特記事項: このAPIドキュメントはドキュメントビルド用のスクリプトによって自動で生成・同期されています。そのためもしかしたらこの節の内容は前節までの内容と重複している場合があります。
[インターフェイスの構造] create_with_svg_text_spans(*, text_spans: Union[List[apysc._display.svg_text_span.SvgTextSpan], apysc._type.array.Array[apysc._display.svg_text_span.SvgTextSpan]], 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 = '') -> 'SvgText'
[インターフェイス概要]
指定された各text spanのインスタンスを使用してSvgTextのインスタンスを生成します。
[引数]
text_spans: Union[List[SvgTextSpan], Array[SvgTextSpan]]各text span。
font_size: Union[int, Int], optionalテキスト全体に設定するフォントサイズの設定。
font_family: Optional[Union[Array[String], List[str]]], optionalテキスト全体に設定するフォント設定。配列内の各文字列はフォント名を指定する必要があります（例 :
Times New Roman）。
x: Union[float, Number], optional描画を開始するX座標。
y: Union[float, Number], optional描画を開始するY座標（
特記事項の節も確認をお願いします）。
fill_color: Color, optionalテキスト全体に設定する塗りの色。
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, optionalテキスト全体に設定する行揃え設定。
bold: Union[bool, Boolean], optionalテキストに太字のスタイル設定を行うかどうかの真偽値。
italic: Union[bool, Boolean], optionalテキストを斜体表示のスタイル設定を行うかどうかの真偽値。
parent: Optional[ChildMixIn], optionalこのインスタンスを追加する親のインスタンス。もしもNoneが指定された場合、このインスタンスはステージのインスタンスへと追加されます。
variable_name_suffix: str, optionalJavaScript上の変数のサフィックスの設定です。この設定はJavaScriptのデバッグ時に役立つことがあります。
[返却値]
svg_text: SvgText生成された
SvgTextのインスタンス。
[特記事項]
・SVGTextクラスの座標の0の位置はテキストの下部からスタートします。そのためもしもy=0を指定した場合、テキストはほとんど見えない状態になります。
[コードサンプル]
>>> import apysc as ap
>>> stage: ap.Stage = ap.Stage(
... background_color=ap.Color("#333"),
... stage_width=200,
... stage_height=50,
... )
>>> svg_text: ap.SvgText = ap.SvgText.create_with_svg_text_spans(
... text_spans=[
... ap.SvgTextSpan(text="Hello, "),
... ap.SvgTextSpan(text="Hello, ", font_size=14),
... ],
... font_size=20,
... fill_color=ap.Color("#0af"),
... )
[関連資料]
