Javascript 如何计算曲线上与CSS3创建的边界半径相匹配的点？几何天才？
我有一个使用css3边界半径（图像部分）创建的曲线div。我有文本行在旁边，我想对齐20像素左右的曲线，像这样（不能张贴图像，不能记住旧登录）： 诀窍是曲线根据窗口大小而变化，因此我希望能够计算曲线上文本应该偏移的点，基本上创建一个真正的手动文本换行 最终，我需要能够使用javascript进行计算和更新 （编辑以添加以下每条注释）：用于演示的曲线css为 边框左下半径：316px 698px； 但这是根据脚本的页面大小来计算的。Javascript 如何计算曲线上与CSS3创建的边界半径相匹配的点？几何天才？,javascript,geometry,word-wrap,curve,Javascript,Geometry,Word Wrap,Curve,我有一个使用css3边界半径（图像部分）创建的曲线div。我有文本行在旁边，我想对齐20像素左右的曲线，像这样（不能张贴图像，不能记住旧登录）： 诀窍是曲线根据窗口大小而变化，因此我希望能够计算曲线上文本应该偏移的点，基本上创建一个真正的手动文本换行 最终，我需要能够使用javascript进行计算和更新 （编辑以添加以下每条注释）：用于演示的曲线css为 边框左下半径：316px 698px； 但这是根据脚本的页面大小来计算的。 另外，值得一提的是，我根本不需要支持IE或FireFox——只
另外，值得一提的是，我根本不需要支持IE或FireFox——只需要webkit（独立的kiosk应用程序）。正如duri在评论中所建议的，您可以使用以下公式： ^2%2B%28y%2B4%29^2%3D25（中心位于5中；-4r=5） 然而，我使用贝塞尔曲线在Javascript中绘制。它们非常灵活，由两个或两个向量组成，它们所形成的曲线从第一个向量的起始点开始，在第二个向量的结束点结束。 更多：
（请注意，绘制圆向量的一部分将是垂直的）好的，我已经玩了一段时间了。这是一个早期的概念；它有点低效，不适用于滚动条，到目前为止，它只能在InternetExplorer9和Firefox5中工作（或多或少）（我没有测试这些浏览器的其他版本）。我跳过了那些数学方面的东西，用另一种方法——我使用document.elementFromPoint来找出曲线的范围。这就是为什么它不能在Chrome中工作——它的elementFromPoint实现不考虑边界半径（请看）；因此，我可能不得不重新设计整个脚本。尽管如此，我还是向你们展示了我所创造的，因为它可能是另一个愿意帮助你们的人的一个很好的灵感。我会努力改进我的剧本；当我取得一些进展时，我会告诉你的
如果您可以使用jQuery，可以在找到脚本。我创建了一个名为jQuery的插件，它允许您沿贝塞尔曲线定位元素
您需要调整传递到曲线函数中的参数，以匹配不断变化的曲线，这可能很棘手。你的曲线变化了多少？要计算出一个点在圆上的位置，你可以使用以下公式：
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>
#包装器{位置：相对；}
#弯曲的{
位置：绝对位置；
左：200px；
-moz边框半径左下角：200px；
-webkit边框左下半径：200px；
边框左下半径：200px
边框：1px纯红；
填充：100px；
背景：红色；
}
#magiclist{填充顶部：15px；宽度：325px；列表样式类型：无；}
li{文本对齐：右；}
$（函数（）{
/*c^2=a^2+b^2，c=半径，a=垂直位移，b=水平位移*/
/*因此b=sqrt（c^2-b^2），现在我们可以计算水平位移*/
var半径=200；
var verticalShift=0；
var水平位移=0；
/*迭代列表项并计算水平位移*/
$（'li'）。每个（函数（索引，元素）{
/*应用公式计算水平位移，然后设置listitem的css*/
var horizontalShift=Math.sqrt（Math.pow（radius，2）-Math.pow（verticalShift，2））；
$（element.css（'padding-right'，horizontalShift+'px'）；
/*需要跟踪我们已经走了多远，所以添加元素的高度作为近似计数器*/
verticalShift+=$（元素）.height（）；
});
});
测试
- 一个
- 一个
- 一个
- 一个
- 一个
- 一个
- 一个
- 一个
- 一个
- 一个
[m，n]r[x，y]（x-m）^2+（y-n）^2=r^2