根据视口宽度（vw）制作圆半径答案

【问题标题】：Make a Circle Radius Based on viewportwidth (vw)根据视口宽度（vw）制作圆半径
【发布时间】：2016-03-19 20:27:49
【问题描述】：

我有一个免费的 jQuery 图片库，我正在尝试对其进行一些修改以使其适合我的项目。

画廊是一个带有图像的旋转圆圈。

圆的半径是这样定义的：

radius = Math.round( (250) / Math.tan( Math.PI / itemLength ) );

但是我需要的是根据视口宽度（vw）制作一个新的半径

谁能帮我正确处理这个问题？

如果有人能帮助我理解上述代码中发生的事情，我将非常感激。

这是该行代码的上下文：

w = $(window);
container = $( '#contentContainer' );
carousel = $( '#carouselContainer' );
item = $( '.carouselItem' );
itemLength = $( '.carouselItem' ).length;
fps = $('#fps');
rY = 360 / itemLength;
radius = Math.round( (250) / Math.tan( Math.PI / itemLength ) );

https://jsfiddle.net/mxp5svjx/

这是按要求提供的图片：

主要问题是当我调整窗口大小时，圆的半径保持不变。

这是一个工作演示： http://codepen.io/johnblazek/full/nceyw/

【问题讨论】：

你能给我们一张画廊的图片吗？这可能有助于理解代码与图库相关的作用。
当我在 Opera 中打开工作演示时，它完全被吓坏了。
当我打开演示时它运行良好...

标签： javascript jquery math gsap

【解决方案1】：

我可能错了，但我认为

Math.tan( Math.PI / itemLength )

正在计算每个段的角度，itemLength的值越高，角度越小。所有项目都需要适合圆圈。 tan 函数根据角度值生成一个值。

然后 250 除以前一个结果。我猜用vw 交换 250 会导致值太高。如果您知道它看起来不错的视图宽度，那么您可以尝试以下操作：

radius = Math.round( (250 * (vw/default_vw) ) / Math.tan( Math.PI / itemLength ) );

【讨论】：

你说的有点道理。但是它不起作用。我添加了更多代码。也许它可以提供帮助。
你能创建一个 jsfiddle 吗？
我越来越近了。我发现数字 250 是关键。我需要以某种方式将该数字设置为 13vw
我试过这样：radius = Math.round( (0.1302 * $(window).width()) / Math.tan( Math.PI / itemLength ) );但这给出了与数字 250 相同的结果
如果您的屏幕尺寸为 1920，则乘法结果为 250。jsfiddle 在运行时显示空白屏幕。

【解决方案2】：

我发现密钥是 250。假设你有一个 1920 像素宽度的窗口，250 是 1920 的 13.02%。所以我确定我需要 13.02% 的窗口宽度。

我通过这样做获得了这一点：

radius = Math.round10( (($(window).width()) * 0.1302) / Math.tan( Math.PI / itemLength ) );

Math.round10(); // rounds to the nearest decimal. 
$(window).width(); // is the width of the window. In my case 1920px
0.1302 is 13.02% // when you multiply it with something.

最终结果是我得到一个基于 13.02vw 的半径

【讨论】：