CSS3 वक्र से बना त्रिज्या से मेल खाने वाले वक्र पर बिंदुओं की गणना कैसे करें? ज्यामिति प्रतिभाशाली?

मेरे पास सीएसएस 3 सीमा त्रिज्या (छवि भाग) के साथ बनाया गया एक घुमावदार div है। मैं पाठ लाइनों इसके बगल में है कि मैं वक्र बंद 20px या तो संरेखित करने के लिए है, तो जैसे (नहीं कर सकते पोस्ट छवियों, नहीं कर सकते पुराना लॉगिन याद) चाहते हैं:CSS3 वक्र से बना त्रिज्या से मेल खाने वाले वक्र पर बिंदुओं की गणना कैसे करें? ज्यामिति प्रतिभाशाली?

enter image description here

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

आखिरकार मुझे जावास्क्रिप्ट के साथ गणना और अद्यतन करने में सक्षम होना चाहिए।

(नीचे प्रति टिप्पणी जोड़ने के लिए संपादित): प्रदर्शन के प्रयोजनों के लिए वक्र सीएसएस सीमा-नीचे-बाएं-त्रिज्या: 316 पीएक्स 698 पीएक्स; लेकिन इसकी गणना स्क्रिप्ट द्वारा पृष्ठ आकार के आधार पर की जाती है। इसके अलावा, उल्लेख करने के लिए अच्छा है, क्या मुझे आईई या फ़ायरफ़ॉक्स का समर्थन करने की कोई आवश्यकता नहीं है - बस वेबकिट (स्टैंडअलोन कियोस्क एप्लिकेशन)।

स्रोत

2011-05-31 Ted Goodridge

यह उन चीजों मैं मुश्किल :-) – Pointy

क्या बॉर्डर-त्रिज्या कोड है तरह-का हो जाएगा संदेह में से एक है? – oblig

क्या आपने विश्लेषणात्मक ज्यामिति से सूत्रों का उपयोग करने का प्रयास किया था? यदि '[एम, एन] 'उस बिंदु के निर्देशांक हैं जिसके लिए त्रिज्या सेट किया गया है और' आर' त्रिज्या है तो वक्र पर प्रत्येक बिंदु (' [x, y] ') के लिए निम्नलिखित सत्य है:' (xm)^2 + (वाईएन)^2 = आर^2'। – duri

duri द्वारा टिप्पणी में सुझाव के रूप में, आप चक्र समीकरण का उपयोग कर सकते हैं: http://www.wolframalpha.com/input/?i=%28x-5%29^2% 2 बी% 28y% 2B4% 29^2% 3D25 (जहां केंद्र 5 में है; -4 आर = 5)

हालांकि, मैं जावास्क्रिप्ट में ड्राइंग के लिए बेज़ीयर के वक्र का उपयोग कर रहा था। वे बहुत लचीला और स्थिर या 2 वैक्टर हैं, उनके द्वारा बनाए गए वक्र को पहले वेक्टर के शुरुआती बिंदु में शुरू होता है और दूसरे वेक्टर में खत्म होता है। अधिक: http://en.wikipedia.org/wiki/B%C3%A9zier_curve (ध्यान दें कि चक्र वेक्टर का हिस्सा ड्राइंग सीधा हो जाएगा के लिए)

स्रोत

2011-05-31 16:47:26 jakubmal

ठीक है, मैं थोड़ी देर के लिए इसके साथ खेला है। यह एक प्रारंभिक अवधारणा है; यह कुछ हद तक अक्षम है, स्क्रॉलबार के साथ काम नहीं करता है और अब तक यह केवल इंटरनेट एक्सप्लोरर 9 और फ़ायरफ़ॉक्स 5 में (अधिक या कम) काम करता है (मैंने इन ब्राउज़रों के अन्य संस्करणों का परीक्षण नहीं किया है)। मैंने उस गणितीय सामान को छोड़ दिया और इसे एक और तरीका किया - मैं वक्र श्रेणी कहां से पता लगाने के लिए document.elementFromPoint का उपयोग करता हूं। यही कारण है कि यह क्रोम में काम नहीं करता है - तत्व का कार्यान्वयन FromPoint सीमा-त्रिज्या का सम्मान नहीं करता है (this example देखें); इसलिए मुझे शायद पूरी लिपि को फिर से तैयार करना होगा। फिर भी मैं आपको दिखाता हूं कि मैंने क्या बनाया है क्योंकि यह आपकी मदद करने के इच्छुक लोगों के लिए एक अच्छी प्रेरणा हो सकती है। मैं अपनी लिपि में सुधार करने की कोशिश करूंगा; जब मैं कुछ प्रगति करता हूं तो मैं आपको बता दूंगा।

