jscad text

jscad-teks

Buat Garis Besar Teks menggunakan font TTF

Proyek ini berisi serangkaian fungsi yang menghasilkan garis besar teks 2D menggunakan font TTF.

Ringkasan

Proyek JSCAD tidak menyediakan kemampuan untuk menggunakan font TTF saat membuat kerangka teks (Ini hanya mendukung font SIMPLEX.) Oleh karena itu, serangkaian fungsi khusus telah dibuat untuk melengkapi JSCAD.

CATATAN: Karena sifat font TTF, perpustakaan ini tidak dapat digunakan melalui UI Web JSCAD. Teruslah membaca...

Pada dasarnya, perpustakaan ini bergantung pada perpustakaan 'opentype.js'. Ini adalah perpustakaan yang sangat keren yang melakukan beberapa hal apik; membuka kompresi font, membaca konten, dan menghasilkan struktur seperti SVG.

Namun sebelum itu, file font TTF harus tersedia. Semua sistem operasi dilengkapi dengan satu atau lebih font, dan font tersebut dapat digunakan, jika Anda dapat menemukannya. Font juga dapat diunduh dari situs web.

Ada dua contoh; satu yang membaca file font lokal, dan satu lagi yang mengunduh font dari Google Fonts.

Daftar isi

• Instalasi
• Contoh
• Proyek
• Catatan Khusus
• Lisensi

Instalasi

Untuk proyek berbasis Node.js, paket ini dapat diinstal menggunakan NPM.

 npm install jscad-text

Untuk proyek mandiri, paket ini dapat diunduh dan disertakan sebagai komponen.

• Unduh paket dari GitHub
• Buka zip isinya, yang akan menghasilkan direktori bernama 'jscad-text'
• Salin direktori 'jscad-text' ke proyek yang lebih besar

Contoh

Masing-masing contoh merupakan proyek NPM kecil yang berdiri sendiri; font lokal dan googlefont.

Proyek Font Lokal

Proyek ini adalah yang paling mudah digunakan, karena font dibaca dari file lokal. Temukan saja font yang bagus, dan salin file tersebut ke folder localFont.

• MacOS : lihat /Library/Fonts atau /System/Library/Fonts
• jendela :
• Linux :

Pengaturan:

 npm install
cd localfont
ln -s ../../jscad-text ./jscad-text
cd ..

Eksekusi:

 npm run example

Dan buka 'localfont/index.svg' menggunakan browser apa pun.

Isi 'index.js' dapat dimodifikasi untuk mengubah jalur ke file font, atau mengubah opsi ke fungsi textToPaths(). Ini juga merupakan desain khas JSCAD, dan dapat dimodifikasi untuk melakukan apa pun yang Anda inginkan dengan jalurnya.

Proyek Font Google

Proyek ini memperoleh font dari situs web Google Fonts. Pergi saja ke sana, temukan font 'keluarga' yang bagus, dan tulis namanya.

Pustaka keren lainnya yang disebut 'node-fetch' digunakan untuk mengunduh font dari internet.

Pengaturan:

 cd googlefont
npm install
ln -s ../../jscad-text ./jscad-text

Eksekusi:

 npm run cli

Dan buka 'text.svg' menggunakan browser apa pun.

Proyek

Masih di sana...

Jadi, inilah cara menggunakan perpustakaan ini di dalam proyek (desain JSCAD).

Jika belum, buat folder baru untuk proyek tersebut. (Contoh ini menggunakan 'proyek baru' sebagai nama folder.)

Unduh perpustakaan ini, unzip, dan salin semuanya ke folder proyek. Klik pada KODE hijau di atas, dan pilih Unduh ZIP.

Sekarang, temukan font, dan salin ke folder proyek.

Di dalam folder proyek, buat file bernama index.js, dan tambahkan kode berikut.

 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 }

Hampir sampai. Sekarang unduh perpustakaan opentype.js dari sini; https://github.com/opentypejs/opentype.js Buka zip isinya, dan salin opentype.js/dist/opentype.js ke newproject/jscad-text-master/src/opentype.js

Selesai!

Sekarang, cukup drag dan drop folder proyek ke situs JSCAD.

Catatan Khusus

PROYEK INI HANYA BEKERJA DENGAN JSCAD V2.

Lihat Panduan Pengguna untuk beberapa tips.

Lisensi

Lisensi MIT (MIT)