अलेका फ़्लटर पर निर्मित एक क्रॉस-प्लेटफ़ॉर्म ड्राइंग ऐप है

अलेका फ़्लटर में लिखा गया एक हल्का, तेज़ ड्राइंग ऐप है। यह हर जगह काम करता है: ब्राउज़र में, डेस्कटॉप पर (विंडोज, मैकओएस, लिनक्स) और मोबाइल डिवाइस (आईओएस, एंड्रॉइड) पर।

हुड के नीचे शुद्ध डार्ट, सामग्री 3 और विवरण पर ध्यान दिया गया है।

अवसर

• फ्रीहैंड ड्राइंग: द्विघात बेज़ियर इंटरपोलेशन के साथ सहज स्ट्रोक।
• 15 रंगों का पैलेट: दृश्य संकेत के साथ त्वरित चयन।
• ब्रश का आकार: 1 से 30 पिक्सेल के स्लाइडर के साथ समायोज्य।
• पूर्ववत करें: अपने स्ट्रोक से पीछे हटें।
• कैनवास साफ़ करें: एक क्लिक से।
• बाढ़ भराव: चिकनी किनारों के लिए सहनशीलता के साथ बीएफएस।
• सहेजना: प्रारूप .aleka (JSON).
• लोड हो रहा है: पहले से सहेजे गए चित्र खोलें और जारी रखें।
• पीएनजी निर्यात: 3x रिज़ॉल्यूशन पर कैनवास कैप्चर करें।
• 🎬 एनिमेशन मोड: टाइमलाइन के साथ फ़्रेम-दर-फ़्रेम एनीमेशन:
  • फ़्रेम जोड़ना और हटाना, प्रत्येक का अपना डिज़ाइन होता है।
  • फ़्रेम अवधि 50 एमएस से 5 सेकंड तक।
  • एफपीएस बदलें: 6, 8, 12, 15, 24, 30 या 60।
  • MP4 में निर्यात करें (डेस्कटॉप पर ffmpeg के माध्यम से, ब्राउज़र में ffmpeg.wasm के माध्यम से)।
• डार्क और लाइट थीम: सामग्री 3, सिस्टम का अनुसरण करती है।

फड़फड़ाहट क्यों?

फ़्लटर आपको बिना कोड डुप्लिकेट किए छह प्लेटफ़ॉर्म के लिए एक एप्लिकेशन लिखने की अनुमति देता है। अलेका केवल डार्ट और फ़्लटर एसडीके की मूल क्षमताओं और न्यूनतम तृतीय-पक्ष निर्भरता का उपयोग करता है: file_picker, image भरने के दौरान पिक्सेल के साथ काम करने के लिए, ffmpeg_wasm ब्राउज़र में वीडियो निर्यात करने के लिए।

वास्तुकला

परियोजना स्वच्छ वास्तुकला और ठोस के सिद्धांतों का पालन करती है:

• PaintCanvasController – स्ट्रोक की स्थिति को नियंत्रित करता है और श्रोता/पर्यवेक्षक पैटर्न को भरता है।
• पेंटटूलबार – पैलेट, स्लाइडर और बटन का यूआई घटक।
• AlekaFile – JSON, PNG कैप्चर में क्रमबद्धता/deserialization।
• मूवीकंट्रोलर – फ़्रेम और एनीमेशन स्थिति का मॉडल।
• वीडियोएक्सपोर्ट – MP4 एन्कोडिंग लॉजिक (डेस्कटॉप/वेब) को इनकैप्सुलेट करता है।

I/O फ़ंक्शंस (saveStrokes, loadStrokes, capturePng, आदि) को इंजेक्टेबल बनाया गया है – परीक्षण के दौरान इन्हें मॉक से बदला जा सकता है। प्रोजेक्ट में 79 परीक्षण हैं: क्रमबद्धता, रद्दीकरण, लोडिंग/सेविंग, पीएनजी और वीडियो निर्यात, फ्रेम मॉडल और टाइमलाइन की जांच करना।

फ़ाइल स्वरूप .aleka

.aleka फ़ाइल पढ़ने योग्य JSON है जिसे किसी भी टेक्स्ट एडिटर में खोला जा सकता है:

  "aleka": "1.0",
  "strokes": [
    {
      "color": 4278190080,
      "strokeWidth": 3.0,
      "points": [[100.0, 200.0], [150.0, 250.0]]
    }
  ]
}

प्रत्येक स्ट्रोक एक रंग (ARGB32), एक मोटाई और बिंदुओं की एक श्रृंखला संग्रहीत करता है। प्रारूप को aleka फ़ील्ड द्वारा संस्करणित किया गया है।

एनीमेशन मोड

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

निर्यात एल्गोरिथ्म सभी फ़्रेमों के माध्यम से पुनरावृत्त होता है, उन्हें RepaintBoundary के माध्यम से कैप्चर करता है, PNG बाइट्स एकत्र करता है और उन्हें एनकोडर में स्थानांतरित करता है। डेस्कटॉप पर, सिस्टम ffmpeg को ब्राउज़र में कहा जाता है, ffmpeg.wasm का उपयोग किया जाता है – WebAssembly के लिए ffmpeg का एक पूर्ण पोर्ट, सीधे ब्राउज़र सैंडबॉक्स में काम करता है।

बाढ़ भराव

भरण कार्यान्वयन रंग सहिष्णुता (<कोड>_kFillTolerance = 1000) के साथ ब्रेडथ फर्स्ट सर्च (बीएफएस) का उपयोग करता है। यह आपको स्ट्रोक के चिकने किनारों को सही ढंग से संभालने की अनुमति देता है – भरण रूपरेखा से आगे नहीं बहता है, लेकिन सीमा पर पारभासी पिक्सेल को पकड़ लेता है। एक खाली कैनवास के लिए, अनावश्यक गणना के बिना एक ठोस भराव बनाया जाता है।

कोशिश करें

अलेका वेब पर और एक मूल एप्लिकेशन के रूप में उपलब्ध है:

demensdeum.com/software/aleka/

स्रोत कोड एमआईटी लाइसेंस के तहत खुला है:

github.com/demensdeum/Aleka