एचटीएमएल 5 कैनवास

Question

पर घुमाए गए पाठ को चित्रित करने के लिए मुझे विकसित होने वाले एक वेब एप्लिकेशन का हिस्सा मुझे विभिन्न जानकारी प्रदर्शित करने के लिए बार ग्राफ बनाने की आवश्यकता है। मुझे लगा, अगर उपयोगकर्ता का ब्राउज़र सक्षम है, तो मैं उन्हें HTML5 कैनवास तत्व का उपयोग करके आकर्षित करूंगा। मुझे अपने ग्राफ के लिए रेखाएं और बार खींचने में कोई समस्या नहीं है, लेकिन जब अक्ष, बार, या रेखाओं को लेबल करने की बात आती है तो मैं एक झगड़ा में भाग गया। मैं घुमावदार पाठ को कैनवास तत्व पर कैसे आकर्षित करूं ताकि यह उस लेबल के साथ हो जो लेबलिंग कर रहा हो? एक जोड़े उदाहरणों में शामिल हैं:

• घुमाएँ पाठ 90 डिग्री काउंटर दक्षिणावर्त y- अक्ष
• घुमाएँ पाठ 90 डिग्री काउंटर लेबल करने के लिए एक ऊर्ध्वाधर बार ग्राफ पर सलाखों के लेबल करने के लिए
• घुमाएँ पाठ एक मनमाना दक्षिणावर्त लाइन लाइन पर लाइन लाइन

किसी भी पॉइंटर्स की सराहना की जाएगी। http://www.rgraph.net/ आप उनके तरीकों के इंजीनियर को बदलने में सक्षम हो सकता है ....

