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

问题描述

| 我有一个使用css3边框半径（图像部分）创建的弯曲div。我旁边有文本行，我想在曲线上对齐20px左右，就像这样（不能张贴图片，无法记住旧的登录名）：诀窍是曲线的变化取决于窗口的大小，因此我希望能够计算曲线上文本应从其偏移的点，从本质上创建一个真正的手动换行。最终，我需要能够使用javascript计算和更新。（编辑后在下面的每个评论中添加）：出于演示目的，曲线css为 border-bottom-left-radius：316px 698px; 但这是根据脚本的页面大小来计算的。另外，值得一提的是，我根本不需要支持IE或FireFox，仅需要Webkit（独立的信息亭应用程序）即可。

解决方法

如duri的评论所建议，您可以使用圆方程： http://www.wolframalpha.com/input/?i=%28x-5%29^2%2B%28y%2B4%29^2%3D25（其中居中位置为5； -4 r = 5）但是，我使用Bezier的Curves绘制Javascript。它们非常灵活，由2个向量组成，由它们构成的曲线从第一个向量的起始点开始，到第二个向量的终点结束。更多：http://en.wikipedia.org/wiki/B%C3%A9zier_curve （注意，用于绘制的圆向量的一部分将是垂直的） , 好的，我玩了一段时间。这是一个早期的概念；它效率低下，无法与滚动条一起使用，到目前为止，它（或多或少）仅在Internet Explorer 9和Firefox 5中有效（我没有测试这些浏览器的其他版本）。我跳过了这些数学知识，并以另一种方式进行了处理-我使用document.elementFromPoint来找出曲线的范围。这就是为什么它在Chrome中不起作用的原因-它的elementFromPoint的实现不遵守边界半径（请看此示例）；因此，我可能不得不重塑整个脚本。尽管如此，我还是向您展示了我的创作，因为它可以为愿意帮助您的其他人提供很好的灵感。我将尝试改善脚本；我会在取得一些进展时通知您。该脚本可以在http://94.136.148.82/~duri/teds-curve/1.html中找到 , 要计算圆点的位置，可以使用以下公式：

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>

, 如果可以使用jQuery，我已经创建了一个名为jCurvy的jQuery插件，它将允许您沿着贝塞尔曲线来定位元素。您需要调整传递给曲线函数的参数，以匹配变化的曲线，这可能很棘手。您的曲线变化了多少？

几何创建匹配匹配半径天才线上计算计算计算边界

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

问题描述

解决方法

相关问答