दिलचस्प पोस्ट
ग्राफ़ एपीआई के जरिए शेयर की गणना कैसे करें पायथन कोड से REPL (रीड, इवाल, प्रिंट, लूप) में ड्रॉप कैसे करें लगातार Amortized समय एक स्प्रिंग एमवीसी नियंत्रक से मॉडल एट्रिब्यूट्स को कैसे दूसरे नियंत्रक तक पहुंचाएं? मैं स्ट्रिंग पर क्यों नहीं जा सकता? अजगर में सेलेनियम वेबड्राइवर के साथ आंशिक स्क्रीनशॉट कैसे लें? App.config में सेवा इंजेक्ट करें रेपो परिवर्तनों पर ईमेल सूचना भेजने के लिए गिट हुक प्रतिबिंब के उपयोग से व्युत्पन्न प्रकार की खोज करना JQuery के साथ कीबोर्ड शॉर्टकट एक प्रकार से एक नया ऑब्जेक्ट उदाहरण प्राप्त करें नोक्लास डीफफाउंड एरर – ग्रहण और एंड्रॉइड रेल 3: एसोसिएशन के माध्यम से कई विकल्प हैं ViewPager सेटCurrentItem (पेज आईडी, सच) smoothscroll नहीं करता है IE JavaScript त्रुटि पार्सिंग त्रुटि

<Canvas> तत्व में पाठ लपेटें

मैं <canvas> तत्व का उपयोग करके किसी छवि पर पाठ जोड़ने का प्रयास कर रहा हूं सबसे पहले छवि तैयार की गई है और छवि पर छवि को तैयार किया गया है। अब तक सब ठीक है।

लेकिन जहां मुझे समस्या का सामना करना पड़ रहा है, यह है कि यदि पाठ बहुत लंबा है, तो इसे कैनवास के शुरू और अंत में काटा जाता है मैं कैनवास का आकार बदलने की योजना नहीं बना रहा हूं, लेकिन मैं सोच रहा था कि लंबे पाठ को कई पंक्तियों में कैसे लपेटें ताकि सभी को प्रदर्शित किया जा सके। क्या कोई मुझे सही दिशा में बता सकता है?

Solutions Collecting From Web of "<Canvas> तत्व में पाठ लपेटें"

एक संभावित विधि (पूरी तरह से परीक्षण नहीं, लेकिन अब के लिए यह पूरी तरह से काम किया है)

  /** * Divide an entire phrase in an array of phrases, all with the max pixel length given. * The words are initially separated by the space char. * @param phrase * @param length * @return */ function getLines(ctx,phrase,maxPxLength,textStyle) { var wa=phrase.split(" "), phraseArray=[], lastPhrase=wa[0], measure=0, splitChar=" "; if (wa.length <= 1) { return wa } ctx.font = textStyle; for (var i=1;i<wa.length;i++) { var w=wa[i]; measure=ctx.measureText(lastPhrase+splitChar+w).width; if (measure<maxPxLength) { lastPhrase+=(splitChar+w); } else { phraseArray.push(lastPhrase); lastPhrase=w; } if (i===wa.length-1) { phraseArray.push(lastPhrase); break; } } return phraseArray; } 

@ मिजर के उत्तर का अद्यतन संस्करण, एक गंभीर और एक मामूली बग फिक्स्ड के साथ।

 function getLines(ctx, text, maxWidth) { var words = text.split(" "); var lines = []; var currentLine = words[0]; for (var i = 1; i < words.length; i++) { var word = words[i]; var width = ctx.measureText(currentLine + " " + word).width; if (width < maxWidth) { currentLine += " " + word; } else { lines.push(currentLine); currentLine = word; } } lines.push(currentLine); return lines; } 

हम कुछ समय के लिए इस कोड का उपयोग कर रहे हैं, लेकिन आज हम यह समझने का प्रयास कर रहे थे कि कुछ पाठ क्यों नहीं आ रहा था, और हमें एक बग मिला!

यह पता चला है कि अगर आप getLines () फ़ंक्शन में एक शब्द (बिना किसी रिक्त स्थान के) देते हैं, तो यह एक पंक्ति के साथ एक सरणी के बजाय एक खाली सरणी वापस करेगा।

जब हम उस की जांच कर रहे थे, तो हमें एक और (बहुत अधिक सूक्ष्म) बग मिला, जहां लाइनें थोड़ी देर के लिए समाप्त हो सकती हैं, क्योंकि मूल कोड ने एक रेखा की लंबाई को मापने के लिए रिक्त स्थान के लिए खाता नहीं था