स्क्रिप्ट http://94.136.148.82/~duri/teds-curve/1.html

स्रोत

2011-05-31 19:06:37 duri

बहुत रोचक ... यह यादृच्छिक रूप से आकार की वस्तुओं के लिए भी उपयोगी हो सकता है ... मुझे इसे थोड़ा गहरा देखना होगा। आपके डेमो पेज के लिए धन्यवाद! और यदि आप इसे आगे लेते हैं तो मुझे बताएं। –

में पाया जा सकता आप jQuery का उपयोग कर सकते अगर मैं बनाया है एक jQuery jCurvy बुलाया pluging है कि आप एक बेज़ियर वक्र के सहारे तत्वों की स्थिति के लिए अनुमति देगा।

बदलते वक्र से मेल खाने के लिए आपको वक्र फ़ंक्शन में गुजरने वाले पैरामीटर को समायोजित करने की आवश्यकता होगी, जो मुश्किल हो सकती है। आपका वक्र कितना बदल रहा है?

स्रोत

2011-10-18 23:43:15

एक चक्र के साथ एक बिंदु की स्थिति बाहर काम करने के लिए आप सूत्र का उपयोग कर सकते हैं:

c^2 = a^2 + b^2

जहाँ c = त्रिज्या, एक केंद्र से verticle दूरी है, ख के केंद्र से क्षैतिज दूरी है।

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

<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

     <style> 
      #wrapper { position: relative; } 

      #curved { 
       position: absolute; 
       left: 200px; 

       -moz-border-radius-bottomleft: 200px; 
       -webkit-border-bottom-left-radius: 200px; 
       border-bottom-left-radius: 200px 

       border: 1px solid red; 
       padding: 100px; 
       background: red; 
      } 

      #magiclist { padding-top: 15px; width: 325px; list-style-type: none; } 
      li { text-align: right; } 
     </style> 

     <script> 
      $(function() { 
       /* c^2 = a^2 + b^2, c = radius, a = verticalShift, b = horizontalShift */ 
       /* Therefore b = sqrt(c^2 - b^2), so now we can calculate the horizontalShift */ 
       var radius = 200;   
       var verticalShift = 0; 
       var horizontalShift = 0; 

       /* iterate over the list items and calculate the horizontalShift */ 
       $('li').each(function(index, element) { 

        /* calculate horizontal shift by applying the formula, then set the css of the listitem */ 
        var horizontalShift = Math.sqrt(Math.pow(radius,2) - Math.pow(verticalShift,2)); 
        $(element).css('padding-right', horizontalShift + 'px'); 

        /* need to track how far down we've gone, so add the height of the element as an approximate counter */ 
        verticalShift += $(element).height(); 
       }); 
      }); 
     </script> 
    </head> 

    <div id="wrapper"> 
     <div id="curved">test</div> 
     <ul id="magiclist"> 
      <li>one</li> 
      <li>one</li> 
      <li>one</li> 
      <li>one</li> 
      <li>one</li> 
      <li>one</li> 
      <li>one</li> 
      <li>one</li> 
      <li>one</li> 
      <li>one</li> 
     </ul> 
    </div> 
</html>

स्रोत

2012-04-15 15:16:11 Chaos

CSS3 वक्र से बना त्रिज्या से मेल खाने वाले वक्र पर बिंदुओं की गणना कैसे करें? ज्यामिति प्रतिभाशाली?

उत्तर

संबंधित मुद्दे