如何创建圆形图库

Question

我必须在图像中显示圈子中的客户徽标，我试过但是 没有得到完美的圆圈，有任何可用的模板吗？

Answer 1

这样的东西？

要计算圆圈上的点，您可以使用：

var x = Math.cos(point) * size;
var y = Math.sin(point) * size; 

然后问题就像我在下面做的那样循环，或者只是手动计算圆圈中的点并硬编码。

＆＃13;

＆＃13;

function getCircle(offset, size, point, circlesize) {
  var x = Math.cos(point) * size;
  var y = Math.sin(point) * size; 
  var $div = $('<div class="picturediv"></div>');
  var $wrap = $('<div class="wrap"></div>');
  $wrap.css({
    top: offset + 'px',
    left: offset + 'px'
  });
  
  
  $div.css({
    top: (size+x) + 'px',
    left: (size+y) + 'px',
    width: circlesize + 'px',
    height: circlesize + 'px'
  });
  $wrap.append($div);
  $('#wrap').append($wrap)
}

for(var c=0;c<6;c++) {
   getCircle(200, 100,c * 45,50);
}
for(var c=0;c<=10;c++) {
   getCircle(100, 200,c * 25.7, 75);
}

＆＃13;

.picturediv {
   width: 50px;
   height: 50px;
   background-color:black;
   border: 1px solid red;
   border-radius:50%;
   position: absolute;
   top: 0px;
   left: 0px;
   background-image: url(https://i.imgur.com/AilIzSF.jpg);
   background-position: -219px -193px;;
   background-repeat: no-repeat;
   
}
.wrap {
  position: relative;
  left: 0px;
  left: 0px;
}
#wrap {
   width:100%;
   height: 100%;
   background-color: gray;
   position: relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
  <div class="wrap">
    <div class="picturediv" style="width:120px;height:120px;left:265px;top:265px;"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;