fontpixels.js

fontpixels.js

ไลบรารีจาวาสคริปต์สำหรับรับข้อมูลพิกเซลของตัวละครในแบบอักษรตามคำตอบของสแต็กโอเวอร์โฟลว์นี้ ลองดูหน้านี้เพื่อดูการสาธิต

เอพีไอ

 var pixelarray = fontpixels . generatepixels ( text , resolution , fontFamily , width , lines ) ;

ข้อความ

 // supports ascii...
text = "A" ;
// and unicode
text = "╫" ;

ขอแนะนำให้แทรกอักขระสำหรับข้อความเท่านั้นเนื่องจากการเว้นวรรคระหว่างตัวอักษรค่อนข้างขี้ขลาด

ปณิธาน

 resolution = 30 ;

ความละเอียดจะกำหนดทั้งขนาดของเอาต์พุตและรายละเอียดของเอาต์พุต ความละเอียดที่มากขึ้นจะทำให้อาร์เรย์พิกเซลมีขนาดใหญ่ขึ้นและมีรายละเอียดมากขึ้น

แบบอักษรครอบครัว

 fontFamily = "Times New Roman" ;

แบบอักษรของข้อความ ตรวจสอบให้แน่ใจว่าโหลดแบบอักษรแล้วก่อนที่คุณจะเรียก fontpixels.generatepixels() ฉันอยากจะแนะนำ WebFont สำหรับตัวโหลดฟอนต์

ความกว้าง

 width = 0.3 ;

ความกว้างบรรทัดของข้อความ โดยปกติค่าระหว่าง 0 ถึง 1 ก็เพียงพอแล้ว ใช้งานได้เฉพาะเมื่อ lines ถูกตั้งค่าเป็นจริงเท่านั้น สอดคล้องกับคุณสมบัติ canvas ctx.lineWidth

เส้น

 lines = false ;

ว่าจะวาดข้อความเป็นเส้น เช่น HTML5 canvas ctx.strokeText() หรือไม่

พิกเซลเรย์

 console . log ( pixelarray ) ;
	//[{x: 2, y: 4}, {x: 5, y: 6} ...]

ผลลัพธ์คืออาร์เรย์ของค่า (x, y) ของพิกเซล คุณสามารถใช้พิกเซลได้โดยการวนซ้ำพิกเซลเหล่านั้น

 pixelarray . forEach ( function ( value ) {
	console . log ( value . x , value . y ) ;
} ) ;