logo标签列表

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

javascriptgeometryword-wrapcurve
7
我有一个由CSS3边框半径创建的弯曲div（图像部分）。我想将文本行与其对齐，距离弯曲处大约20像素，如下所示（无法发布图片，无法记住旧登录信息）：
(图片已省略)
窍门是根据窗口大小改变的曲线，因此我希望能够计算文本应偏移的曲线上的点，从而创建一个非常手动的文本换行。
最终，我需要能够使用JavaScript进行计算和更新。
（编辑以添加以下评论：）弯曲的CSS用于演示目的是border-bottom-left-radius: 316px 698px;但是，该值是通过脚本基于页面大小计算出来的。还有一点要注意的是，我不需要在IE或FireFox中提供支持，只需在webkit中支持（独立式展台应用程序）。
这是我怀疑会有点棘手的事情 :-) - Pointy
什么是 border-radius 代码？ - Karl Andrew
你尝试过使用解析几何公式吗？如果 [m, n] 是半径所在点的坐标，r 是半径，则对于曲线上的每个点（[x, y]），以下公式成立：(x-m)^2 + (y-n)^2 = r^2。 - duri
哈哈，不是，但那可能正是我正在寻找的。 - Ted Goodridge
4个回答
1

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

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>
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 （请注意，对于绘制部分圆形，向量将是垂直的）

1

好的，我已经玩了一会儿。这是一个早期的概念；它有点低效，不能与滚动条一起使用，到目前为止只在Internet Explorer 9和Firefox 5中（更或多或少）工作（我没有测试这些浏览器的其他版本）。我跳过了那些数学的东西，用另一种方式来实现 - 我使用document.elementFromPoint来找出曲线范围所在的位置。这就是为什么它在Chrome中不起作用 - 它对border-radius的elementFromPoint实现不予考虑（看看this example）；因此我可能需要重新设计整个脚本。尽管如此，我向您展示我创建的内容，因为它可能会给其他愿意帮助您的人提供灵感。我将尝试改进我的脚本；我会在取得进展时通知您。

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

非常有趣...这也可能对随机形状的物体有用...我需要更深入地研究一下。感谢您的演示页面！如果您进一步发展，请告诉我。 - Ted Goodridge
0
如果您能使用jQuery，我已经创建了一个名为jCurvy的jQuery插件，它将允许您沿着贝塞尔曲线定位元素。
您需要调整传递到曲线函数中的参数，以匹配变化的曲线，这可能有些棘手。您的曲线变化有多大？
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接