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

【问题标题】：How to calculate points on a curve that matches CSS3 created border radius? Geometry geniuses?如何计算与 CSS3 创建的边界半径相匹配的曲线上的点？几何天才？
【发布时间】：2011-05-31 14:54:00
【问题描述】：

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

诀窍是曲线会根据窗口大小而变化，因此我希望能够计算出文本应偏移的曲线上的点，本质上是创建一个真正的手动文本换行。

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

（编辑以添加下面的每个评论）：用于演示目的的曲线 css 是左下边框半径：316px 698px；但这是由脚本根据页面大小计算的。另外，值得一提的是，我根本不需要支持 IE 或 FireFox——只需要 webkit（独立的 kiosk 应用程序）。

【问题讨论】：

这是我怀疑会有点棘手的事情之一 :-)
什么是边界半径代码？
您是否尝试过使用解析几何中的公式？如果[m, n] 是设置半径的点的坐标，r 是半径，则曲线上的每个点 ([x, y]) 都为真：(x-m)^2 + (y-n)^2 = r^2。
大声笑，不，但这可能正是我想要的。

标签： javascript geometry word-wrap curve

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

非常有趣...这也可能对随机形状的对象有用...我将不得不更深入地研究一下。感谢您的演示页面！如果您进一步了解，请告诉我。

【解决方案3】：

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

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>

【讨论】：

【解决方案4】：

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

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

【讨论】：