दिलचस्प पोस्ट
AngularJS में पृथक गुंजाइश के बिना निर्देशक से एक नियंत्रक समारोह को कॉल करें फ़ायरफ़ॉक्स सही डिफ़ॉल्ट चयन विकल्प क्यों नहीं दिखाता है? क्या आप एचटीएमएल 5 वेब ऐप से देशी कैमरा ऐप लॉन्च कर सकते हैं? एक्सएसएलटी कॉनटैट स्ट्रिंग, पिछले कॉमा को हटा दें क्रोम एक्सटेंशन – ऑब्जेक्ट पेज से लेकर संदर्भ स्क्रिप्ट तक क्यों session_destroy () काम नहीं कर रहा है लेबल का पता (एमएसवीसी) PHP: सेना फ़ाइल डाउनलोड और IE, अभी तक फिर से एक्सेस / वीबीए का उपयोग करके क्लिपबोर्ड पर कैसे प्रतिलिपि करें? जावा में सीरियललाइजेशन का उद्देश्य क्या है? डब्लूसीएफ सेवा में टाइमआउट वैल्यू को बढ़ाना गतिविधि खत्म करने के लिए मैं एनीमेशन कैसे जोड़ सकता / सकती हूं? दर्ज किए गए संख्याओं के सेट से मैं अधिकतम और न्यूनतम मान कैसे प्राप्त करूं? HTML में एक तत्व (एंकर लिंक) पर टैबस्टॉप को रोकें Jqgrid में कॉलम रोकना योग्य है

कैसे कैनवास पाठ चयन योग्य बनाने के लिए?

किसी भी सुझाव की अत्यधिक सराहना की है

Solutions Collecting From Web of "कैसे कैनवास पाठ चयन योग्य बनाने के लिए?"

पाठ चयन में इसके कई घटक हैं, कुछ दृश्य, कुछ गैर-दृश्य।

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

माप पाठ का उपयोग करके, अपनी पाठ स्ट्रिंग के साथ, आप यह पहचान सकते हैं कि जब आप किसी छवि पर क्लिक करते हैं तो कर्सर को किस पत्र पर लाना चाहिए?

ctx.fillText("My String", 100, 100); textWidth = ctx.measureText("My String").width; 

आपको अभी भी "फ़ॉन्ट" संपत्ति से फ़ॉन्ट ऊँचाई को पार्स करना होगा, क्योंकि यह वर्तमान में टेक्स्ट मैट्रिक्स में शामिल नहीं है। कैनवास पाठ मूलभूत रूप से डिफ़ॉल्ट रूप से गठित है।

इस जानकारी के साथ, आपके पास अब एक बाउंडिंग बॉक्स है, जिसे आप चेक कर सकते हैं। यदि कर्सर बाउंडिंग बॉक्स के अंदर है, तो अब आपके लिए यह दुर्भाग्यपूर्ण कार्य है कि कौन सा पत्र जानबूझकर चुने गए थे? जहां आपके कर्सर की शुरुआत होनी चाहिए। इसमें माप कई बार कॉलिंग शामिल हो सकता है

उस बिंदु पर आप जानते हैं कि कर्सर कहाँ जाना चाहिए; आपको अपने पाठ स्ट्रिंग को टेक्स्ट स्ट्रिंग के रूप में संग्रहित करने की आवश्यकता होगी, फिर भी, एक चर में, बिल्कुल।

एक बार जब आप अपनी सीमा के शुरुआती और रोक बिंदुओं को परिभाषित करते हैं, तो आपको एक चयन संकेतक खींचना होगा। यह एक नई परत (एक दूसरा कैनवास तत्व) में किया जा सकता है, या XOR रचना मोड का उपयोग करके एक आयताकार चित्रण कर सकता है। यह एक भरे हुए आयताकार के शीर्ष पर स्थित पाठ को केवल समाशोधन और पुनरीक्षण करके भी किया जा सकता है।

