[Delphi] Skia おさらい

はじめに

Delphi 12 Athens から Skia が使える様になりました(FMX / VCL どちらでも使えます)。

この記事はデベロッパーＴＶで解説した Skia サポートのおさらい記事です。

Skia の使い方

Skia を使う方法は、ProjectManager でプロジェクトのコンテキストメニューから「Skia の有効化」をクリックするだけです。

Skia を有効にするとプロジェクトファイルが以下のように変更されます。

VCL
sk4d.dll が自動生成され実行時にリンクされます。

FMX
プラットフォーム毎に Skia モジュールが組み込まれます。

OS	Skiaのモジュール
Windows	sk4d.dll
macOS	libsk4d.dylib
Android	libsk4d.so
iOS	Skia の静的リンク

Skia コントロール

Skia を導入するにあたって、Skia の機能をラッピングし Delphi で扱いやすくした Skia コントロールが搭載されました。
今回は、その Skia コントロールの中で以下の３つを紹介します。

• TSkLabel
• TSkAnimatedImage
• TSkSVG

TSkLabel

TSkLabel は Skia の文字列描画をコントロール化したものです。

従来の TLabel のように単一行のコントロールというわけではなく自動的に改行される複数行表示可能なコントロールです。

追加する文字列ごとにデコレーション（フォントの色等の属性）を設定できます。

TSkLabel は Skia カテゴリにあります。

TSkLabel はその性質上（複数行表示可能なため）高さが決められません。
そのため、置いた直後は縦の長さが極端に長くなっています。
これでは使い勝手が悪いため、AutoSize を False にしてサイズを調整します。

使い方

TSkLabel の Words プロパティに示される TWordsItem を選択して文字列を指定します。
TWordsItem クラスの文字列や属性を適切に指定してデコレーションします。
ちなみに TSkLabel.Text プロパティは Words[0].Text プロパティを表わしています。

WordsItem 毎に文字列や Decoration 背景色などを設定できます。

WordsItem を追加する場合は右クリック「項目を追加」や「コレクションエディタ」で編集できます。

WordsItem を増やして、Item 毎に色を付けてみたサンプルです。

WordsItem 毎にクリックを受け取れます。
WordsItem の OnClick にイベントハンドラを追加するだけです。

イベントハンドラ

procedure TForm1.SkLabel1Words2Click(Sender: TObject);
begin
  // WordsItem がクリックされると実行される
  ShowMessage((Sender as TSkLabel.TWordsItem).Text);
end;

Words.Add メソッドを使えばコードで WordsItem を追加できます。
Words プロパティは TCollection を継承しているので Clear メソッドや Items プロパティなども利用できます

procedure TForm1.FormCreate(Sender: TObject);
begin
  var Item :=
    SkLabel1.Words.Add(
      sLineBreak + 'Hello, SkLabel!',
      TAlphaColors.Red,
      32,
      TFontWeight.UltraBold,
      TFontSlant.Italic);

  Item.OnClick := SkLabel1Words2Click;
end;

TSkAnimatedImage

TSkAnimatedImage はアニメーション GIF に代表されるアニメーション画像を表示できます。

使い方

Source プロパティで画像を指定するだけです。

表示できる種類は以下の通り

• Animated GIF (*.gif)
• Animated WebP (*.webp)
• Lottie (*.json)
• Telegram Sticker (*.tgs)

残念ながら APNG / JPEG XL には対応していません
Animation の詳細は Animation プロパティで設定できます。

TSkSVG

TSkSVG は SVG を表示するコントロールです。
従来の TPath と比べて高機能になっています。

使い方

Svg プロパティの Source に SVG を指定するだけです。

最後に

サンプルアプリが非常に判りやすいのでおすすめです。
デフォルトのサンプル格納場所は以下です。

C:\Users\Public\Documents\Embarcadero\Studio\23.0\Samples\Object Pascal\Multi-Device Samples\Skia4Delphi

これでまた Delphi の表現の幅が広がりましたね。