जावास्क्रिप्ट ड्रा गतिशील रेखा

Question

मैं उपयोगकर्ता को एक रेखा (छवि पर) खींचने के लिए जावास्क्रिप्ट कोड की तलाश में हूं।

बस के रूप में में फ़ोटोशॉप लाइन उपकरण (उदाहरण के लिए):

उपयोगकर्ता छवि पर क्लिक करता है, माउस खींच लेता है (जबकि प्रारंभ बिंदु और माउस बिंदु के बीच की रेखा को गतिशील माउस खींचें पर तैयार किया जाता है)।

मुझे पृष्ठ को प्रारंभ और अंत निर्देशांक भेजने के लिए एक कॉल करने योग्य फ़ंक्शन की भी आवश्यकता होगी।

मैं क्षेत्र के चयन के लिए यह बहुत ही अच्छा स्क्रिप्ट मिल गया है: http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/

और मैं (जे एस में और अन्य आकृतियों) लाइनों ड्राइंग के लिए कई स्क्रिप्ट मिल गया है, लेकिन मैं के लिए क्या देख रहा हूँ नहीं मिल सका ।

धन्यवाद

Answer 1

चूंकि ड्राइंग का कोई मानक तरीका नहीं है, यदि आप पुराने ब्राउज़र और आईई, का समर्थन करना चाहते हैं तो आपको लाइब्रेरी का उपयोग करने की आवश्यकता होगी। पुस्तकालय SVG के साथ बैठक के पार मंच संबंधी मामलों को संभालते या जाएगा माइक्रोसॉफ्ट के VML

मेरा सुझाव है Raphael JS

Answer 2

छवि प्रदर्शित करने canvas तत्व का उपयोग पर विचार करें। फिर, उस पर एक रेखा (या कुछ और) ड्राइंग करना तुच्छ है।

Answer 3

यदि आपका गणित काफी अच्छा है, यह संभव है (पागल हालांकि) सबसे आधुनिक के लिए कैनवास टैग के बिना यह करने के लिए से एक का उपयोग ब्राउज़रों (जैसा उचित हो):

• -webkit-transform: rotate
• -moz-transform: rotate
• -o-transform-rotate
• The Trident Matrix Filter

जैसे बना कर। उदाहरण के साथ एक 1 पीएक्स उच्च div। अपनी 'लाइन' के लिए एक सीमा-शीर्ष, और माउस ड्रैग ईवेंट का उपयोग करके स्थिति को घुमाएं और घुमाएं।

पागलपन इस तरह से है लेकिन यह एक बहुत मजेदार अभ्यास होगा। (आपको राफेल जेएस जैसे कुछ का उपयोग करना चाहिए, जो क्रॉस ब्राउजर और सीन है - ऊपर देखें)

Answer 4

रैफेल.जेएस जावास्क्रिप्ट (एमआईटी लाइसेंस प्राप्त) के लिए हल्के प्रतिपादन उपकरण है जो एफएफ, सफारी, क्रोम और आईई 6 + में काम करता है।

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

http://raphaeljs.com/

उदा

// Creates canvas 320 × 200 at 10, 50 
var paper = Raphael(10, 50, 320, 200); 

// Creates circle at x = 50, y = 40, with radius 10 
var circle = paper.circle(50, 40, 10); 
// Sets the fill attribute of the circle to red (#f00) 
circle.attr("fill", "#f00"); 

// Sets the stroke attribute of the circle to white 
circle.attr("stroke", "#fff"); 

मैं इसे का उपयोग किया है, जबकि खींच एक लाइन आकर्षित करने के लिए और उपयोग

Answer 5

मैं ऐसी ही कुछ पर काम कर रहा हूँ में इसकी आसानी की पुष्टि कर सकते हैं। कैनवास पर एक रेखा खींचना बहुत आसान है। आप यहां मेरे कोड से ले सकते हैं।

http://p-func.com/html5_test/test2.html

बस mousedown श्रोता का पालन करें।

हालांकि मुझे छवियों को लोड करना चाहते समय पाया गया है, कि रैफेल लाइब्रेरी का उपयोग करना बेहतर हो सकता है। मैंने यह देखा क्योंकि कैनवास एक सपाट छवि की तरह काम करता है। इसलिए यदि मैं इसके लिए एक लक्ष्य जोड़ना चाहता हूं, तो उपयोगकर्ता को उस छवि में हेरफेर करने की अनुमति दें, यह मुझे नहीं देगा (जब तक ऐसा कुछ न हो जो मुझे याद नहीं है)।

राफेल आपको आकर्षित करने और अभी भी उन चित्रों और छवियों का उपयोग वस्तुओं के रूप में करने की अनुमति देता है।

Answer 6

, जावास्क्रिप्ट में लाइनों ड्राइंग किसी भी बाहरी पुस्तकालयों की आवश्यकता के बिना के लिए एक पार ब्राउज़र समाधान, यहां पाया जा सकता: http://bytes.com/topic/javascript/answers/88771-drawing-vector-lines-javascript

यह IE सहित सभी ब्राउज़रों में काम करता है।

Answer 7

समर्थित होने पर आप कैनवास का उपयोग कर सकते हैं, IE में आप फ़िल्टर घुमाने वाले फ़ंक्शन का उपयोग करते हैं। के रूप में यहां दोनों पर काम करता है: canvas` अपेक्षाकृत आधुनिक इसलिए केवल हाल के ब्राउज़रों यह है

http://www.gatekeeperel.co.uk/interactives/web.html