如何解决如何计算与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
<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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。