PencilKitにおける描画の確認、修正、組立

こんにちは WWDCへようこそ “PencilKit描画を確認し 変更し 構築する” 私はウィルです 今日はPencilKit描画の仕組みについて その構造と何ができるのかを 詳しく説明します PencilKitは美しく リアルなインクを使用した― 低遅延で最高の描画体験を提供する 非常に取り入れやすいツールです iOS14ではいくつかの素晴らしい UIの改善も追加されています 改善内容の詳細については “What's New in Pencil Kit” セッションをご覧ください

またiOS14では 描画ストロークインクパスポイントといった データモデルの閲覧が可能になりました これにより皆様のアプリケーションに PencilKitで優れた新機能を追加できます

データモデルにアクセスできるため ユーザーが描いた内容を確認したり 描かれた内容に対してアクションを取ったり 既存の描画を操作したり 一から新しい描画を動的に作成したりできます では PencilKitで 何ができるようになったのか 早速デモをしてみましょう

このデモはサンプルコードとしても ご利用いただけます 私は７歳の息子が字の書き方を 練習できるアプリケーションの 製作に取り組んできました 上部には練習させたいテキストを 記入するテキストフィールドがあります 画面下部には記入したテキストと同じ内容が PencilKitの描画として合成表示されます このテキストはキーボードでも変更できますが Pencilのデモですので ここではスクリブル機能を使いましょう 実はこれもPencilKitを使った 素晴らしい機能なんです 息子に練習させたいテキストに変更するので もっと７歳らしいものにしましょう

テキストを記入すると 画面下部のPencilKit描画のテンプレートに 個々の文字が表示され

右上から練習させたいサイズと 難易度が選べます

テンプレートが完成したので 手書き練習の設定はこれでＯＫ すると赤い点が表れ それが動いて 書き方を教えてくれます その動きに合わせて文字をなぞるだけです

書いた文字がテンプレートに近ければ 書いた部分が緑色に変わり次に進めます 大きく外れていたら 筆跡が消えアニメーションが繰り返されます

右上にスコアが表示されます

何点取れるでしょうか？

やりました！花火が上がりました ７歳児をやる気にさせる大事な仕組みです

実は私自身 数年間 手書きの練習をしているので ここでもう少し トリッキーなことを試してみましょう PencilKitの合字を描き それをアプリケーションに追加しています

このようにカリグラフィーの練習もできます

このアプリケーションはテキストから PencilKit描画を合成して アニメーション化し 書かれた内容を認識します これはPencilKitのデータモデルに アクセスすることで できることのほんの一例です 次にPencilKit描画の仕組みを見てみましょう これは簡単な花の絵です これを分解してみると 多数のPencilKitのストロークから 構成されていることがわかります 各ストロークは ユーザーが描いた個々の線を表します ストロークはユーザーが 描いた順に表示されるため 最初に花の輪郭 次に茎葉が 描かれたことが分かります そして最後にマーカーで 全体が色付けされています

これは先ほどのデモ用に 私が書いた小文字のデモ用データです テキストを生成するには まずこの描画を個々の文字に分解します

その後その文字を組み合わせて ユーザーの練習用の テンプレートテキストを生成します

この描画を分解するには 小文字のアルファベット描画から ストローク情報を取得します この配列をスライスして 各文字のストローク情報を取得し

その後 そのスライスから 各文字の新しい描画を作成します これをアルファベットの 各文字に対して繰り返します

描画を確認修正したい時は 描画のストローク配列にアクセスします ストロークを使用して 一から新しい描画を作成することもできます

ではストロークとは何なのでしょうか？ PencilKitのストロークは 何からできているのでしょうか？ ストロークの第一の特徴は“パス”です パスがストロークの形状を決定します

そしてインクが色やタイプなどの ストロークの外観を表現します

トランスフォームはストロークの 方向と位置を指定します ストロークに マスクを付けることもできますが これについては後ほどご説明します

ストロークには他にも レンダーバウンドという便利な機能があります これはレンダリングを行う ストローク全体を囲む 境界ボックスです レンダーバウンドは パスインクトランスフォームマスクといった― すべてのストロークプロパティの エフェクトに効力を持ちます

