CSS의 가운데 피벗을 사용하여 원 중심 만들기

Question

크기 조정 가능한 원을 만들고 정상적으로 만들 때 제대로 작동하지 않기 때문에 CSS의 중심에 원을 그리는 것이 가능한지 물어보고 싶습니다. . jQuery를 사용하여 크기를 부드럽게 만들었지 만 원의 피벗은 중간에 있지 않고 위쪽에 있습니다. 그래서 resize 함수를 호출하면 원 대신에 정상적으로 크기가 조정됩니다.

Answer 1

원을 그대로 유지하려면 원의 위치 (실제로 div)를 절대로 설정하고 왼쪽과 상단을 직접 설정해야합니다. 모든 크기 변경시 왼쪽 및 위쪽을 재설정해야합니다.

당신이 할 수있는 일의 중심에 원을 유지한다 : 당신의 디자인에 달려 있습니다와 높이의

width:100px; 
height:100px; 
left:50%; 
top:50%; 
margin-left:-50px; 
margin-top:-50px; 

양을하지만 마진에 allways 사업부의 크기의 절반을해야한다 (이동)

원 크기를 조정하려면 범위 입력을 사용했습니다. 이 jQuery 코드를 작성했습니다 :

$('input[type="range"]').change(function(){ 
    $('#c') 
     .width($(this).val()) 
     .height($(this).val()) 
     .css('border-radius', $(this).val()/2) 
     .css('margin-left', $(this).val()/-2) 
     .css('margin-top', $(this).val()/-2); 
}); 

이 코드는 정리할 수 있지만 작동합니다. 예를 보면 :

http://jsfiddle.net/mohsen/4PHMj/

업데이트 :

이

여기에 더 깨끗한 코드 : http://jsfiddle.net/mohsen/4PHMj/7/

Answer 2

확인이 밖으로 http://raphaeljs.com/

무엇입니까?

Raphaël은 웹상의 벡터 그래픽 작업을 간소화해야하는 작은 JavaScript 라이브러리입니다. 예를 들어 나만의 특정 차트 또는 이미지 자르기 및 회전 위젯을 만들려면이 라이브러리를 사용하여 간단하고 쉽게 달성 할 수 있습니다.