首页 文章

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

提问于
浏览 次
7

我有一个用css3边界半径创建的曲线div（图像部分） . 我旁边有文字行，我想在曲线上对齐20px左右，就像这样（无法发布图片，无法记住旧登录）：

enter image description here

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

最终我需要能够使用javascript计算和更新 .

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

javascript geometry textwrapping curve

4 回答

  • 0

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

    但是，我正在使用Bezier 's Curves for drawing in Javascript. They are very flexible and consist or 2 vectors, the curve made by them starts in first vector'的初始点并在第二个向量中完成 . 更多：http://en.wikipedia.org/wiki/B%C3%A9zier_curve（注意，对于绘制部分圆矢量将是垂直的）

    回复于
  • 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>
    回复于
  • 0

    好吧，我使用滚动条，到目前为止它只在Internet Explorer 9和Firefox 5中工作（或多或少）（我没有在Chrome中工作 - 它的elementFromPoint实现不尊重border-radius（查看this example） ）;因此我会尝试改进我的剧本;当我取得一些进展时，我会告诉你 .

    The script can be found at http://94.136.148.82/~duri/teds-curve/1.html

    回复于
  • 1

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

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

    回复于

相关问题