如何創建圓形圖片庫

Question

我必須安排客戶端標識，因爲它顯示在圖像中，我試過但 沒有得到完美的圈子，有任何模板可用於此？

Answer 1

像這樣的事情？

要計算一個圓上的一個點，你可以使用：

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

，然後它的價值或者循環像我一樣下面，或正好在圈內手動計算點和硬編碼的問題他們進來。

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); 
 
}

.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; 
 
}

<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>