पथ/बहुभुज के लिए गोलाकार कोनों को लागू करना

Question

मैं कुछ हफ्तों के भीतर शुरू होने वाली परियोजना के लिए कुछ जानकारी एकत्र कर रहा हूं। इस प्रोजेक्ट में एक ब्राउज़र-आधारित ड्राइंग टूल है जहां उपयोगकर्ता पूर्वनिर्धारित आकार जोड़ सकते हैं या स्वयं आकार बना सकते हैं। आकृति को इलस्ट्रेटर-जैसे ट्रांसफॉर्मोल (हैंडल) के साथ चयन करने योग्य, स्वतंत्र रूप से स्केलेबल और घूमने योग्य होना चाहिए। पूर्वनिर्धारित आकार जो हमारे मन में हैं वे हैं: आयताकार, अंडाकार, आधा अंडाकार और (आइसोसेलस) त्रिकोण।

अब तक इतना अच्छा है, इसे प्राप्त करने के लिए मैं राफेलजेएस या फैब्रिकजेएस के बारे में सोच रहा था लेकिन ... प्रत्येक आकार (बहुभुज/पथ) को एक निश्चित कॉर्नरेडियस के साथ खींचा जाना चाहिए। और स्केलिंग के दौरान कॉर्नरेडियस को बनाए रखा जाना चाहिए, इसलिए कोई विरूपण नहीं होता है। उपयोगकर्ता इनपुट द्वारा गोलिंग निर्दिष्ट कर सकते हैं।

• वहाँ कुछ वर्दी mathemetical सूत्र आकार मैंने कहा करने के लिए एक cornerradius लागू करने के लिए है:

  में कुछ बाधाएं/सवाल नहीं है? या हर आकार को मिनी-प्रोजेक्ट के रूप में माना जाना चाहिए? मैं इसे पथ या पॉली के रूप में वापस करना चाहता हूं, इसलिए इसे एसवीजी या कैनवास के साथ खींचा जा सकता है।

• ट्रांसफॉर्महैंड खींचकर प्रत्येक स्केल या घुमावदार ऑपरेशन, परिणामस्वरूप (बड़े पैमाने पर) गणनाओं को अपडेट किए गए आकार को पुनः प्राप्त करने के लिए परिणामस्वरूप होगा। आयताकारों को प्राप्त करने और छोड़ने के लिए आयत सबसे आसान हैं, अन्य सभी आकार गणना करने के लिए बहुत कठिन होंगे। क्या प्रक्रिया को तेज करने का कोई तरीका है?

मुझे ऐसी साइट मिली जहां उपयोगकर्ता फ्लोचार्ट आकर्षित कर सकते हैं और लगभग सभी आकारों पर कॉर्नरेडियस लागू कर सकते हैं। यह इतनी आसानी से काम करता है, मैं नाखुश नहीं कर सकता कि उन्होंने यह कैसे किया। लिंक: https://www.lucidchart.com/ (कोशिश करें बटन)

अभी के लिए, मैं थोड़ा उलझन में हूं, मुझे लगता है कि गणित में औसत है। शायद कोई मुझे सही दिशा में धक्का दे सकता है और कुछ अनुभव साझा कर सकता है?

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

बीटीडब्ल्यू। इस परियोजना में प्रदर्शन महत्वपूर्ण है। ड्राइंग का आउटपुट एसवीजी प्रारूप होना चाहिए।

Answer 1

प्रारंभ बिंदु using-svg-curves-to-imitate-rounded-corners हो सकता है। सिद्धांत प्रत्येक कोने को शॉर्टेंड रिश्तेदार क्यूबिक के साथ परिवर्तित करना है। यह उदाहरण बहुत बुनियादी है और केवल दो संभव कोने के मामलों के साथ काम करता है।

मैं विस्तार के इस तरह कोने के साथ आशुलिपि सापेक्ष घन संभव है की जगह भी अन्य पथ के सेगमेंट को कवर करने के विस्तार करने के लिए लगता है। प्रत्येक सेगमेंट में ऑन-वक्र समन्वय बिंदु होता है, जिसे s सेगमेंट के साथ प्रतिस्थापित किया जाना है। गणित इस समाधान का दिलचस्प हिस्सा हो सकता है।

Answer 2

मुझे एक ही समस्या होने का अंत हो गया, और एक आसान समाधान नहीं मिला। मैंने एडोब इलस्ट्रेटर के ऑपरेशन के आधार पर एक काफी सामान्य कोने-राउंडिंग फ़ंक्शन लिखना समाप्त कर दिया। यह arcs के बजाय बेजियर वक्र का उपयोग करता है, लेकिन मुझे लगता है कि परिणाम बहुत सभ्य है।

यह एक त्रिज्या एसवीजी छवि के अंतरिक्ष समन्वय में या एक कोने और अपने पड़ोसियों के बीच की दूरी का एक अंश के रूप में दिया साथ गोलाई समर्थन करता है।

इसका उपयोग करने के लिए, राउंडिंग शामिल करें।अपनी परियोजना में और फ़ंक्शन को कॉल js:

roundPathCorners(pathString, radius, useFractionalRadius) 

कोड और कुछ परीक्षण पथ यहां हैं: http://embed.plnkr.co/kGnGGyoOCKil02k04snu/preview

यह कैसे Plnkr से उदाहरण प्रस्तुत करना है:

Answer 3

के बावजूद यह प्रश्न कुछ समय के लिए आसपास रहा है, कुछ इस समाधान को रोक सकते हैं और इस समाधान को आजमा सकते हैं:

var BORDER_RADIUS = 20; 

function roundedPath(/* x1, y1, x2, y2, ..., xN, yN */){ 
    context.beginPath(); 
    if (!arguments.length) return; 

    //compute the middle of the first line as start-stop-point: 
    var deltaY = (arguments[3] - arguments[1]); 
    var deltaX = (arguments[2] - arguments[0]); 
    var xPerY = deltaY/deltaX; 
    var startX = arguments[0] + deltaX/2; 
    var startY = arguments[1] + xPerY * deltaX/2; 

    //walk around using arcTo: 
    context.moveTo(startX, startY); 
    var x1, y1, x2, y2; 
    x2 = arguments[2]; 
    y2 = arguments[3]; 
    for (var i = 4; i < arguments.length; i += 2) { 
     x1 = x2; 
     y1 = y2; 
     x2 = arguments[i]; 
     y2 = arguments[i + 1]; 
     context.arcTo(x1, y1, x2, y2, BORDER_RADIUS); 
    } 

    //finally, close the path: 
    context.arcTo(x2, y2, arguments[0], arguments[1], BORDER_RADIUS); 
    context.arcTo(arguments[0], arguments[1], startX, startY, BORDER_RADIUS); 
    context.closePath(); 
} 

चाल पहली पंक्ति के बीच में शुरू (और बंद) है, और फिर arcTo फ़ंक्शन का उपयोग करें जो बहुत अच्छी तरह से here का वर्णन किया गया है।

अब आप "बस" को अपने सभी आकारों को बहुभुज के रूप में व्यक्त करने का एक तरीका ढूंढना है।