如何計算與CSS3創建的邊界半徑相匹配的曲線上的點？幾何天才？

我有一個用css3邊框半徑創建的曲線div（圖像部分）。我旁邊的文本行，我想對齊20像素左右斷曲線，像這樣（廣東話發表圖片，記不起舊登錄）：如何計算與CSS3創建的邊界半徑相匹配的曲線上的點？幾何天才？

enter image description here

訣竅是曲線的變化取決於窗口大小，所以我希望能夠計算文本應該偏移的曲線上的點，基本上創建了一個真正的手動文本包裝。

最終我需要能夠計算和更新與JavaScript。

（編輯添加每個評論下面）：曲線CSS用於演示的目的是 border-bottom-left-radius：316px 698px; 但是這是根據頁面大小通過腳本計算的。另外，值得一提的是，我沒有要求支持IE或FireFox - 只是webkit（獨立信息亭應用程序）。

來源

2011-05-31 Ted Goodridge

這是我懷疑會有點棘手的事情之一:-) – Pointy 2011-05-31 15:00:35

什麼是邊界半徑代碼？ – oblig 2011-05-31 15:03:42

您是否嘗試使用解析幾何中的公式？如果'[m，n]'是半徑設置點的座標，'r'是半徑，則對於曲線上的每個點（'[x，y]'），以下情況爲真：'（xm ）^ 2 +（yn）^ 2 = r^2'。 – duri 2011-05-31 15:09:43

如杜裏在評論建議，可以使用圓方程： http://www.wolframalpha.com/input/?i=%28x-5%29^2％2B％28Y％2B4％29^2％3D25（其中中心在5; -4 R = 5）

但是，我使用Bezier曲線來繪製Javascript。它們非常靈活並且由2個向量組成，它們所形成的曲線從第一個向量的初始點開始，然後在第二個向量中完成。更多：http://en.wikipedia.org/wiki/B%C3%A9zier_curve （注意，對於繪製的部分圓矢量將是垂直的）

來源

2011-05-31 16:47:26 jakubmal

好吧，我已經玩了一段時間了。這是一個早期的概念;它有點低效，不適用於滾動條，至今它只在Internet Explorer 9和Firefox 5中工作（或多或少）（我沒有測試這些瀏覽器的其他版本）。我跳過了數學問題，並以另一種方式做了它 - 我使用document.elementFromPoint來找出曲線的位置。這就是爲什麼它在Chrome中不起作用 - 它的elementFromPoint實現不考慮邊界半徑（請看this example）;因此我可能不得不改造整個劇本。不過，我告訴你我創造了什麼，因爲它可能是另一個願意幫助你的人的靈感。我會盡力改進我的劇本;當我取得一些進展時，我會通知你。

該腳本可以在http://94.136.148.82/~duri/teds-curve/1.html

來源

2011-05-31 19:06:37 duri

非常有趣......對隨機形狀的物體也可能有用......我必須深入研究一下。感謝您的演示頁面！如果你進一步讓我知道。 – 2011-05-31 20:11:06

發現如果你可以使用jQuery我創建了一個jQuery pluging稱爲jCurvy，讓你定位沿貝塞爾曲線的元素。

您需要調整傳遞到曲線函數中的參數以匹配變化曲線，這可能很棘手。你的曲線變化多少？

來源

2011-10-18 23:43:15

若要出點的位置沿一個圓則可以使用公式：

c^2 = a^2 + b^2

其中c =半徑，a爲中心verticle距離，b爲中心的水平距離。

因此，瞭解這一點，我構建了一個非常人爲的例子供您回顧。請注意，有幾件事可以幫助提高性能，例如緩存半徑平方，但爲了避免演示覆雜化，我放棄了這一點。

<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創建的邊界半徑相匹配的曲線上的點？幾何天才？

回答

相關問題