7

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

在此处输入图像描述

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

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

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

4

4 回答 4

1

正如 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 （请注意，用于绘制圆矢量的一部分将是垂直的）

于 2011-05-31T16:47:26.917 回答
1

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

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

于 2011-05-31T19:06:37.743 回答
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>
于 2012-04-15T15:16:11.547 回答
0

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

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

于 2011-10-18T23:43:15.610 回答