दिलचस्प पोस्ट
क्यूमेक – आउटपुट में एक फाइल कॉपी कैसे करें में डालें … मान (SELECT … FROM …) ओब्जेसी लिंकर फ्लैग क्या करता है? ImportError: नाम NUMPY_MKL आयात नहीं कर सकता फाइल अपलोड के साथ ServletFileUpload के parseRequest? IEnumerable <T> वापसी प्रकार के रूप में वापसी का प्रकार '?:' (टर्नरी सशर्त ऑपरेटर) CorFlags.exe / 32bit + काम कैसे करता है? शैलियों और सीएसएस का इस्तेमाल करते हुए पांडा डेटाफ़्रेम HTML तालिका अजगर के भीतर पाठ का रंग बदलें एक 'foreach' लूप से अधिक एक LINQ कथन है? सीमके – एक फ़ोल्डर में सभी फ़ाइलों को स्वचालित रूप से एक लक्ष्य में जोड़ें? एमएस-वर्ड एप्लीकेशन क्लास से पीआईडी ​​प्राप्त करें? क्या MySQL में अनुक्रमित दृश्य होना संभव है? प्रॉपर्टी बनाम इंस्टेंस वैरिएबल सेवा स्टैक्स और एक स्ट्रीम लौट रहा है

कैनवास में अधिकतम फ़ॉन्ट आकार प्राप्त करने के लिए जावास्क्रिप्ट का उपयोग करें

मैं एक कैनवास चित्रित कर रहा हूं जिसकी पूरी स्क्रीन उपलब्ध होने की आवश्यकता है (100% चौड़ाई और ऊंचाई)। मैं इस तरह जावास्क्रिप्ट का उपयोग कर कैनवास की चौड़ाई और ऊंचाई निर्धारित करता हूं

var w = window.innerWidth; var h = window.innerHeight; var canvas = document.getElementById("myCanvas"); canvas.width = w; canvas.height = h; 

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

आपके सहयोग के लिए धन्यवाद।

Solutions Collecting From Web of "कैनवास में अधिकतम फ़ॉन्ट आकार प्राप्त करने के लिए जावास्क्रिप्ट का उपयोग करें"

चुनौती

कैनवास के measureText रूप में, measureText वर्तमान में ऊंचाई को मापने ( measureText + वंश) का समर्थन नहीं करता है, हमें लाइन-ऊँचाई प्राप्त करने के लिए थोड़ा डोम चाल करना होगा।

जैसे कि फ़ॉन्ट – या टाइपफेस की वास्तविक ऊंचाई – जरूरी (शायद ही कभी) फ़ॉन्ट आकार के अनुरूप नहीं है, हमें इसे मापने का अधिक सटीक तरीका चाहिए।

उपाय

फिल्ड डेमो

नतीजा एक ऊर्ध्वाधर गठबंधन वाला पाठ होगा जो कि चौड़ाई में कैनवास को हमेशा फिट होता है।

स्नैप

यह समाधान स्वचालित रूप से फ़ॉन्ट के लिए इष्टतम आकार प्राप्त करेगा।

पहला कार्य ऊंचाई का समर्थन करने के लिए measureText लपेट करना है। यदि पाठ मीट्रिक का नया कार्यान्वयन उपलब्ध नहीं है तो DOM का उपयोग करें:

 function textMetrics(ctx, txt) { var tm = ctx.measureText(txt), w = tm.width, h, el; // height, div element if (typeof tm.fontBoundingBoxAscent === "undefined") { // create a div element and get height from that el = document.createElement('div'); el.style.cssText = "position:fixed;font:" + ctx.font + ";padding:0;margin:0;left:-9999px;top:-9999px"; el.innerHTML = txt; document.body.appendChild(el); h = parseInt(getComputedStyle(el).getPropertyValue('height'), 10); document.body.removeChild(el); } else { // in the future ... h = tm.fontBoundingBoxAscent + tm.fontBoundingBoxDescent; } return [w, h]; } 

अब हम इष्टतम आकार खोजने के लिए लूप कर सकते हैं (यहां बहुत अनुकूल नहीं है, लेकिन इस प्रयोजन के लिए काम करता है – और मैंने इसे अभी लिखा है, इसलिए इसमें बग हो सकते हैं, एक होने के कारण पाठ केवल एक एकल वर्ण है जो चौड़ाई से अधिक नहीं है ऊंचाई से पहले)

यह फ़ंक्शन कम से कम दो तर्क, संदर्भ और पाठ लेता है, दूसरों को वैकल्पिक रूप से फ़ॉन्ट नाम (केवल नाम), सहिष्णुता [0.0, 1.0] (डिफ़ॉल्ट 0.02 या 2%) और शैली (यानी बोल्ड, इटैलिक इत्यादि) जैसे वैकल्पिक हैं:

 function getOptimalSize(ctx, txt, fontName, tolerance, tolerance, style) { tolerance = (tolerance === undefined) ? 0.02 : tolerance; fontName = (fontName === undefined) ? 'sans-serif' : fontName; style = (style === undefined) ? '' : style + ' '; var w = ctx.canvas.width, h = ctx.canvas.height, current = h, i = 0, max = 100, tm, wl = w - w * tolerance * 0.5, wu = w + w * tolerance * 0.5, hl = h - h * tolerance * 0.5, hu = h + h * tolerance * 0.5; for(; i < max; i++) { ctx.font = style + current + 'px ' + fontName; tm = textMetrics(ctx, txt); if ((tm[0] >= wl && tm[0] <= wu)) { return tm; } if (tm[1] > current) { current *= (1 - tolerance); } else { current *= (1 + tolerance); } } return [-1, -1]; } 

इसे इस्तेमाल करे।

FIDDLE डेमो

 var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var x = canvas.width / 2; var y = canvas.height / 2 - 10; var text = 'IM @ CENTER!'; context.font = '10pt Calibri'; //try changing values 10,15,20 context.textAlign = 'center'; context.fillStyle = 'red'; context.fillText(text, x, y); 

आप विंडो आकार के आधार पर अपनी शर्तों को प्रदान कर सकते हैं। निम्नलिखित जैसे सरल कार्य बनाएं:

 function Manipulate_FONT(window.widht, window.height) { if (window.widht == something && window.height == something) { font_size = xyz //put this in ---> context.font = '10pt Calibri' } }