js server text width

JS-Server-Text-Width

โมดูลนี้มีฟังก์ชั่นสำหรับการคำนวณความกว้างของข้อความในพิกเซล ในเบราว์เซอร์คุณมีความสามารถนั้นนอกกรอบ (พร้อมผืนผ้าใบหรือมีองค์ประกอบที่ซ่อนอยู่) แต่ไม่ใช่ใน nodejs มันมีประโยชน์สำหรับการเรนเดอร์ด้านเซิร์ฟเวอร์เมื่อคุณต้องการตัดข้อความเป็นขนาดคงที่หรือวาดบางสิ่งรอบข้อความ

การติดตั้ง

 npm install server-text-width

หรือ

 yarn add server-text-width

คุณสมบัติ

• ไม่มีการพึ่งพา
• ทำงานในโหนดและในเบราว์เซอร์แบบเดียวกัน
• รองรับอักขระ Unicode (ไม่เพียง แต่ละตินหรือ ASCII)
• รองรับแบบอักษรหลายตัว (แบบอักษรของคุณเองเช่นกัน)
• รองรับขนาดตัวอักษรหลายขนาด
• รองรับน้ำหนักตัวอักษร
• รวมคำจำกัดความ typescript
• ลดขนาดของข้อมูลตาราง

มันทำงานอย่างไร?

แนวคิดดั้งเดิมถูกยืมมาจาก https://github.com/adambisek/string--pixel-width

1. เปิดเครื่องมือพิเศษ mappingTool.html รวมอยู่ในแพ็คเกจนั้น
2. ในเครื่องมือนั้นเลือกชื่อตัวอักษรขนาดและน้ำหนัก เลือกช่วงของอักขระ Unicode
3. เครื่องมือสร้างตารางที่มีความกว้างสำหรับแต่ละอักขระ
4. ใส่ตารางลงในแหล่งที่มาของคุณเป็นค่าคงที่และเริ่มต้นโมดูลด้วย
5. ตอนนี้คุณมีฟังก์ชั่นที่สามารถวัดความกว้างของข้อความได้

ทีละขั้นตอน

เปิด mappingTool.html ในเบราว์เซอร์ของคุณ คุณสามารถดาวน์โหลดได้จาก github https://raw.githubusercontent.com/evgenus/js-server-text-width/main/mappingtool.html

เลือกแบบอักษรที่คุณต้องการวัดขนาดตัวอักษรน้ำหนักตัวอักษรและช่วงของอักขระ หน้า Unicode ทั้งหมดอยู่ที่นี่แล้ว คุณสามารถเลือกตามสถานที่ (หรือสถานที่) ที่คุณใช้ นอกจากนี้คุณยังสามารถทดลองกับข้อความโดยใช้อินพุตที่ด้านบน อักขระทั้งหมดที่ไม่ได้ปกคลุมด้วยช่วง Unicode ที่เลือกจะถูกเน้นด้วยสีแดง

ที่ด้านล่างสุดเครื่องมือจะสร้างข้อมูลตารางให้คุณซึ่งคุณต้องป้อนเข้าโมดูล ความกว้างของตัวละครแต่ละตัวจะแสดงด้วย 2 สัญลักษณ์ในการเข้ารหัสฐาน 64 หนึ่งสำหรับจำนวนเต็มและหนึ่งสำหรับส่วนเศษส่วน (ในตัวอักษรที่แสดงตัวอักษรมีความกว้างเศษส่วนเป็นพิกเซล) นั่นคือกะทัดรัดมากกว่าการจัดเก็บข้อมูลใน JSON

ในรหัสของคุณสร้างตัวแปรคงที่ด้วยค่านั้น

 const TEXT_WIDTH_LOOKUP_TABLE = {
    "Times|32px|bold|0" : "aAaAaAaAaAaAaAaAaAIAIAIAIAIAaAaAaAaAaAaAaAaAaAaAaAaAaAaAIAIAIAIAIAKqRxQAQAgAaqI5KqKqQASOIAKqIAI5QAQAQAQAQAQAQAQAQAQAKqKqSOSOSOQAdxXGVVXGXGVVTiY5Y5MdQAY5VVeMXGY5TiY5XGRzVVXGXGgAXGXGVVKqI5KqSmQAKqQARzOMRzOMKqQARzI5KqRzI5aqRzQARzRzOMMdKqRzQAXGQAQAOMMmHCMmQoaA" ,
    "Times|32px|bold|400" : "VVVVaqS9W5RzMdMdQAdkdkbRY5ZdYIY5XGVVVVS9WRVVfRUKZdZdY5WEeMY5Y5Y5TiXGVVYIbXXGY5X9e9e9Y5e9UKW5fdXGQAQAPsN7QAOMYRNTSXSXRzRRU7RzQARzRzOMPsQAXuQARbRMZzZzSuYMPiOiYORMOMOMRMN7OiMdI5IsKqXgXgRMRzSXQARzoATzYbTMgOVOXGQAjIYxfoXMrgf9Q5M3Y9WAY5QAaGTXaGTXruiRaXSunkZ1oATzXGOMKzAAAAAAAAAAAAAAY5SbVKQ7TiRzS9N7S9N7XGSdfRYRUKNTY5RzY5TEXMSbagUKY5RzdgVVjqbAXVREXGOMVVPuXGXGXiXiXGQAbxTgX9RMX9SGX9RMcKSCcKSCMdfRYRXmTAX1R9Y5SbY5SbXgSCeMVzI5XGQAXGQAgAXGVVOMVAOMVAOMfRYRUKNTQ5OqZdSXZdSXY5QAY5QAY5QAW5OiYIQAYIQAYIQAX9RMUXOie9YMUXOiXGQAXGQA" ,
    "Times|32px|bold|591" : "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALoAAKqAAAAKqAAAAKGAAaAaAaAaAaAaAaAaAQ3OsLuO3QZJiKKQIQ7J7OoORN7QXREKbKGPTQOPxOoSEQdPdO1WCQkaAaAaAaAaATGTgT3IKOu"
} ;

หมายเหตุ: หากคุณต้องการแบบอักษรขนาดน้ำหนักหรือช่วงหลายช่วงเพียงแค่รวมพจนานุกรมนั้นด้วยตนเอง เครื่องมือถูก จำกัด ให้ผลิตเพียงชุดเดียวในเวลาเพื่อความเรียบง่าย

จากนั้นเพียงแค่นำเข้าและเริ่มต้นโมดูล

 import { init } from 'server-text-width' ;

const { getTextWidth } = init ( TEXT_WIDTH_LOOKUP_TABLE ) ;

const width = getTextWidth ( 'Measure my text' ) ;

นั่นคือ เพลิดเพลินไปกับการแสดงข้อความด้านเซิร์ฟเวอร์ของคุณ แสดง repo ของฉันถ้าคุณชอบ :)

งานในอนาคต

PRS ยินดีเป็นอย่างยิ่ง

• เพิ่มตัวแปรข้อความ (ตัวเอียง)
• เพิ่มการรองรับแบบอักษรเว็บลงในเครื่องมือ