सभी ने बताया, पाठ चयन, कैनवस में पाठ संपादन कार्यक्रम के लिए काफी श्रमसाध्य हैं, और पहले से लिखे गये घटकों का पुन: उपयोग करने के लिए बुद्धिमान होगा, बेस्पिन एक उत्कृष्ट उदाहरण है

मैं अपनी पोस्ट को संपादित करूंगा, मुझे अन्य सार्वजनिक उदाहरणों में मिलना चाहिए। मेरा मानना ​​है कि बेस्पीन ग्रिड-आधारित चयन विधि का उपयोग करता है, संभवत: एक मोनोस्पेस्ड फ़ॉन्ट की आवश्यकता होती है। Ligatures, कर्निंग, द्वि-दिशात्मकता और फ़ॉन्ट रेंडरिंग की अन्य उन्नत सुविधाओं के लिए अतिरिक्त प्रोग्रामिंग की आवश्यकता होती है; यह एक जटिल समस्या है

कैनवास टैग की प्रकृति के कारण कैनवास तत्वों में खींचा पाठ का चयन नहीं किया जा सकता है लेकिन कुछ कामकाज हैं, जैसे टाइपफेसजेएस में इस्तेमाल किया गया है।

एक और समाधान स्ट्रोक टेक्स्ट या fillText का उपयोग करने के बजाय तैनात किए गए तत्वों के साथ पाठ जोड़ना होगा।

यदि आपके पास चयन योग्य पाठ होना आवश्यक है तो यह सिर्फ एक div या जो कुछ भी बनाने के लिए बहुत आसान होगा, और कैनवास के शीर्ष पर उसे स्थान दें जहां आप टेक्स्ट को दिखाना चाहते हैं।

कैनवास में पाठ का चयन करने के लिए कोई भी अंतर्निहित तंत्र नहीं है, इसलिए आपको अपना स्वयं का टेक्स्ट रेंडरिंग और कोड का चयन करना होगा – जो सही प्राप्त करने के लिए मुश्किल हो सकता है।

मैं EaselJS लाइब्रेरी का उपयोग करने का सुझाव दूंगा , आप प्रत्येक अक्षर को एक बच्चे के रूप में जोड़ सकते हैं और उस ऑब्जेक्ट में माउस इवेंट भी जोड़ सकते हैं, इसकी एक अद्भुत पुस्तकालय, इसे देखिए !

आप बेस्पिन से कुछ विचार प्राप्त कर सकते हैं।

उन्होंने पाठ चयन , स्क्रॉल सलाखों, कर्सर ब्लिंकिंग इत्यादि के साथ कैनवास का उपयोग करते हुए जावास्क्रिप्ट में एक टेक्स्ट एडिटर को कार्यान्वित किया है

सोर्स कोड

FabricJS में अब कैनवास तत्व के बाहर वस्तुओं के साथ बातचीत करने की क्षमता है – जैसे यह डेमो एक बटन दिखाता है जो एक कैनवास तत्व में लोड की गई छवि से जुड़ा हुआ है।

समान दृष्टिकोण का उपयोग किसी भी चाल घटना को हुक करके, तत्व के बाउंडिंग बॉक्स को प्राप्त करने और एचटीएमएल तत्व को फिर से स्थानांतरित करके राफेल जैसे अन्य लिब्स में किया जा सकता है।

कैनवास सिर्फ एक ड्राइंग सतह है आप रेंडर करते हैं और परिणाम पिक्सल है। इसलिए, आपको किसी भी प्रकार की डेटा संरचना में कैनवास में प्रदान किए गए सभी टेक्स्ट की स्थिति को ट्रैक करना होगा, जिसे आप माउस इवेंट्स के दौरान प्रोसेस करेंगे।

एक सरल जवाब होगा: या तो कैनवास के बजाय एचटीएमएल या एसवीजी का उपयोग करें जब तक आपको वास्तव में कमलेवल कंट्रोल कैनवास ऑफर की डिग्री की आवश्यकता न हो।