fonthx

fonthx: การสร้าง Truetype ง่าย ๆ สำหรับ haxe

• ไลบรารีการสร้างแบบอักษรพื้นฐานมาก
• แกนกลางของโมดูลการสร้างแบบอักษรที่ใช้โดย Fontstruct
• มุ่งเป้าไปที่นักพัฒนาซอฟต์แวร์ Haxe (หรืออื่น ๆ ) ที่ต้องการสร้างเครื่องมือสร้างแบบอักษร
• ควรทำงานกับเป้าหมาย NodeJS, JS, CPP, C# และ Java wasm ก็เช่นกันถ้าคุณโชคดี
• ไม่ได้และจะไม่ทำการลบทับซ้อนกัน!

ตัวอย่าง

https://fontstruct.github.io/fonthx/

การติดตั้ง

1. โคลน repo นี้ด้วย git ไปยังโฟลเดอร์บนเครื่องของคุณ

    git clone [email protected]:FontStruct/fonthx.git
   

2. ติดตั้ง haxe เช่น https://haxe.org/download/
   ปัจจุบันรองรับ Haxe 4.2 (ถ้าบน Haxe 3.4 ใช้แท็ก 0.04)

3. ติดตั้งการพึ่งพา haxe

ด้วย lix (ต้องการ):

 lix download

ด้วย haxelib (ใครก็ตามที่ติดตั้งด้วย Haxelib ควรตรวจสอบปัญหานี้ก่อน)

    haxelib install haxelib.json

1. ในการรวบรวมโหนดคุณจะต้องติดตั้ง NodeJS ในการรวบรวม Java คุณจะต้องติดตั้ง Java JDK ข้อกำหนดอื่น ๆ ที่ระบุไว้ด้านล่าง หากอยู่บน Windows คุณอาจต้องปรับเส้นทางบางเส้นทาง

ลองใช้โหนด

สร้าง:

 haxe build/examples/pixelfonter/pixelfonter-node.hxml

สิ่งนี้จะสร้างตัวอย่าง Pixelfonter ซึ่งจะสร้างแบบอักษร Truetype จากภาพ PNG

ตอนนี้วิ่ง:

 node dist/examples/pixelfonter/node/PixelFonterApp.js -i build/examples/pixelfonter/pixel-font-5x5.png -c65-91 -o tmp/pixelfont.ttf

ลองทำสิ่งเดียวกันกับ Java

สร้าง:

 haxe build/examples/pixelfonter/pixelfonter-java.hxml

วิ่ง:

 java -jar dist/examples/pixelfonter/java/PixelFonterApp.jar -i build/examples/pixelfonter/pixel-font-5x5.png -c65-91 -o tmp/pixelfont.ttf

หรือสำหรับตัวอักษรที่มีเค้าโครง CFF:

 java -jar dist/examples/pixelfonter/java/PixelFonterApp.jar -i build/examples/pixelfonter/pixel-font-5x5.png -c65-91 -o tmp/pixelfont.otf -f otf    

ลองทำสิ่งเดียวกันสำหรับ C ++ ดั้งเดิม

สร้าง:

 haxe build/examples/pixelfonter/pixelfonter-cpp.hxml

วิ่ง:

 dist/examples/pixelfonter/cpp/PixelFonterApp -i build/examples/pixelfonter/pixel-font-5x5.png -c65-91 -o tmp/pixelfont.ttf

และ C#!?!

ในการสร้างและเรียกใช้ตัวอย่างนี้บน OSX หรือ Linux คุณจะต้องติดตั้งโมโนเช่นผ่านการติดตั้ง Mono Brew

สร้าง:

 haxe build/examples/pixelfonter/pixelfonter-cs.hxml

วิ่ง:

 mono dist/examples/pixelfonter/cs/bin/PixelFonterApp.exe -i build/examples/pixelfonter/pixel-font-5x5.png -c65-91 -o tmp/pixelfont.ttf

และในเบราว์เซอร์ที่มี GUI ง่ายๆ

 haxe build/examples/pixelfonter/pixelfonter-js.hxml    

- ในการดูตัวอย่างนี้คุณจะต้องชี้เว็บเซิร์ฟเวอร์ที่ dist/ตัวอย่าง/pixelfonter/js/index.html

และแม้กระทั่งกับ WASM!

สิ่งนี้ซับซ้อนและไม่มั่นคง - การผจญภัย

 HXCWD=`pwd` haxe build/examples/pixelfonter/pixelfonter-wasm.hxml     

- คุณจะต้องตั้งค่า emscripten เพื่อรวบรวมอันนี้ คุณจะต้องชี้เว็บเซิร์ฟเวอร์ที่ DIST/ตัวอย่าง/Pixelfonter/Wasm/index.html วิธีที่ง่ายที่สุดคือ Emrun EG

 emrun --no_emrun_detect --browser chrome dist/examples/pixelfonter/wasm/PixelFonterBrowserApp-debug.html

(อาจใช้เวลาสักครู่ในการเริ่มต้น)

การพัฒนาและการทดสอบ

ตั้งค่าเครื่องมือ dev (gulp):

 npm install gulp-cli -g
npm install

เรียกใช้รายละเอียด:

 gulp specs

หรือพัฒนาและเรียกใช้ข้อมูลจำเพาะ:

 gulp specs-watch

พัฒนาโดยใช้แอพตัวอย่าง PixelFonter (เป้าหมายโหนด):

 gulp pixelfonter-watch

แสดงงานอึกที่มีอยู่ทั้งหมด:

 gulp --tasks

สร้างเครื่องมือสร้างแบบอักษร

ดูตัวอย่าง Pixelfonter สำหรับคำแนะนำโดยเฉพาะ Pixelfonter

คุณต้องทำ:

1. สร้างคลาสฟอนต์ที่ใช้ IFONT (ขยาย AbstractFont) เป็นทางเลือก)
2. สร้างคลาส Glyph ที่ใช้งาน iContourglyph (ทางเลือกขยาย AbstractContourglyph) ทางเลือก)
3. ยกตัวอย่างคลาสฟอนต์ของคุณเพิ่มร่ายมนตร์ลงไปแล้ว
4. รับ truetype bytes ของคุณโดยใช้ opentypeBuilder