ストロークの外観を表現するインクには インクのタイプと色の情報が含まれ

幅の情報は含まれません ストロークの幅は ストロークパスに沿って変わります

ストロークパスはストロークの形状と パスに沿って変化する形状の外観を表します 例えばストロークパスは 任意のポイントでストローク幅を決定できます

PencilKitのストロークパスは PencilKitストロークポイントの 一様３次Ｂスプライン曲線です 舌を噛みそうですね どういう意味なのでしょう？

つまりパスの中身は Ｂスプライン曲線の制御点だということです パス内のポイントを繰り返し処理し

一つずつ順に描いていくと

ポイントがストロークに沿わない形になります これらの点はＢスプライン制御点であり あなたが実際に描きたい線とは違うはずです 実際のパス上にポイントを配置するには スプラインを補間する必要があります

スプラインを補間するには interpolatedPoints(strideBy:)を使用して ポイントにアクセスします

これで先ほどと同様繰り返し可能な 一連のポイントが取得できます これらを描画すると パス上にポイントが並びます ここでいくつか気付くことがあります ポイントはパス上にあり数も増え 一様な間隔を保っています この場合は51ポイントの間隔で これがメソッドに渡す ストライド引数となります

最後のポイントの間隔が 非一様になっているのは ストロークの最後のポイントが常に ストライドに関係なく生成されるためです この例のようにストライドを間隔で決めたり 時間やパラメータ値で設定したりできます 間隔と時間は説明不要ですね 間隔は描画の座標空間にあるポイントです 時間は秒単位の持続時間で ユーザーが描いた速度に依存します パラメータ値はＢスプライン曲線の パラメトリック補間に関連します

では パラメータ値について説明するため 制御点の描画に戻りましょう これは先ほど使用したものと同じコードです

制御点を描画する代わりに ０から制御点の数までの パスのインデックスを繰り返し 繰り返しの都度パラメータ値0123等に対し interpolatedPoint(at:)を使用して ポイントを取得します それを描画すると―

制御点に相当するポイントが取得できます しかし　これらのポイントは 実際パス上にあります

これがなぜ役に立つのでしょう？ ポイントに番号をつけて確認してみましょう このパラメータ値は 制御点間の非整数値を含む― 浮動小数点数なので便利です つまり 任意の値の補間ポイント― 2.4や4.8といった数値を

求められるのです これによってストロークパスを思い通りに 柔軟に補間できます ここまでに説明した補間はすべて 一様のステップでパスを補間していました PencilKitでは さらにパラメータ値を使用して パスに沿って任意の間隔で ステップを設定することもできます この際(parametricValue, offsetBy:)を使用します

この機能によりパス上のパラメータ値を 時間や間隔の任意のステップで 前後にオフセットできます

非一様なステップは アニメーション化する際に便利です 先ほどのデモはこの機能を使用して 赤いマーカーの点を ストロークに沿って動かしています

各フレームでストローク上の 現在のマーカー位置が 最後のフレームからの正確な時間の長さで オフセットされます

非一様なステップが必要なのは アニメーションフレーム間で常に一定の時間が 保証されているわけではないからです

デモでアニメーション化するには まず現在のフレームとその前のフレーム間に 経過した時間のデルタタイムを取得し

これを使って現在の アニメーションのパラメータ値を 同じ時間だけパスに沿ってオフセットします これによりユーザーが描いたのと同じ速度で ストロークパスに沿って アニメーション化できます

最後に 新しいパラメータ値から パス上の新しい位置を取得し マーカーの位置を更新します

これがパスです パスに沿った制御点と 補間されたポイントの両方が PencilKitのストロークポイントです これらはパスとストロークの 最小構成要素であり 特定の位置で ストロークの外観とタッチ情報の 両方をキャプチャします これらのポイントは 非可逆圧縮形式で格納されるため 作成するポイントはどれも 使用する値を完全な精度では キャプチャしません ストローク内のこのようなポイントの 一例を詳しく見てみましょう

