राफेल जेएस कुशलतापूर्वक एक "पेंसिल" उपकरण को कार्यान्वित करना

Question

मैं एक ऐसे प्रोजेक्ट पर काम कर रहा हूं जिसके लिए अंतिम उपयोगकर्ताओं को ब्राउज़र में svg-edit की तरह आकर्षित करने की आवश्यकता है और प्रोसेसिंग के लिए सर्वर पर एसवीजी डेटा भेजना आवश्यक है।

मैंने Raphael ढांचे के साथ खेलना शुरू कर दिया है और यह आशाजनक प्रतीत होता है।

वर्तमान में मैं एक पेंसिल या फ्रीलाइन प्रकार उपकरण को लागू करने की कोशिश कर रहा हूं। असल में मैं ड्राइंग क्षेत्र में माउस आंदोलन के प्रतिशत के आधार पर एक नया रास्ता खींच रहा हूं। हालांकि, अंत में यह निपटने के लिए बड़ी संख्या में पथ बनाने जा रहा है।

यह माउस आंदोलन परिवर्तित करके एक एसवीजी पथ वक्र उपयोग करने के लिए छोटा है और इसके बजाय लाइन की लाइन पथ क्षेत्रों के लिए संभव है?

नीचे मसौदा कोड मैं मार पड़ी है काम करने के लिए है ...

// Drawing area size const 
    var SVG_WIDTH = 620; 
    var SVG_HEIGHT = 420; 

    // Compute movement required for new line 
    var xMove = Math.round(SVG_WIDTH * .01); 
    var yMove = Math.round(SVG_HEIGHT * .01); 

    // Min must be 1 
    var X_MOVE = xMove ? xMove : 1; 
    var Y_MOVE = yMove ? yMove : 1; 

    // Coords 
    var start, end, coords = null; 
    var paperOffset = null; 
    var mouseDown = false; 

    // Get drawing area coords 
    function toDrawCoords(coords) { 
    return { 
    x: coords.clientX - paperOffset.left, 
    y: coords.clientY - paperOffset.top 
    }; 
    } 

    $(document).ready(function() { 
    // Get area offset 
    paperOffset = $("#paper").offset(); 
    paperOffset.left = Math.round(paperOffset.left); 
    paperOffset.top = Math.round(paperOffset.top); 
    // Init area 
    var paper = Raphael("paper", 620, 420); 
    // Create draw area 
    var drawArea = paper.rect(0, 0, 619, 419, 10) 
    drawArea.attr({fill: "#666"}); 

    // EVENTS 
    drawArea.mousedown(function (event) { 
    mouseDown = true; 
    start = toDrawCoords(event); 
    $("#startCoords").text("Start coords: " + $.dump(start)); 
    }); 
    drawArea.mouseup(function (event) { 
    mouseDown = false; 
    end = toDrawCoords(event); 
    $("#endCoords").text("End coords: " + $.dump(end)); 
    buildJSON(paper); 
    }); 
    drawArea.mousemove(function (event) { 
    coords = toDrawCoords(event); 
    $("#paperCoords").text("Paper coords: " + $.dump(coords)); 
    // if down and we've at least moved min percentage requirments 
    if (mouseDown) { 
     var xMovement = Math.abs(start.x - coords.x); 
     var yMovement = Math.abs(start.y - coords.y); 
     if (xMovement > X_MOVE || yMovement > Y_MOVE) { 
     paper.path("M{0} {1}L{2} {3}", start.x, start.y, coords.x, coords.y); 
     start = coords; 
     } 
    } 
    }); 


    }); 

Answer 1

डगलस-Peucker एल्गोरिथ्म पर एक नज़र अपनी लाइन को आसान बनाने की है।

मैं (गूगल मानचित्र के लिए डेवलपर्स हालांकि googling मुझे मंचों को निर्देश दिया है), लेकिन यहाँ एक tcl कार्यान्वयन काफी आसान समझने के लिए है कि किसी भी जावास्क्रिप्ट कार्यान्वयन के बारे में पता नहीं है: http://wiki.tcl.tk/27610

और यहाँ है एक विकिपीडिया लेख एल्गोरिथ्म समझा (स्यूडोकोड के साथ): http://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm

Answer 2

यहाँ जो iPhone के साथ काम करता है एक आरेखण उपकरण या माउस http://irunmywebsite.com/raphael/drawtool2.php हालांकि यह भी Daves "खेल उपयोगिता" @ http://irunmywebsite.com/raphael/raphaelsource.php जो पथ डेटा उत्पन्न करता है के रूप में आप आकर्षित देखो है।

Answer 3

मैं कुछ इसी तरह काम कर रहा हूं। मुझे अपने उत्तर here में उल्लिखित राफेल एपीआई के एक छोटे बाईपास द्वारा पथ कमांड को बढ़ाने के लिए एक तरीका मिला। आधुनिक ब्राउज़रों में मैंने परीक्षण किया है, यह उचित रूप से अच्छा प्रदर्शन करता है लेकिन जिस डिग्री पर आपकी रेखाएं चिकनी दिखाई देती हैं, इस पर निर्भर करता है कि मूसोम हैंडलर कितनी तेजी से काम कर सकता है।

आप लाइन सेगमेंट का उपयोग करने के लिए और फिर प्रारंभिक दांतेदार पथ के बाद चौरसाई प्रदर्शन पथ ड्राइंग के लिए मेरे विधि की कोशिश कर सकते तैयार की है (या आप किसी भी तरह जाना के रूप में), के रूप में slebetman सुझाव Ramer-डगलस-Peucker का उपयोग कर निर्देशांक प्रूनिंग, और परिवर्तित करके एसवीजी वक्र आदेशों के लिए शेष L एस।

Answer 4

मुझे एक सिमिलर समस्या है, मैं माउस नीचे और एम कमांड का उपयोग कर आकर्षित करता हूं। मैं फिर उस पथ को सर्वर पर डेटाबेस में सहेजता हूं। मेरे पास जो मुद्दा है वह संकल्प के साथ करना है। मेरे पास एक पृष्ठभूमि छवि है जहां उपयोगकर्ता छवि के कुछ हिस्सों पर रेखाएं और आकार खींचते हैं, लेकिन यदि छवि एक संकल्प पर प्रदर्शित होती है और पथ उस संकल्प में बनाए जाते हैं तो एक अलग शायद कम संकल्प पर फिर से खोल दिया जाता है, मेरे पथ स्थानांतरित हो जाते हैं और होते हैं सही ढंग से आकार नहीं है। मुझे लगता है कि मैं जो पूछ रहा हूं वह है: क्या किसी छवि पर पथ खींचने का कोई तरीका है और सुनिश्चित करें कि अंतर्निहित छवि का आकार कोई फर्क नहीं पड़ता है, पथ सही रूप से सही रहता है।