जावास्क्रिप्ट में फ़ॉन्ट मेट्रिक्स प्राप्त करना?

Question

मैं वर्तमान में एक जावास्क्रिप्ट प्रोजेक्ट पर काम कर रहा हूं जो एक प्रतिपादन लक्ष्य के रूप में HTML5 कैनवास का उपयोग करता है। मेरे कोड को (कठोर रूप से निर्दिष्ट) इंटरफेस के साथ अच्छी तरह से खेलने के लिए, मुझे एक फ़ॉन्ट लेने और उस फ़ॉन्ट की चढ़ाई और मूल ऊंचाई निकालने में सक्षम होना चाहिए। इससे ग्राहकों को पाठ को अधिक सटीक रूप से स्थानांतरित करने की अनुमति मिल जाएगी। मुझे पता है कि textBaseline विशेषता सेट करके टेक्स्ट खींचता है, लेकिन मुझे वास्तव में इन विभिन्न ऊंचाइयों का वर्णन करने वाले संख्यात्मक मानों की आवश्यकता होती है। क्या ऐसा करने के लिए एक सरल तरीका है? यदि नहीं, तो क्या एक (उम्मीद है कि हल्का वजन) पुस्तकालय है जो इसे मेरे लिए संभाल सकता है? मैंने पाया है कि प्रस्तावित समाधानों में से अधिकांश हेवीवेट फ़ॉन्ट प्रतिपादन पुस्तकालय हैं, जो इस समस्या के लिए भारी ओवरकिल की तरह दिखते हैं।

Answer 1

पर एचटीएमएल 5 टाइपोग्राफिक मेट्रिक्स This article समस्या और एक part solution using CSS चर्चा करता है - हालांकि offsetTop आदि के पूर्णांक राउंडिंग एक समस्या (संभावित getBoundingClientRect() उपयोग कर सकते हैं कुछ ब्राउज़रों के लिए उचित फ्लोटिंग बिंदु मूल्यों को प्राप्त करने के लिए) है।

Answer 2

संक्षिप्त उत्तर यह है कि कोई भी तरीके से निर्मित नहीं है और आप स्वयं के प्रकार हैं।

इस वजह से, अधिकांश लोग बस उनका अनुमान लगाते हैं। कुछ लोग सभी मूल्यों की पूर्व गणना करते हैं, जो कि बहुत अधिक काम नहीं है बशर्ते आप केवल कुछ फोंट का उपयोग कर रहे हों।

तीसरा रास्ता स्मृति में एक कैनवास बनाने के लिए और कुछ पत्र प्रिंट (जैसे कि, एक Q और एक O) और प्रोग्राम के चढ़ाई और वंश प्रति पिक्सेल टक्कर का उपयोग यह निर्धारित करने का प्रयास है। यह दर्द है और फ़ॉन्ट्स की संख्या और आप कितना सटीक होना चाहते हैं, इस पर निर्भर हो सकते हैं, लेकिन यदि आप मूल्यों की पूर्व-गणना नहीं करना चाहते हैं तो यह इसके बारे में जाने का सबसे सटीक तरीका है।

Answer 3

यहाँ एक संदर्भ बस के रूप में:

ctx.measureText(txt).width 

http://www.w3schools.com/tags/canvas_measuretext.asp