स्रोत कोड के रेखापुंज के बारे में

मैं समय-समय पर देखता हूं कि लोग ब्लॉग पर चित्रों में कोड का अनुवाद कैसे करते हैं ताकि किसी विशेष प्लेटफॉर्म के छोटी गाड़ी के इंजन से निपटने के लिए नहीं। ज्यादातर मामलों में, लेखक सिर्फ एक स्क्रीनशॉट लेते हैं, लेकिन मैं अधिक प्रत्यक्ष तरीके से गया - मैंने अपने खुद के संपादक में कोड "rasterize" करने की क्षमता में बनाया। यह पोस्ट इस बारे में है कि मैंने इसे कैसे किया। पोस्ट भी एक उदाहरण है कि वह क्या वर्णन करता है, क्योंकि कोड वास्तव में यहाँ rasterized है। सभी स्रोत यहां हैं: http://butbucket.org/nesteruk/typografix




पहले से ही वाक्यविन्यास हाइलाइटिंग के लिए समाधान हैं, जो उदाहरण के लिए हब्रेडाइटर में उपयोग किया जाता है। समाधान स्वयं इस परियोजना पर आधारित है, जिसे मैंने व्यक्तिगत रूप से लिया था और उसी Habré पर Boo जैसी भाषाओं की बैकलाइटिंग करने के लिए थोड़ा संशोधित किया था। लेकिन परिणामी HTML को एक तस्वीर में कैसे व्यवस्थित किया जाए? यह स्पष्ट है कि आप उदाहरण के लिए, एक वास्तविक ब्राउज़र (उसी IE, उदाहरण के लिए) का उपयोग कर सकते हैं, इसमें HTML प्रदर्शित करें, एक स्क्रीनशॉट लें, क्लिपिंग करें, और आप कर रहे हैं। लेकिन मुझे दो कारणों से यह तरीका पसंद नहीं आया:

• सबसे पहले, इस तरह का एक समाधान बहुत नाजुक है - ब्राउज़र ऑटोमेशन के साथ काम करने का व्यापक अनुभव होने के बाद, मैं यह कहने की हिम्मत करता हूं कि इस तरह के ऑपरेशन ब्राउज़र की परवाह किए बिना नियमित रूप से दुर्घटनाग्रस्त हो जाएंगे (और IE पाठ के बेहतर प्रतिपादन के कारण इसे किसी भी तरह से उपयोग करना चाहेंगे)।
• दूसरे , उस समय तक मेरे पास पहले से ही अपना "रैस्टराइज़र" था, लेकिन मैं अपने निवेशित प्रयासों को खोना नहीं चाहता था।

आइए सबसे पहले टेक्स्ट रेस्टराइज़र के बारे में बात करते हैं कि यह किस तरह का जानवर है और इसकी ज़रूरत क्यों थी।


इस लेख में देखें सुर्खियाँ? वे ग्राफिक्स, jpg फाइलें हैं। स्वाभाविक रूप से, मैंने उन्हें फ़ोटोशॉप में व्यक्तिगत रूप से नहीं बनाया, ताकि मैं बाद में उन्हें पोस्ट में सम्मिलित कर सकूं - इसके लिए, मैं बस एक रैस्टराइज़र का उपयोग करता हूं, अर्थात, एक घटक जो इनपुट पर कुछ मार्कअप ले सकता है (एक ला HTML, लेकिन अधिक दिलचस्प), लेकिन आउटपुट एक ग्राफिक फ़ाइल देता है।

यहाँ एक छोटा सा उदाहरण है: यदि मैं मार्कअप में Hello, World लिखता हूँ, तो मुझे मिलेगा




तदनुसार, मेरे द्वारा उपयोग किया जाने वाला मार्कअप मुझे सामान्य बोल्ड और इटैलिक, और ओटी की विशेषताओं जैसे कि राजधानियों, स्नायुबंधन, आदि को व्यवस्थित करने का अवसर देता है।




