opentype.jsライブラリを使ってフォントをアタッチさせたテキストパスコマンドをsvgで表示してみよう
こんにちわ。nap5です。
opentype.jsライブラリを使ってGoogleFontで提供されているフォントをアタッチさせたテキストパスコマンドを作成し、svgで表示してみたので、紹介したいと思います。
opentype.jsライブラリはこちらです。
デモで使用したフォントは以下になります。
以下のデモですが、不安定のため、zipにしたものも添付します。zipファイルダウンロード後、展開します。展開後のディレクトリに移動した後、以下のコマンド打つとデモが動きます。
$ cd 展開後のディレクトリ
$ yarn install
$ yarn dev以下のcodesandboxのデモが見れない場合のフォールバックとしてrenderというホスティングサービスでデプロイしたものも用意しました。
デモサイトです。
デモコードです。
このライブラリは便利そうです。パスアニメーション等にも応用できそうです。
以下がデモコードの抜粋です。
静的なフォントファイルをimportで読み込んだあと、ライブラリでロードしてパスコマンドを生成しています。
useEffect(() => {
(async () => {
const font = await opentype.load(eduVICWANTBeginner);
const path = font.getPath('Hello, World!', 0, 0, 72);
const {x1, y1, x2, y2} = path.getBoundingBox();
const x = x1;
const y = y1;
const w = x2 - x1;
const h = y2 - y1;
const viewbox = `${x} ${y} ${w} ${h}`;
svgDomRef.current.setAttribute('viewBox', viewbox);
pathDomRef.current.setAttributeNS(null, 'd', path.toPathData());
})();
}, []);メンバーシップ制度を始めました。掲示板の方が、アクティブにポストしているので、よかったら、覗いてみてください。
最近では、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。
最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。
https://www.udemy.com/course/count-down-up-using-javascript-animation-api/
また、コースの内容紹介記事は以下になります。
簡単ですが、以上です。