मुझे ऐसे एप्लिकेशन को लिखने की आवश्यकता है जो उपयोगकर्ताओं द्वारा बहुत ही सरल डूडल स्वीकार करता है, जैसे tenthousandcents और thesheepmarket में।ब्राउज़र उपयोगकर्ता चित्रों को स्वीकार करने के लिए आप क्या सलाह देते हैं?
उदाहरण के लिए, मैं चाहता हूं कि उपयोगकर्ता अपने माउस का उपयोग करके अपना नाम लिख सकें।
कोई सुझाव?
मुझे इसे स्वयं होस्ट करने की भी आवश्यकता नहीं है। अगर वहां कहीं भी सेवाएं उपलब्ध कराई गई हैं, तो मैं बस इसका उपयोग कर सकता हूं।
केवल HTML का उपयोग करके मूल स्क्रीबलिंग ऐप को रखना मुश्किल नहीं है। मैं आपको इसे तैयार करने के विवरण तैयार करने दूंगा।
मैं क्रॉस ब्राउज़र इवेंट फ्रेमवर्क के रूप में यहां extjs का उपयोग कर रहा हूं, लेकिन आप जो कुछ भी सहज (jquery) के साथ कर सकते हैं उसका उपयोग कर सकते हैं। मैं क्रॉस ब्राउज़र ड्राइंग कार्यक्षमता प्राप्त करने के लिए Raphael का भी उपयोग कर रहा हूं।
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TestPage</title>
<script language="javascript" src="raphael-src.js"></script>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script language="javascript">
scribbler = function (container, width, height) {
this.canvas = Raphael(container, width, height);
this.currentdraw = null;
Ext.get(container).on('mousedown', function(e) {
var el = Ext.get(container);
this.currentdraw = this.canvas.path({ stroke: "black", fill: "none", "stroke-width":4 });
this.currentdraw.moveTo(e.getPageX() - el.getLeft(), e.getPageY() - el.getTop());
}, this);
Ext.get(container).on('mousemove', function(e) {
var el = Ext.get(container);
if (this.currentdraw != null)
{
this.currentdraw.lineTo(e.getPageX() - el.getLeft(), e.getPageY() - el.getTop());
}
}, this);
Ext.get(container).on('mouseup', function(e) {
this.currentdraw = null;
}, this);
}
var scribble;
Ext.onReady(function()
{
scribble = new scribbler("container", 800,600);
}
);
</script>
</head>
<body>
<div id="container" style="position:relative;border:1px solid black;width:640px;height:400px">
</div>
</body>
</html>
आपको जमा करने के लिए एक रूप में विभिन्न स्क्रिबल लाइनों को रिकॉर्ड और स्टोर करना होगा। और सुनिश्चित करें कि माउस पॉइंटर हर समय सही है (यह आईई के तहत एक टेक्स्ट बार है)।
वैसे भी, आनंद लें।
पीएस। मैंने रैफेल और पूर्ण extjs2 पुस्तकालयों को drop.io (3 एमबी, 7zip) में एक कार्य उदाहरण अपलोड किया है।
पीपीएस। मैंने एक कामकाजी उदाहरण अपलोड किया है जो एक बुनियादी (लेकिन बहुत अधिक पूर्ण) नियंत्रण है। inquisitiveturtle देखें।
खैर, दसवीं और एक एडोब फ्लैश एप्लिकेशन है। शुरू करने के लिए सबसे अच्छी जगह फ्लैश सीखना शुरू करना है यदि आप वास्तव में कुछ ऐसा करना चाहते हैं। यदि आप किसी भी ढांचे को नहीं जानते हैं तो वास्तव में सरल डूडल को स्वीकार करने के बारे में कुछ भी आसान नहीं होगा।
मैं फ्लैश सीख सकता हूं ... लेकिन चूंकि मैं इसे एक त्वरित अस्थायी एप्लिकेशन के लिए चाहता हूं, मुझे बस ऐसा नहीं लगता है। मुझे लगा कि कुछ पूर्व-निर्मित होना चाहिए, मैं केवल प्लग-इन और उपयोग कर सकता हूं। – carrier
एक विकल्प जावास्क्रिप्ट के साथ फ़ायरफ़ॉक्स, सफारी और ओपेरा में समर्थित HTML5 <canvas> टैग का उपयोग करना है, फिर छवि डेटा में छवि अपलोड करना है।
यह आईई का उपयोग करके सभी को अवरुद्ध करता है, हालांकि।
एडोब फ्लैश शायद आपका सबसे अच्छा विकल्प है।
अन्य उत्तर राज्य के रूप में, फ्लैश सबसे आसान तरीका होगा।
लेकिन कैनवास पर शासन न करें। कुछ निफ्टी जावास्क्रिप्ट और कुछ प्रोप्रायटरी एमएस गुफ (वीएमएल) के माध्यम से आप emulate canvas behaviour in IE कर सकते हैं।
यदि फ्लैश आपकी बात को पूरा करता है (यह निश्चित रूप से मेरा है) तो यह वास्तव में एक साफ विकल्प हो सकता है।
एक और फ्लैश विकल्प और मैं बस एसवीजी पसंद करता हूं।
आप फ्लैश का उपयोग नहीं करना चाहते हैं, तो मुझे लगता है कि कैनवास शायद आपका सर्वश्रेष्ठ दांव, के रूप में दूसरों का उल्लेख किया है है। आईई में इसके लिए अनुकरण समर्थन के आसपास तैरने वाली कुछ परियोजनाएं हैं, लेकिन सबसे पूर्ण (मेरे ज्ञान के लिए) excanvas है। मोज़िला में इसका उपयोग करने के लिए tutorial है, जैसा कि Bill Mill है। This (पुराना) ट्यूटोरियल AJAX के साथ कैनवास का उपयोग करने के बारे में बात करता है।
हालांकि, अगर आप अपना खुद का निर्माण नहीं करना चाहते हैं और आप बस क्षमता चाहते हैं, तो आप Dabbleboard (जिसमें एपीआई है) या skrbl (जिसमें एक एम्बेड करने योग्य विजेट है) जैसे ऑनलाइन व्हाइटबोर्ड देखना चाहते हैं।
अब तक, सबसे अच्छा और सबसे आसान समाधान मैं पाया है कुछ इस तरह उपयोग करने के लिए है: http://www.flashnifties.com/flash_guestbook.php
मैं <canvas> टैग का उपयोग कर की सिफारिश करेंगे; यह सफारी, क्रोम, फ़ायरफ़ॉक्स और ओपेरा में मूल रूप से उपलब्ध है, और आईई में ExplorerCanvas का उपयोग करके उपलब्ध है, जो एक साधारण रैपर है जो आईवी की वीएमएल भाषा को कैनवास संगत इंटरफेस से सुलभ बनाता है। तत्व का उपयोग कर ड्राइंग ऐप बनाने के तरीके पर ट्यूटोरियल के लिए this article देखें। आप searching Google द्वारा बहुत से दस्तावेज़ और ट्यूटोरियल पा सकते हैं।
एक ओपन-सोर्स <canvas> आधार ड्राइंग ऐप है जिसे आप here के साथ खेल सकते हैं और डाउनलोड कर सकते हैं।
आप वे कैसे कर Drawing in Google Docs पर एक नज़र ले सकता है:
गूगल, फ़ायरफ़ॉक्स, ओपेरा, Chrome और अन्य ब्राउज़र है कि यह और VML इंटरनेट एक्सप्लोरर में समर्थन में एसवीजी का उपयोग करता है तो आप की जरूरत नहीं है तृतीय- पार्टी प्लग-इन
आप Shi-painter जैसे जावा एप्लेट का उपयोग कर सकते हैं जैसे oekaki कार्यान्वयन, जैसे the one at iiichan.net।
अस्वीकरण: मैं इन दिनों जावा एप्लेट्स से जुड़े कलंक को समझता हूं, लेकिन मैंने सोचा कि मैं इसे पूर्णता के लिए शामिल करूंगा। ;)
शांत, मैं इसे आज़माउंगा। – carrier
क्या आप रिकॉर्डिंग और स्क्रिबल लाइनों के भंडारण पर विस्तार करने में सक्षम नहीं होंगे? यह मेरी जरूरतों के लिए बहुत अच्छा लग रहा है। – carrier
उम हाँ, वह मजेदार था :) अतिरिक्त पीपीएस देखें। –