तुम भी Flot (http://code.google.com/p/flot/) या GCharts की तरह कुछ पर विचार हो सकता: (http://www.maxb.net/scripts/jgcharts/include/demo/#1) यह काफी के रूप में अच्छा नहीं है

Answer 1

दूसरों की तरह उल्लेख किया गया है, तो आप शायद मौजूदा ग्राफिंग समाधान का पुन: उपयोग करना चाहते हैं, लेकिन पाठ घूर्णन करना बहुत मुश्किल नहीं है।

ctx.rotate(Math.PI*2/(i*6)); 

angle is in radians: कुछ भ्रामक बिट (मेरे लिए) है कि आप पूरे संदर्भ बारी बारी से और फिर उस पर आकर्षित है। कोड taken from this example है, जो मुझे लगता है कि transformations part of the MDC canvas tutorial के लिए बनाया गया था।

अधिक संपूर्ण समाधान के लिए कृपया the answer below देखें।

Answer 2

यहाँ homebrew के लिए एक एचटीएमएल 5 विकल्प है , लेकिन लागू करने के लिए पूरी तरह से पीछे संगत और डरावना आसान है।

Answer 3

इसी तरह की समस्याओं वाले अन्य लोगों की सहायता के लिए इसे पोस्ट करने में प्रयास करें। मैंने इस मुद्दे को पांच चरणों के दृष्टिकोण के साथ हल किया - संदर्भ को सहेजें, संदर्भ का अनुवाद करें, संदर्भ घुमाएं, पाठ खींचें, फिर संदर्भ को अपने सहेजे गए राज्य में पुनर्स्थापित करें।

मैं अनुवादों के बारे में सोचता हूं और संदर्भ में बदल जाता हूं क्योंकि कैनवास पर समन्वय ग्रिड को घुमाता है। डिफ़ॉल्ट रूप से उत्पत्ति (0,0) कैनवास के ऊपरी बाएं कोने में शुरू होती है। एक्स बाएं से दाएं बढ़ता है, वाई ऊपर से नीचे तक बढ़ता है। यदि आप अपने बाएं हाथ पर "एल" डब्ल्यू/आपकी इंडेक्स उंगली और अंगूठे बनाते हैं और इसे अपने अंगूठे से नीचे रख देते हैं, तो आपका अंगूठे वाई बढ़ने की दिशा में इंगित करेगा और आपकी इंडेक्स उंगली दिशा में इंगित करेगी एक्स बढ़ रहा है। मुझे पता है कि यह प्राथमिक है, लेकिन अनुवाद और घूर्णन के बारे में सोचते समय मुझे यह उपयोगी लगता है। यहां बताया गया है:

जब आप संदर्भ का अनुवाद करते हैं, तो आप समन्वय ग्रिड की उत्पत्ति कैनवास पर एक नए स्थान पर ले जाते हैं। जब आप संदर्भ को घुमाते हैं, तो अपने बाएं हाथ से बने "एल" को घड़ी की दिशा में घुमाने के बारे में सोचें, जो कि मूल के बारे में रेडियंस में निर्दिष्ट कोण द्वारा इंगित राशि है। जब आप स्ट्रोक करें या भरें टेक्स्ट, नए संरेखित अक्षों के संबंध में अपने निर्देशांक निर्दिष्ट करें। अपने पाठ को उन्मुख करने के लिए, यह नीचे से ऊपर तक पठनीय है, आप नीचे दिए गए स्थान पर अनुवाद करेंगे जहां आप अपने लेबल शुरू करना चाहते हैं, -90 डिग्री से घूमते हैं और भरें या स्ट्रोक टेक्स्ट, घुमावदार एक्स अक्ष के साथ प्रत्येक लेबल को ऑफ़सेट करते हैं।कुछ इस तरह काम करना चाहिए:

context.save(); 
context.translate(newx, newy); 
context.rotate(-Math.PI/2); 
context.textAlign = "center"; 
context.fillText("Your Label Here", labelXposition, 0); 
context.restore(); 

.restore() संदर्भ वापस राज्य यह था जब तुम .save() कहा जाता है करने के लिए रीसेट करता है - वापस करने के लिए "सामान्य" बातें लौटने के लिए काम।

---

Answer 4

हालांकि यह पिछले उत्तर का अनुवर्ती प्रकार है, यह थोड़ा (उम्मीद है) जोड़ता है।

मुख्य रूप से जो मैं स्पष्ट करना चाहता हूं वह यह है कि आमतौर पर हम draw a rectangle at 10, 3 जैसी चीजों को चित्रित करने के बारे में सोचते हैं।

तो अगर हम इस तरह के बारे में सोचते हैं: move origin to 10, 3, तो draw rectangle at 0, 0। तब हमें बस इतना करना है कि बीच में घूमना है।

एक और बड़ा मुद्दा पाठ का संरेखण है। पाठ को 0, 0 पर खींचना सबसे आसान है, इसलिए सही संरेखण का उपयोग करके हमें टेक्स्ट चौड़ाई को मापने के बिना ऐसा करने की अनुमति मिल सकती है।

हमें अभी भी पाठ को लंबवत रूप से केंद्रित करने के लिए उस राशि को स्थानांतरित करना चाहिए, और दुर्भाग्यवश कैनवास के पास बड़ी लाइन ऊंचाई समर्थन नहीं है, इसलिए यह अनुमान है और चीज़ की जांच करें (अगर कुछ बेहतर है तो मुझे सही करें)।

मैंने 3 उदाहरण बनाए हैं जो 3 संरेखण के साथ एक बिंदु और एक पाठ प्रदान करते हैं, यह दिखाने के लिए कि स्क्रीन पर वास्तविक बिंदु क्या है जहां फ़ॉन्ट जाएगा।

var font, lineHeight, x, y; 

x = 100; 
y = 100; 
font = 20; 
lineHeight = 15; // this is guess and check as far as I know 
this.context.font = font + 'px Arial'; 


// Right Aligned 
this.context.save(); 
this.context.translate(x, y); 
this.context.rotate(-Math.PI/4); 

this.context.textAlign = 'right'; 
this.context.fillText('right', 0, lineHeight/2); 

this.context.restore(); 

this.context.fillStyle = 'red'; 
this.context.fillRect(x, y, 2, 2); 


// Center 
this.context.fillStyle = 'black'; 
x = 150; 
y = 100; 

this.context.save(); 
this.context.translate(x, y); 
this.context.rotate(-Math.PI/4); 

this.context.textAlign = 'center'; 
this.context.fillText('center', 0, lineHeight/2); 

this.context.restore(); 

this.context.fillStyle = 'red'; 
this.context.fillRect(x, y, 2, 2); 


// Left 
this.context.fillStyle = 'black'; 
x = 200; 
y = 100; 

this.context.save(); 
this.context.translate(x, y); 
this.context.rotate(-Math.PI/4); 

this.context.textAlign = 'left'; 
this.context.fillText('left', 0, lineHeight/2); 

this.context.restore(); 

this.context.fillStyle = 'red'; 
this.context.fillRect(x, y, 2, 2); 

लाइन this.context.fillText('right', 0, lineHeight/2); मूल रूप से 0, 0 है, सिवाय इसके कि हम पाठ के लिए थोड़ा हट बिंदु के पास केंद्रित किए जाने की