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

Question

我有一个免费的 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/

这里是要求的图片：

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

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

Answer 1

我可能是错的，但我认为

Math.tan( Math.PI / itemLength )

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

然后250除以前一个结果。我想用 vw 交换 250 会导致值过高。如果您知道它看起来不错的视图宽度，那么您可以尝试类似的方法：

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

Answer 2

我发现密钥是 250。250 是 1920 的 13.02%，假设您有 1920 像素的宽度 window，我这样做。所以我发现我需要 window 宽度的 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的半径

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

Make a Circle Radius Based on viewportwidth (vw)

javascript

math

jquery

gsap