मोज़िला कैनवास

Question

में खींचें और छोड़ें मैं मोज़िला कैनवास में एक ड्रॉइंग फलक (समान लेकिन छोटे संस्करण को प्रवाह चार्ट के लिए देता है) को कार्यान्वित करना चाहता हूं।

क्या इसके लिए कोई समर्थन है?

मैंने अब तक आयताकार बनाने और उन्हें चारों ओर स्थानांतरित करने के लिए jQuery का उपयोग किया है। हालांकि यह यहां आसान है .. मशीनों को बनाने (वस्तुओं के बीच कनेक्शन) एक वास्तविक दर्द है। मैं जावास्क्रिप्ट में पिक्सेल द्वारा पिक्सेल रंग के कुछ कच्चे तरीके का उपयोग कर रहा हूं और यह न तो अच्छा दिख रहा है और न ही स्केलेबल है और कनेक्शन को ऑब्जेक्ट्स के सेट पर चिपकाने के लिए मुझे बहुत सारे फ़ंक्शन बनाने की आवश्यकता है।

क्या कोई जानता है यदि कैनवास और वहां उपलब्ध कार्य मेरे जीवन को आसान बना देंगे।

इस मामले में बेहतर समाधान क्या है इसके लिए कोई संकेतक। (मुझे आशा है कि यह एप्लेट नहीं है)

अग्रिम धन्यवाद।

Answer 1

इस लिंक का अनुसरण करें: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

LMK अगर यह मदद करता है!

के बाद चरणों में मदद कर सकते हैं:
1. बनाएँ और डोम के लिए एक कैनवास जोड़ें:
var myCanvas = document.createElement('canvas'); document.body.appendChild(myCanvas);
2. सेट कैनवास की चौड़ाई-ऊंचाई:
myCanvas.width=200; myCanvas.height=200;
3. कैनवास के संदर्भ जाओ और उस पर ड्राइंग शुरू:
var gc = myCanvas.getContext('2d');
4. कोड आयत बनाने के लिए:,
gc.strokeRect(50,50,50,50);
5. इसके बाद mousehandlers जोड़ने (मो प्रयुक्त, मूसोम, माउसअप)/टचहैंडलर (टचडाउन, टचमॉव, टचअप) कैनवास पर और तदनुसार आंदोलन को संभालें।

Answer 2

हां आप इसके लिए कैनवास का उपयोग कर सकते हैं। साधारण आकृतियों को चित्रित करना और उन्हें स्केल करना बहुत आसान है।

लेकिन अगर आपको उन्हें खींचने के बाद आकार संपादित करने की आवश्यकता है, तो आपको कुछ और काम निवेश करना होगा। कैनवास एक तथाकथित "तात्कालिक मोड" में खींचता है, जिसका अर्थ यह है कि यह नहीं जानता कि आपने इसे पेंट करने के बाद सही तरीके से चित्रित किया है। यह चित्रित आकृतियों का ट्रैक नहीं रखता है। यदि आपको इसकी आवश्यकता है तो आपको इसे स्वयं लागू करना होगा।

मैंने इसे isPointInPath() फ़ंक्शन का उपयोग करके किया है जिसका उपयोग यह जांचने के लिए किया जा सकता है कि कोई उपयोगकर्ता किसी विशेष बिंदु पर क्लिक करता है या नहीं। मैं एमवीसी-पैटर्न (मॉडल-व्यू-कंट्रोलर) का उपयोग करके मेरी चित्रित वस्तुओं का ट्रैक रखता हूं, ताकि मैं यह पता लगा सकूं कि किस आकार पर क्लिक किया गया है।

एक और विकल्प कपड़े.जेएस हो सकता है जो आपको चाहिए जो बहुत करीब होना चाहिए।

Answer 3

इन jQuery प्लगइन्स की या तो ड्राइंग शीशे के लिए महान हैं:

jCanvas सामान्य रूप में बैठक के लिए किसी भी सरल और भी जटिल आकार

sketch.js ड्राइंग के लिए।

वे दोनों उत्तरदायी और संगत दोनों हैं।