हमारे अद्यतित संस्करण, जो उस पर हमने जो कुछ भी फेंका है उसके लिए काम करता है, ऊपर है अगर आपको कोई बग मिले तो मुझे बताएं!

इस पर मेरी स्पिन थी … मैं @ मिजर के जवाब पढ़ता हूं और इसमें कुछ बदलाव किए … और थोड़ी सहायता के साथ मैं इसे प्राप्त कर पा रहा था।

कोड निकाल दिया, बेला देखें।

यहाँ उदाहरण उपयोग है http://jsfiddle.net/9PvMU/1/ – यह स्क्रिप्ट यहाँ भी देखा जा सकता है और समाप्त हो रहा है जिसका उपयोग मैं अंत में किया था … यह कार्य मानता है कि ctx माता-पिता के क्षेत्र में उपलब्ध है … यदि आप नहीं कर सकते हमेशा इसे पास में


संपादित करें

यह पोस्ट पुरानी थी और फ़ंक्शन के मेरे संस्करण थे जो मैं अभी भी साथ छेड़खानी कर रहा था। यह संस्करण मेरी जरूरतों को इस तरह से मिल चुका है और मुझे उम्मीद है कि यह किसी और की मदद कर सकता है


संपादित करें

यह मेरे ध्यान में लाया गया था कि इस कोड में एक छोटा बग था। मुझे इसे फिक्स करने के लिए कुछ समय लगेगा लेकिन यहां इसे अपडेट किया गया है। मैंने खुद का परीक्षण किया है और ऐसा लगता है कि अब उम्मीद के अनुसार काम करना है।

 function fragmentText(text, maxWidth) { var words = text.split(' '), lines = [], line = ""; if (ctx.measureText(text).width < maxWidth) { return [text]; } while (words.length > 0) { var split = false; while (ctx.measureText(words[0]).width >= maxWidth) { var tmp = words[0]; words[0] = tmp.slice(0, -1); if (!split) { split = true; words.splice(1, 0, tmp.slice(-1)); } else { words[1] = tmp.slice(-1) + words[1]; } } if (ctx.measureText(line + words[0]).width < maxWidth) { line += words.shift() + " "; } else { lines.push(line); line = ""; } if (words.length === 0) { lines.push(line); } } return lines; } 

context.measureText(text).width वह वही है जिसे आप खोज रहे हैं …

https://developer.mozilla.org/en/Drawing_text_using_a_canvas#measureText%28%29 को देखें

यदि आप चयनित पाठ को देख सकते हैं, और अपने कैनवास की तुलना में व्यापक देख सकते हैं, तो आप शब्दों को तब तक निकाल सकते हैं जब तक कि पाठ पर्याप्त कम न हो। हटाए गए शब्दों के साथ, आप दूसरी पंक्ति से शुरू कर सकते हैं और ऐसा ही कर सकते हैं।

बेशक, यह बहुत ही कुशल नहीं होगा, इसलिए आप एक शब्द को न निकालने के लिए इसे सुधार सकते हैं, लेकिन यदि आप पाठ देखते हैं तो कैनवास की चौड़ाई से अधिक व्यापक है।

मैंने शोध नहीं किया, लेकिन शायद ये भी जावास्क्रिप्ट पुस्तकालय हैं जो आपके लिए ऐसा करते हैं

कैनवास पर टेक्स्ट को लपेटने के लिए इस स्क्रिप्ट का प्रयास करें।

  <script> function wrapText(ctx, text, x, y, maxWidth, lineHeight) { var words = text.split(' '); var line = ''; for(var n = 0; n < words.length; n++) { var testLine = line + words[n] + ' '; var metrics = ctx.measureText(testLine); var testWidth = metrics.width; if (testWidth > maxWidth && n > 0) { ctx.fillText(line, x, y); line = words[n] + ' '; y += lineHeight; } else { line = testLine; } } ctx.fillText(line, x, y); } var canvas = document.getElementById('Canvas01'); var ctx = canvas.getContext('2d'); var maxWidth = 400; var lineHeight = 24; var x = (canvas.width - maxWidth) / 2; var y = 70; var text = 'HTML is the language for describing the structure of Web pages. HTML stands for HyperText Markup Language. Web pages consist of markup tags and plain text. HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>). HTML tags most commonly come in pairs like <h1> and </h1>, although some tags represent empty elements and so are unpaired, for example <img>..'; ctx.font = '15pt Calibri'; ctx.fillStyle = '#555555'; wrapText(ctx, text, x, y, maxWidth, lineHeight); </script> </body> 

यहां डेमो देखें http://codetutorial.com/examples-canvas/canvas-examples-text-wrap