यह सब टैग्स की मदद से किया जाता है जैसे कि [b] , [i] , [sw] , आदि। पाठ के प्रत्येक अलग-अलग खंड के लिए, निम्न संरचना मौजूद है:





सभी पाठ (या कोड) जो rasterized है, इस प्रकार ऐसे तत्वों का सिर्फ एक क्रम है। हमारे पास एक MarkupParser वर्ग है जो नियमित पाठ तुलना का उपयोग करके मार्क अप करता है, मार्कअप को एक या किसी अन्य तत्व पर लागू करता है।





यह सब एक पुनरावर्ती पार्सर का उपयोग करता है जो पाठ से मार्कअप को अलग करता है।



मूल तत्व निम्नलिखित विधि है, जिसे संपादक कहते हैं (यह डब्ल्यूपीएफ में ही लिखा गया है)।



जैसा कि आप देख सकते हैं, पाठ स्वरूपण का एक "प्रोटोटाइप" विधि को पारित किया गया है, जो उन सभी तत्वों पर लागू होगा जिनके लिए हेडसेट, फ़ॉन्ट आकार, रंग, आदि को फिर से परिभाषित नहीं किया गया है।

अब इस बारे में कि यह कैसे व्यवस्थित है। कुछ कदम हैं। सबसे पहले, चूंकि मैं DirectWrite का उपयोग करता हूं (एक अनुस्मारक: .Net के लिए DirectWrite "ड्राइवर" तैयार है, लेकिन यह 64-बिट वातावरण में काम नहीं करता है), मेरे पास बुनियादी ढांचे का एक समुद्र है जो COM का भी उपयोग करता है।



यह सब "अच्छाई" एक तरह से या किसी अन्य प्रकार से बिटमैप या फ़ोटोमेटिरोवनीया पाठ के निर्माण में प्रकट होता है। सबसे दिलचस्प बात IDWriteTypography - यह वह जगह है जहाँ एक विशेष पाठ के लिए OT सुविधाओं के सेट को परिभाषित किया गया है।

फिर प्रोटोटाइप को पार्स किया जाता है, और मार्कअप को पार्स किया जाता है:



इसके बाद, प्रत्येक तत्व को बायपास किया जाता है और इसके ग्राफिक गुण सेट किए जाते हैं जिनकी आवश्यकता होती है। यहाँ एक छोटा सा उदाहरण है कि यह कितना सरल है:



उत्पन्न रेंडर टार्गेट की सामग्री को बाद में उस बिटमैप के बाइट्स (अर्थ System.Drawing.Bitmap ) पर कॉपी किया जाता है, जिसे हम P / Invoke से गुजरने से पहले "लॉक" कर देते हैं।


इसलिए, हमारे पास एचटीएमएल और एक रैस्टराइज़र है, हमें सही मार्कअप प्राप्त करने की आवश्यकता है। यह बस किया जाता है:



एक छोटी सी समस्या है - हमें [ to to] को बदलना होगा क्योंकि वर्ग कोष्ठक मार्कअप के लिए उपयोग किया जाता है। चिंता की कोई बात नहीं। अब अंतिम कदम एक खाली Bitmap तैयार करना है और इसे हमारे DirectWrite rasterizer का उपयोग करके ड्रा करना है:





रैस्टराइज़र के तहत मौजूदा बुनियादी ढांचे को फिट करना इतना आसान था। मुझे आशा है कि आप पहले से ही उसके काम के परिणाम देखेंगे। हां, निश्चित रूप से, आप इस तरह के पाठ के साथ कट और पेस्ट नहीं कर सकते हैं, लेकिन इसके अलावा, सब कुछ बहुत सुंदर है (IMHO), और सबसे महत्वपूर्ण बात - आप कोड में सभी प्रकार के एनोटेशन के लिए rasterization सुविधा का उपयोग शुरू कर सकते हैं। मुझे लगता है कि यह एक कोशिश के काबिल है।