javascript – 基于viewportwidth(vw)制作圆弧半径

我有一个免费的jQuery图像库,我正在尝试进行一些修改,以使其适合我的项目.

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

圆的半径以这种方式定义：

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

然而我需要的是根据viewportwidth(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/

解决方法:

我想错了但是我想错了

Math.tan( Math.PI / itemLength )

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

然后将250除以前一个结果.
我想用vw交换250会导致值过高.
如果您知道viewwidth它看起来很好,那么您可以尝试以下方法：

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

标签：jquery,javascript,math,tweenmax
来源： https://codeday.me/bug/20190711/1432549.html