このプロジェクトには、TTF フォントを使用してテキストの 2D アウトラインを生成する一連の関数が含まれています。
JSCAD プロジェクトは、テキストのアウトラインを作成するときに TTF フォントを使用する機能を提供しません (SIMPLEX フォントのみをサポートします)。そのため、JSCAD を補う特別な機能セットが作成されました。
注: TTF フォントの性質により、このライブラリは JSCAD Web UI からは使用できません。読み続けてください...
基本的に、このライブラリは「opentype.js」ライブラリに依存しています。これは、いくつかの巧妙な機能を備えた本当にクールなライブラリです。フォントを解凍し、内容を読み取り、SVG のような構造を生成します。
ただし、その前でも、TTF フォント ファイルが利用可能である必要があります。すべてのオペレーティング システムには 1 つ以上のフォントが付属しており、見つかった場合はそれらを使用できます。フォントはWebサイトからダウンロードすることもできます。
例が 2 つあります。 1 つはローカル フォント ファイルを読み取るもの、もう 1 つは Google Fonts からフォントをダウンロードするものです。
Node.js ベースのプロジェクトの場合、このパッケージは NPM を使用してインストールできます。
npm install jscad-text
スタンドアロン プロジェクトの場合、このパッケージをダウンロードしてコンポーネントとして含めることができます。
各サンプルは小規模なスタンドアロン NPM プロジェクトです。ローカルフォントとグーグルフォント。
このプロジェクトはフォントがローカル ファイルから読み取られるため、最も使いやすいです。適切なフォントを見つけて、そのファイルを localFont フォルダーにコピーするだけです。
設定:
npm install
cd localfont
ln -s ../../jscad-text ./jscad-text
cd ..
実行:
npm run example
そして、任意のブラウザを使用して「localfont/index.svg」を開きます。
「index.js」の内容を変更して、フォント ファイルへのパスを変更したり、textToPaths() 関数のオプションを変更したりできます。これも典型的な JSCAD 設計であり、パスを使用して任意の処理を行うことができます。
このプロジェクトは、Google Fonts Web サイトからフォントを取得します。そこに行って、素敵なフォント「ファミリー」を見つけて、名前を書き留めるだけです。
「node-fetch」と呼ばれる別の優れたライブラリは、インターネットからフォントをダウンロードするために使用されます。
設定:
cd googlefont
npm install
ln -s ../../jscad-text ./jscad-text
実行:
npm run cli
そして、任意のブラウザを使用して「text.svg」を開きます。
まだそこに...
そこで、プロジェクト (JSCAD デザイン) 内でこのライブラリを使用する方法を説明します。
まだ作成していない場合は、プロジェクト用に新しいフォルダーを作成します。 (この例ではフォルダー名として「newproject」を使用しています。)
このライブラリをダウンロードして解凍し、すべてをプロジェクト フォルダーにコピーします。上の緑色のコードをクリックし、[ZIP のダウンロード] を選択します。
次に、フォントを見つけてプロジェクト フォルダーにコピーします。
プロジェクト フォルダー内に、index.js というファイルを作成し、次のコードを追加します。
const { primitives } = require('@jscad/modeling')
const { loadFontFromData, textToPaths } = require('./jscad-text-master')
const fs = require('fs')
const main = (params) => {
const data = fs.readFileSync('newproject/Habana.ttf') // CHANGE THIS TO THE FONT FILE NAME
const font = loadFontFromData(data)
const paths = textToPaths({font, segments: 144}, 'JSCAD ROCKS!!')
return paths
}
module.exports = { main }
もうすぐそこです。ここから opentype.js ライブラリをダウンロードします。 https://github.com/opentypejs/opentype.js 中身を解凍し、opentype.js/dist/opentype.js を newproject/jscad-text-master/src/opentype.js にコピーします
終わり!
あとは、プロジェクト フォルダーを JSCAD Web サイトにドラッグ アンド ドロップするだけです。
このプロジェクトは JSCAD V2 でのみ動作します。
いくつかのヒントについては、ユーザー ガイドを参照してください。
MIT ライセンス (MIT)