当前位置：文江博客话题详情

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

发布于 2024-11-10 23:12:06 字数 390 浏览 2 评论 0原文

我有一个用 css3 边框半径（图像部分）创建的弯曲 div。我旁边有文本行，我想将其与曲线对齐 20px 左右，如下所示（无法发布图像，不记得旧的登录信息）：

在此处输入图像描述

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

酒绊 2024-11-17 23:12:06

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

回复收藏 0 原文

不必在意 2024-11-17 23:12:06

好吧，我已经玩了一段时间了。这是一个早期的概念；它有点低效，不能与滚动条一起使用，并且到目前为止它（或多或少）仅在 Internet Explorer 9 和 Firefox 5 中工作（我没有测试这些浏览器的其他版本）。我跳过了数学方面的内容，并以另一种方式做了 - 我使用 document.elementFromPoint 来找出曲线范围。这就是它在 Chrome 中不起作用的原因 - 它的 elementFromPoint 实现不尊重 border-radius （查看这个示例);因此我可能不得不重新设计整个脚本。尽管如此，我还是向您展示了我创建的内容，因为它可能会给其他愿意帮助您的人带来很好的启发。我会努力改进我的剧本；当我取得一些进展时我会通知你。

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

回复收藏 0 原文

罪歌 2024-11-17 23:12:06

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

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>

To work out the position of a point along a circle you can use the formula:

c^2 = a^2 + b^2

where c = radius, a is verticle distance from center, b is horizontal distance from center.

So knowing this, I constructed a very contrived example for you to review. Please note there are a couple of things to help increase performance such as caching the radius squared but I left it out to avoid complicating the demo.

<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 原文