zfont
1.0.0
ปลั๊กอินข้อความสำหรับเครื่องยนต์ ZDOG 3D! แสดงฟอนต์ Truetype ผ่าน typr.js | jaames.github.io/zfont
คุณสมบัติ | ข้อแม้ การสาธิต การติดตั้ง การใช้งาน API | zdog.font | zdog.text | zdog.textgroup | สิ่งที่ต้องทำ อาคาร
การสาธิตสดสามารถพบได้ที่นี่นอกจากนี้ยังมีตัวอย่างเชิงลึกเพิ่มเติมเกี่ยวกับ CodePen!
$ npm install zfont --saveหากคุณกำลังใช้โมดูล Bundler เช่น Webpack หรือ Rollup ให้นำเข้า Zfont เข้าสู่โครงการของคุณ:
// Using ES6 module syntax
import Zfont from 'zfont' ;
// Using CommonJS modules
const Zfont = require ( 'zfont' ) ; < script src =" https://cdn.jsdelivr.net/npm/zfont/dist/zfont.min.js " > </ script > เมื่อรวมถึงห้องสมุดเช่นนี้จะมีให้ทั่วโลกบน window.Zfont
เวอร์ชันการพัฒนา
ไม่มีการบีบอัดที่ประมาณ 75kb พร้อมความคิดเห็นที่มา
เวอร์ชันการผลิต
ลดลงเหลือ 45kb
จากนั้นเพิ่มลงใน <head> ของหน้าของคุณด้วยแท็ก <script> :
< html >
< head >
<!-- ... -->
< script src =" ./path/to/zfont.min.js " > </ script >
</ head >
<!-- ... -->
</ html > หลังจากนำเข้า/ดาวน์โหลดทั้ง ZDOG และ ZFONT เราจำเป็นต้องเริ่มต้นปลั๊กอิน ZFONT เมื่อเริ่มต้นแล้วคลาส Zdog.Font , Zdog.Text และ Zdog.TextGroup จะพร้อมใช้งาน:
Zfont . init ( Zdog ) ;(PSSST! หากคุณต้องการดำน้ำลองดูตัวอย่างพื้นฐานบน CodePen)
ในการวาดข้อความบางส่วนในฉาก ZDOG ก่อนอื่นเราต้องตั้งค่าวัตถุ Zdog.Font ใหม่ด้วย. TTF URL สำหรับแบบอักษรที่เราต้องการจากนั้นเราสามารถสร้างวัตถุ Zdog.Text ใหม่และเพิ่มลงในภาพประกอบเหมือนรูปร่างอื่น ๆ :
// Initialize Zfont
Zfont . init ( Zdog ) ;
// Create a Zdog illustration
let illo = new Zdog . Illustration ( {
element : '.zdog-canvas'
} ) ;
// Set up a font to use
let myFont = new Zdog . Font ( {
src : './path/to/font.ttf'
} ) ;
// Create a text object
// This is just a Zdog.Shape object with a couple of extra parameters!
new Zdog . Text ( {
addTo : illo ,
font : myFont ,
value : 'Hey, Zdog!' ,
fontSize : 64 ,
color : '#fff'
} ) ;
// Animation loop
function animate ( ) {
illo . updateRenderGraph ( ) ;
requestAnimationFrame ( animate ) ;
}
animate ( ) ; ทั้ง Zdog.Text และ Zdog.TextGroup Support Text MultiLine Text โดยการแทรกอักขระใหม่ ( n ) ไม่ว่าคุณจะต้องการเพิ่มเส้นแบ่งบรรทัด:
new Zdog . Text ( {
...
value : 'The quick brown foxnjumps over thenlazy zdog' ,
} ) ; เพื่อความสามารถในการอ่านที่ดีกว่าคุณอาจต้องการใช้อาร์เรย์ของสตริงสำหรับตัวเลือก value ในกรณีนี้แต่ละสตริงในอาร์เรย์จะถือว่าเป็นบรรทัดข้อความแยก:
new Zdog . Text ( {
...
value : [
'The quick brown fox'
'jumps over the' ,
'lazy zdog'
]
} ) ; ในกรณีส่วนใหญ่คุณไม่ต้องกังวลเกี่ยวกับการรอให้แบบอักษรโหลดเนื่องจากวัตถุข้อความจะปรากฏขึ้นอย่างน่าอัศจรรย์เมื่อแบบอักษรของพวกเขาพร้อมใช้งาน อย่างไรก็ตามปลั๊กอินยังมีฟังก์ชั่นยูทิลิตี้ Zdog.waitForFonts() หากคุณต้องการชะลอสิ่งใดจนกว่าแบบอักษรทั้งหมดในฉากของคุณจะทำการโหลดเสร็จแล้ว
ตัวอย่างเช่นลองแก้ไขลูปแอนิเมชั่นจากตัวอย่างก่อนหน้านี้เพื่อไม่ให้เริ่มจนกว่าตัวอักษรจะพร้อม:
// Animation loop
function animate ( ) {
illo . updateRenderGraph ( ) ;
requestAnimationFrame ( animate ) ;
}
// Zdog.waitForFonts() returns a Promise which is resolved once all the fonts added to the scene so far have been loaded
Zdog . waitForFonts ( ) . then ( ( ) => {
// Once the fonts are done, start the animation loop
animate ( ) ;
} ) แสดงถึงตัวอักษรที่สามารถใช้งานได้โดยอินสแตนซ์ของ Zdog.Text หรือ Zdog.TextGroup
let font = new Zdog . Font ( {
src : './path/to/font.ttf'
} ) | พารามิเตอร์ | รายละเอียด | ค่าเริ่มต้น |
|---|---|---|
src | เส้นทาง URL แบบอักษร นี่อาจเป็นตัวอักษร .ttf หรือ .otf , ตรวจสอบ typr.js repo สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการสนับสนุนแบบอักษร | '' |
measureText(text, fontSize) รับการวัดสำหรับ text สตริงที่ระบุเมื่อแสดงผลที่ fontSize (วัดเป็นพิกเซล) คล้ายกับ CanvasRenderingContext2D.measureText()
ส่งคืนวัตถุที่มี width height descender , ascender
getTextPath(text, fontSize, x=0, y=0, z=0, alignX='left', alignY='bottom') ส่งคืนอาร์เรย์ของคำสั่งเส้นทาง ZDOG สำหรับ text สตริงที่ระบุเมื่อแสดงผลที่ fontSize (วัดเป็นพิกเซล)
x , y , z ) เป็นจุดกำเนิดของเส้นทางalignX คือการจัดตำแหน่งข้อความแนวนอน (เทียบเท่ากับคุณสมบัติ text-align CSS); ไม่ว่าจะ "left" , "center" หรือ "right"alignY คือการจัดแนวข้อความแนวตั้ง ไม่ว่าจะเป็น "top" , "middle" หรือ "bottom". waitForLoad()ส่งคืนสัญญาที่แก้ไขได้เมื่อตัวอักษรนี้ทำการโหลดเสร็จแล้ว
วัตถุที่ใช้สำหรับการเรนเดอร์ข้อความ มันสืบทอดทุกอย่างจากคลาส Zdog.Shape
new Zdog . Text ( {
addTo : illo ,
font : font ,
value : 'Hey, Zdog!' ,
textAlign : 'center' ,
textBaseline : 'middle' ,
color : '#5222ee' ,
stroke : 1 ,
} ) Zdog.Text สืบทอดตัวเลือกทั้งหมดจากคลาส Zdog.Shape รวมถึงความพิเศษสองสามอย่าง:
| พารามิเตอร์ | รายละเอียด | ค่าเริ่มต้น |
|---|---|---|
font | Zdog.Font เพื่อใช้สำหรับข้อความนี้ สิ่งนี้จำเป็น | null |
value | สตริงข้อความ | '' |
fontSize | ขนาดข้อความวัดเป็นพิกเซล | 64 |
textAlign | การจัดตำแหน่งข้อความแนวนอนเทียบเท่ากับคุณสมบัติ text-align CSS นี่อาจเป็น 'left' , 'center' หรือ 'right' | 'left' |
textBaseline | การจัดตำแหน่งข้อความแนวตั้งเทียบเท่ากับคุณสมบัติ HTML5 Canvas ' textBaseline นี่อาจเป็น 'top' , 'middle' หรือ 'bottom' | 'bottom' |
Zdog.Text สืบทอดคุณสมบัติทั้งหมดจากคลาส Zdog.Shape เช่นเดียวกับความพิเศษบางอย่าง คุณสมบัติทั้งหมดเหล่านี้สามารถอัปเดตได้ตลอดเวลาและข้อความที่แสดงผลจะอัปเดตโดยอัตโนมัติ
font อินสแตนซ์ Zdog.Font ที่ใช้สำหรับข้อความนี้
valueค่าข้อความเป็นสตริง
fontSizeขนาดตัวอักษรวัดเป็นพิกเซล
textAlign การจัดตำแหน่งข้อความแนวนอนเทียบเท่ากับคุณสมบัติ text-align CSS นี่อาจเป็น 'left' , 'center' หรือ 'right'
textBaseline การจัดตำแหน่งข้อความแนวตั้งเทียบเท่ากับคุณสมบัติ HTML5 Canvas ' textBaseline นี่อาจเป็น 'top' , 'middle' หรือ 'bottom'
คลาสนี้คล้ายกับ Zdog.Text มากยกเว้นว่าทำหน้าที่เป็น Zdog.Group แทนและแต่ละข้อความจะแสดงเป็นรูปร่างของตัวเอง สิ่งนี้มีประโยชน์สำหรับกรณีการใช้งานขั้นสูงที่คุณต้องการควบคุมตัวละครแต่ละตัว
new Zdog . TextGroup ( {
addTo : illo ,
font : font ,
value : 'Hey, Zdog!' ,
textAlign : 'center' ,
color : '#5222ee' ,
stroke : 2 ,
} ) Zdog.TextGroup สืบทอดตัวเลือกทั้งหมดจากคลาส Zdog.Group รวมถึงความพิเศษเล็กน้อย:
| พารามิเตอร์ | รายละเอียด | ค่าเริ่มต้น |
|---|---|---|
font | Zdog.Font เพื่อใช้สำหรับข้อความนี้ สิ่งนี้จำเป็น | null |
value | สตริงข้อความ | '' |
fontSize | ขนาดข้อความวัดเป็นพิกเซล | 64 |
textAlign | การจัดตำแหน่งข้อความแนวนอนเทียบเท่ากับคุณสมบัติ text-align CSS นี่อาจเป็น 'left' , 'center' หรือ 'right' | 'left' |
textBaseline | การจัดตำแหน่งข้อความแนวตั้งเทียบเท่ากับคุณสมบัติ HTML5 Canvas ' textBaseline นี่อาจเป็น 'top' , 'middle' หรือ 'bottom' | 'bottom' |
color | สีข้อความ | #333 |
fill | ข้อความเติม | false |
stroke | จังหวะข้อความ | stroke |
Zdog.TextGroup สืบทอดคุณสมบัติทั้งหมดจากคลาส Zdog.Group รวมถึงความพิเศษบางอย่าง คุณสมบัติทั้งหมดเหล่านี้สามารถอัปเดตได้ตลอดเวลาและข้อความที่แสดงผลจะอัปเดตโดยอัตโนมัติ
font อินสแตนซ์ Zdog.Font ที่ใช้สำหรับข้อความนี้
valueค่าข้อความเป็นสตริง
fontSizeขนาดตัวอักษรวัดเป็นพิกเซล
textAlign การจัดตำแหน่งข้อความแนวนอนเทียบเท่ากับคุณสมบัติ text-align CSS นี่อาจเป็น 'left' , 'center' หรือ 'right'
textBaseline การจัดตำแหน่งข้อความแนวตั้งเทียบเท่ากับคุณสมบัติ HTML5 Canvas ' textBaseline นี่อาจเป็น 'top' , 'middle' หรือ 'bottom'
color สีข้อความเทียบเท่ากับ Shape.color การตั้งค่านี้จะอัปเดตสีสำหรับลูก ๆ ของกลุ่มทั้งหมด
fill เติมข้อความเทียบเท่ากับ Shape.fill เติม การตั้งค่านี้จะอัปเดตการเติมสำหรับลูก ๆ ของกลุ่มทั้งหมด
stroke จังหวะข้อความเทียบเท่ากับ Shape.stroke การตั้งค่านี้จะอัปเดตจังหวะสำหรับลูก ๆ ของกลุ่มทั้งหมด
ส่งคืนสัญญาที่แก้ไขได้ทันทีที่ฟอนต์ทั้งหมดที่เพิ่มเข้ามาในฉากนั้นจะถูกโหลดและพร้อมสำหรับการใช้งาน
Zdog . waitForFonts ( ) . then ( function ( ) {
// Do something once the font is ready
} $ npm install$ npm start$ npm run build2019 James Daniel