PencilKitのストロークポイントには 複数の外観属性があります

まずポイントの位置です

またサイズ情報も持ち マーカーのストロークでは四角形にはなりません

さらに回転角度または方位角

最後に不透明度です これらの属性の組み合わせにより 特定の位置でのストロークの外観が決定されます

ストロークポイントにも 複数のプロパティがありますが 外観属性ではありません 強さと高度角はストロークが描かれた時の UITouchの値と同一です タイムオフセットは そのポイントが存在するストロークパスの 作成日からの秒単位でのオフセットです これによりユーザーがストロークを描いた際の タイミング情報が分かります

ここからは まだ説明していない PencilKitのストロークの 最後のプロパティの話に戻りましょう それはマスクです

通常ストロークの一部だけを消すために ピクセル消しゴムを使用する際に ストロークをマスクします 通常ストロークの大半は消されませんが もし消す場合は レンダリングでマスクを使って ストロークをクリップし canvas上でのユーザーの ストローク処理方法を調整します

マスクに穴をあけたり

ストロークをいくつかのパーツに 分割することもできます この例では消しゴムを使用して ストロークを２つの 個別のストロークに分割しました

これらは独立した個別のストロークになり ユーザーやAPIに対し個別に動作します 例えばこれらの２つの新しいストロークは 個別のトランスフォームとマスクを持つため

ユーザーは片方のストロークを選択し もう片方のストロークに影響を与えることなく それを動かすことができます

PencilKitのストロークはマスクされますが ストロークパスはマスクされません 例えば 先ほどストロークパスの 描画に使用したコードを用い マスクされたストロークを描画すると

本来描きたいパスよりも はるかに長いパスになります

代わりにストロークの maskedPathRangesプロパティを使います これはマスクにクリップされた時の ストロークパス上の パラメータ値の範囲の配列です ここでは maskedPathRangesを 繰り返し処理し

それぞれの範囲のポイントを補間します

これでマスクされた ストロークの部分に合った― ストロークパスが正しく示されます

ストロークのマスク範囲が ゼロになることもあります

例えば ユーザーが ストロークの一部以外を全部消し 残った部分がパスのスプラインと 交わらない場合 結果的にマスクされたストロークの maskedPathRangesはゼロになります

ストロークのマスク範囲が 複数になることもあります この場合 穴が開いたストローク内に 個別の範囲が４つできます

“認識”はPencilKitで構築できる 多くの優れた機能の ベースとなるものです スプラインベースの認識では maskedPathRangesを使用し マスクされたストロークを適切に解釈します これをNotesでの手書き認識で使用しています

ストロークを解釈する時は maskedPathRangesを使用して ポイントの範囲を取得し 好みの方法で それらを補間し 時間や強さ等の非外観属性を使用して パスの形状を補います

先ほどお見せしたデモは スプラインベースの認識の簡単な例です 照合アルゴリズムを使用して テンプレートの文字とユーザーが描いた文字が どれくらい近いかを比較し点数をつけます 画像ベースの認識を行う場合は PKDrawing上でレンダリングAPIを使用して イメージを生成します PencilKitを使えばアプリケーションに 簡単にPencilのサポートを追加できます さて これで描画の内部を確認し ストロークやインクパスポイントにアクセスし ユーザーが描いたものを 確認できるようになりました これでiPadOS全般のテキストフィールドで 手書き入力できる― 新しいスクリブルのような機能を PencilKitで構築できます 描画を修正することで ユーザーのアクションに応答する― インタラクティブな描画体験も実現可能です またサンプルコードで練習用の 手書きテンプレートを作成したように 手続き的に新しい描画を 作成することもできます

Appleの最も表現力豊かな入力デバイスの １つであるPencilのサポートを追加することで アプリケーションに 素晴らしい機能を追加できます PencilKitはこれまでもアプリケーションに 描画を追加する素晴らしいツールでしたが 今回 描画の内部も見られるようになりました 皆様がPencilを使った 新しい体験を生み出すための 非常にパワフルな基盤となってくれるでしょう