क्या मैं jQuery का उपयोग कर एक रेखा खींच सकता हूं?

Question

मैं एक वेब अनुप्रयोग जहाँ मैं उपयोगकर्ता चाहते निम्नलिखित तरीके से एक लाइन आकर्षित करने के लिए होता है: वह पर क्लिक करता है Point1 और वह माउस ले जाता है, वर्तमान माउस स्थिति के लिए से रेखा खींचना Point1 और , जब पर क्लिक करें प्वाइंट 2 अंतिम पंक्ति को पॉइंट 1 से पॉइंट 2 पर खींचें।

मैं jQuery और/या उसके प्लगइन का उपयोग करके इसे कैसे कर सकता हूं?

Answer 1

आप इसे jQuery और क्लासिक HTML के साथ नहीं कर सकते हैं।

1. आप (IE8- http://code.google.com/p/svgweb/ के लिए + svgweb) एसवीजी का उपयोग कर एसवीजी डायनामिक रूप से तैयार किया जा सकता है यह कर सकते हैं। jQuery + svgweb पूरी तरह से काम कर रहे हैं, आपको सिर्फ यह जानने की जरूरत है कि एसवीजी नोड्स कैसे बनाएं और आपको केवल इस नोड्स को जरूरी करने की आवश्यकता है। ज्यादातर मामलों में jquerifiing के बाद केवल एक ही विधि attr()

2. आप इसे राफेल http://raphaeljs.com/ उपयोग कर सकते हैं (SVG और VML के आधार पर)

3. तुम कर सकते हो (IE8- के लिए http://flashcanvas.net/) कैनवास का उपयोग कर

इस्तेमाल किया

:

---

एसवीजी प्रोग्रामिंग के लिए इस तरह से किया जाएगा 210

1. पहला बिंदु बनाने के क्षण: आप खाली पंक्ति var Line बनाने (भी इस अंक निर्देशांक x1 और y1 हो जाएगा)

2. तो फिर तुम x2 की mousemove रीपेंट, पर mousedown लाइन

3. की y2 गुणों पर बाँध mousemove के बाद आप अंतिम पंक्ति स्थिति जमा करें।

---

अद्यतन

आप सीएसएस/जे एस के साथ यह कर सकते हैं, लेकिन मुख्य समस्या यह है IE8- के लिए गणना में है, कि परिवर्तनों के लिए केवल मैट्रिक्स फिल्टर है।

Answer 2

चुनौती स्वीकार कर ली गई।

मैं सीएसएस रूपांतरण और जावास्क्रिप्ट में मठ के एक समूह के साथ यह करने की कोशिश की - आधे घंटे के बाद मैं इस है:

http://jsfiddle.net/VnDrb/2/

ग्रे वर्ग में 2 क्लिक करें और एक रेखा खींची जानी चाहिए । अभी भी एक छोटी सी बग है जो कोण को 45 डिग्री होने पर लाइन को गलत बनाता है। शायद कोई और जानता है कि इसे कैसे ठीक किया जाए। शायद Math.asin (arcsinus) का उपयोग करने के बजाय, एक अन्य त्रिकोणमितीय फ़ंक्शन का उपयोग करें, लेकिन मैं वास्तव में इसमें अच्छा नहीं हूं। मैंने सोचा कि मैं इसे पोस्ट करूंगा, यहां तक ​​कि एक छोटी सी बग भी है, मुझे लगता है कि यह आपके लिए अच्छी शुरुआत है।

Answer 3

कुछ समय के लिए इस के एक संशोधित संस्करण का उपयोग कर रहे थे। अच्छा काम करता है।

http://www.ofdream.com/code/css/xline2.php

तो पहले क्लिक पर

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

मैं हाल ही में, इस के लिए एक और सहायक समारोह बना शामिल है क्योंकि मेरे उपकरण लाइनों इधर-उधर जाने:

function setLinePos(x1, y1, x2, y2, id) { 
    if (x2 < x1) { 
     var temp = x1; 
     x1 = x2; 
     x2 = temp; 
     temp = y1; 
     y1 = y2; 
     y2 = temp; 
    } 
    var line = $('#line' + id); 
    var length = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2)); 
    line.css('width', length + "px"); 
    var angle = Math.atan((y2 - y1)/(x2 - x1)); 
    line.css('top', y1 + 0.5 * length * Math.sin(angle) + "px"); 
    line.css('left', x1 - 0.5 * length * (1 - Math.cos(angle)) + "px"); 
    line.css('-moz-transform', "rotate(" + angle + "rad)"); 
    line.css('-webkit-transform', "rotate(" + angle + "rad)"); 
    line.css('-o-transform', "rotate(" + angle + "rad)"); 

} 

jQuery संस्करण है यही कारण है, और इस यात्रा में मुझे कोई आईई आवश्यकता है तो मैं इसे अनदेखा। मैं मूल समारोह से आसानी से अनुकूलित किया जा सकता है। http://monkeyandcrow.com/blog/drawing_lines_with_css3/

उनकी डेमो यहाँ है:

Answer 4

मैं अलग दृष्टिकोण के एक नंबर इस सप्ताह के अंत और समाधान है कि मेरे लिए सबसे अच्छा काम किया एडम सैंडरसन से है की कोशिश की है http://monkeyandcrow.com/samples/css_lines/

यह के मूल बहुत सरल है , जो हमेशा अच्छा है।

div.line{ 
    transform-origin: 0 100%; 
    height: 3px; /* Line width of 3 */ 
    background: #000; /* Black fill */ 
} 


function createLine(x1,y1, x2,y2){ 
    var length = Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2)); 
    var angle = Math.atan2(y2 - y1, x2 - x1) * 180/Math.PI; 
    var transform = 'rotate('+angle+'deg)'; 

    var line = $('<div>') 
     .appendTo('#page') 
     .addClass('line') 
     .css({ 
     'position': 'absolute', 
     'transform': transform 
     }) 
     .width(length) 
     .offset({left: x1, top: y1}); 

    return line; 
}