javascript - 根据视口(viewport)宽度(vw)制作圆半径

Question

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

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

圆的半径是这样定义的:

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

但是我需要的是根据视口(viewport)宽度(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/

Answer 1

我可能是错的，但我认为

Math.tan( Math.PI / itemLength )

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

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

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