डीओएम से खींचें, कैनवास या एसवीजी

Question

में ड्रॉप करें मैं एक ऐसा टूल बनाने जा रहा हूं जो उपयोगकर्ताओं को सूची से आइटम खींचने और पेड़/संगठन चार्ट बनाने के लिए कैनवास में छोड़ने की अनुमति देता है।

सोच रहा था कि एक नियमित ली-नोड को कैनवास/एसवीजी पर खींचना और कैनवास पर कहां जाना है, और कौन सा तत्व गिराया जा रहा है?

शायद आपके पास कैनवास/svg का उपयोग करने से बेहतर सुझाव है? मेरी एकमात्र आवश्यकता यह है कि उपयोगकर्ता ग्राफ/संगठन चार्ट बनाने के लिए सूची से आइटम को आसानी से खींचने में सक्षम होना चाहिए।

Answer 1

हां, किसी अन्य तत्व पर/खींचना संभव है और यह निर्धारित करें कि आप उस तत्व पर कहां हैं। एसवीजी के लिए, आप माउस से बदलने के लिए निम्नलिखित की तरह कोड का उपयोग करना चाहेंगे स्थानीय अंतरिक्ष कैनवास के लिए निर्देशांक:

function mouseXY(evt){ 
    var mxy = svg.createSVGPoint(); 
    mxy.x = evt.clientX; 
    mxy.y = evt.clientY; 
    return mxy.matrixTransform(svg.getScreenCTM().inverse()); 
} 

कैनवास के लिए, आप यह सुनिश्चित करें कि कैनवास के .style.offsetWidth अपने width रूप में ही है चाहते हो सकता है , या फिर स्थानीय अंतरिक्ष में जाने के लिए उनके बीच परिवर्तन। (यदि आप अपने कैनवास के प्रदर्शन का आकार बदलने के सिर्फ अगर कर रहे हैं।)

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

मैं व्यक्तिगत रूप से सुझाव देता हूं कि आप सीधे अपने एसवीजी को एम्बेड करें एक्सएचटीएमएल में, <object> या <img> के माध्यम से, ताकि आपके पास सौदा करने के लिए एक document हो। http://phrogz.net/SVG/convert_path_to_polygon.xhtml

Answer 2

आप, यह राफेल गति विकास के साथ आसान लगता है अपने एसवीजी बना सकते हैं और

http://irunmywebsite.com/raphael/svgsource.php पर कनवर्टर उपकरण में यह छोड़ देंगे: यहाँ है कि एक ही एक्सएचटीएमएल पेज में कई एसवीजी के एम्बेड करता है मेरा एक उदाहरण पृष्ठ है खींचें ड्रॉप उदाहरण

http://irunmywebsite.com/raphael/additionalhelp.php?q=bearbones