मैंने इसे यहां से कोड का उपयोग करके संशोधित किया है http://miteshmaheta.blogspot.sg/2012/07/html5-wrap-text-in-canvas.html

http://jsfiddle.net/wizztjh/kDy2U/41/

यहां स्क्रिप्ट से: http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/

मैंने पैराग्राफ समर्थन शामिल करने के लिए विस्तारित किया है। नई पंक्ति के लिए \ n का उपयोग करें

 function wrapText(context, text, x, y, line_width, line_height) { var line = ''; var paragraphs = text.split('\n'); for (var i = 0; i < paragraphs.length; i++) { var words = paragraphs[i].split(' '); for (var n = 0; n < words.length; n++) { var testLine = line + words[n] + ' '; var metrics = context.measureText(testLine); var testWidth = metrics.width; if (testWidth > line_width && n > 0) { context.fillText(line, x, y); line = words[n] + ' '; y += line_height; } else { line = testLine; } } context.fillText(line, x, y); y += line_height; line = ''; } } 

पाठ को इस प्रकार स्वरूपित किया जा सकता है:

 var text = [ "Paragraph 1.", "\n\n", "Paragraph 2." ].join(""); 

उपयोग:

 wrapText(context, text, x, y, line_width, line_height); 

की जगह में

 context.fillText(text, x, y); 

इसे पाठ बॉक्स से सही ढंग से लाइनें लाना चाहिए: –

  function fragmentText(text, maxWidth) { var lines = text.split("\n"); var fittingLines = []; for (var i = 0; i < lines.length; i++) { if (canvasContext.measureText(lines[i]).width <= maxWidth) { fittingLines.push(lines[i]); } else { var tmp = lines[i]; while (canvasContext.measureText(tmp).width > maxWidth) { tmp = tmp.slice(0, tmp.length - 1); } if (tmp.length >= 1) { var regex = new RegExp(".{1," + tmp.length + "}", "g"); var thisLineSplitted = lines[i].match(regex); for (var j = 0; j < thisLineSplitted.length; j++) { fittingLines.push(thisLineSplitted[j]); } } } } return fittingLines; 

और फिर कैनवास पर फ़ेक्ड लाइनें आकर्षित करें: –

  var lines = fragmentText(textBoxText, (rect.w - 10)); //rect.w = canvas width, rect.h = canvas height for (var showLines = 0; showLines < lines.length; showLines++) { // do not show lines that go beyond the height if ((showLines * resultFont.height) >= (rect.h - 10)) { // of the canvas break; } } for (var i = 1; i <= showLines; i++) { canvasContext.fillText(lines[i-1], rect.clientX +5 , rect.clientY + 10 + (i * (resultFont.height))); // resultfont = get the font height using some sort of calculation } 

मैं यहां अपने स्वयं के संस्करण पोस्ट कर रहा हूं क्योंकि यहां उत्तर मेरे लिए अपर्याप्त नहीं थे। मेरे मामले में मापा जाने वाला पहला शब्द, छोटे कैनवास क्षेत्रों से बहुत लंबा शब्दों को अस्वीकार करने में सक्षम होना चाहिए। और मुझे 'ब्रेक + स्पेस,' स्पेस + ब्रेक या डबल ब्रेक / पैराग्राफ-ब्रेक कॉम्बोस के लिए समर्थन की आवश्यकता थी।

 wrapLines: function(ctx, text, maxWidth) { var lines = [], words = text.replace(/\n\n/g,' ` ').replace(/(\n\s|\s\n)/g,'\r') .replace(/\s\s/g,' ').replace('`',' ').replace(/(\r|\n)/g,' '+' ').split(' '), space = ctx.measureText(' ').width, width = 0, line = '', word = '', len = words.length, w = 0, i; for (i = 0; i < len; i++) { word = words[i]; w = word ? ctx.measureText(word).width : 0; if (w) { width = width + space + w; } if (w > maxWidth) { return []; } else if (w && width < maxWidth) { line += (i ? ' ' : '') + word; } else { !i || lines.push(line !== '' ? line.trim() : ''); line = word; width = w; } } if (len !== i || line !== '') { lines.push(line); } return lines; } 

यह लाइन ब्रेक, या पैराग्राफ ब्रेक के किसी भी प्रकार का समर्थन करता है, डबल रिक्त स्थान को निकालता है, साथ ही पैराग्राफ ब्रेक्स के साथ-साथ अग्रणी या पीछे चल रहा है। अगर टेक्स्ट फिट नहीं होता है तो यह एक खाली सरणी देता है या रेखा खींचने के लिए तैयार लाइनों की एक सरणी