如何计算与 CSS3 创建的边界半径相匹配的曲线上的点？几何天才？

Question

我有一个用 css3 边界半径（图像部分）创建的弯曲 div。 我旁边有文本行，我想将曲线对齐 20px 左右，就像这样（不能发布图片，不记得旧登录名）：

在此处输入图像描述

诀窍是曲线的变化取决于 window 的大小，所以我希望能够计算出曲线上文本应该偏移的点，基本上是创建一个真正的手动文本换行。

最终，我需要能够使用 javascript 进行计算和更新。

（编辑添加每条评论如下）：曲线 css 用于演示目的是border-bottom-left-radius：316px 698px； 但这是由脚本根据页面大小计算的。 另外，值得一提的是，我根本不需要支持 IE 或 FireFox——只需要 webkit（独立的信息亭应用程序）。

Answer 1

要计算沿圆的一点的 position，您可以使用以下公式：

c^2 = a^2 + b^2

其中 c = 半径，a 是距中心的垂直距离，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>

Answer 2

正如 duri 评论中所建议的，您可以使用圆形方程： http://www.wolframalpha.com/input/?i=%28x-5%29 ^2%2B%28y%2B4%29^2%3D25（其中中心在 5;-4 r=5)

但是，我使用贝塞尔曲线在 Javascript 中绘图。 它们非常灵活，由两个向量组成，它们形成的曲线从第一个向量的初始点开始，到第二个向量的结束。 更多： http://en.wikipedia.org/wiki/B%C3%A9zier_curve （请注意，绘制圆矢量的一部分将是垂直的）

Answer 3

好的，我已经玩了一段时间了。 这是一个早期的概念； 它效率低下，不适用于滚动条，到目前为止它仅在 Internet Explorer 9 和 Firefox 5 中工作（或多或少）（我没有测试这些浏览器的其他版本）。 我跳过了那些数学内容并以另一种方式进行了 - 我使用 document.elementFromPoint 来找出曲线范围的位置。 这就是它在 Chrome 中不起作用的原因——它的 elementFromPoint 实现不尊重边界半径（看这个例子）； 因此我可能不得不改造整个脚本。 尽管如此，我还是向您展示了我创建的内容，因为它可能对愿意帮助您的其他人产生很好的启发。 我会努力改进我的剧本； 当我取得一些进展时，我会告诉你的。

该脚本可以在http://94.136.148.82/~duri/teds-curve/1.html找到

Answer 4

如果您可以使用 jQuery，我创建了一个名为jCurvy的 jQuery 插件，它允许您沿着贝塞尔曲线使用 position 元素。

您需要调整传递到曲线 function 中的参数以匹配变化的曲线，这可能很棘手。 你的曲线变化了多少？

如何计算与 CSS3 创建的边界半径相匹配的曲线上的点？几何天才？

问题描述

4 个解决方案

解决方案1
1 2012-04-15 15:16:11

解决方案2
1 2011-05-31 16:47:26

解决方案3
1 2011-05-31 19:06:37

解决方案4
0 2011-10-18 23:43:15

如何计算与 CSS3 创建的边界半径相匹配的曲线上的点？ 几何天才？

问题描述

4 个解决方案

解决方案1 1 2012-04-15 15:16:11

解决方案2 1 2011-05-31 16:47:26

解决方案3 1 2011-05-31 19:06:37

解决方案4 0 2011-10-18 23:43:15

如何计算与 CSS3 创建的边界半径相匹配的曲线上的点？几何天才？

解决方案1
1 2012-04-15 15:16:11

解决方案2
1 2011-05-31 16:47:26

解决方案3
1 2011-05-31 19:06:37

解决方案4
0 2011-10-18 23:43:15