부분 원/호를 작성하는 방법은 무엇입니까?

Question

strapfork.com에서이 화면을 붙입니다. (strapfork.com 페이지에서 약간 아래로 스크롤하면 stats에서 색상 부분이 숫자에 비례하는 원호가 나타납니다.) 위젯을 어떻게 작성합니까?

그들은 일종의 자바 스크립트를 사용하고 있지만, 같은 방법으로 복제하는 방법을 알 수는 없습니다. Spudley의 의견과 동일

Answer 1

: 라파엘이 일을하고 심지어 삼각 함수와 라파엘 경로 객체의 약간은 당신이 필요로하는 무엇

이전 버전의 브라우저 (IE7 ...)에서 작동합니다. 예를 들어 아래의 코드를 사용해보십시오 :

HTML :

<div id="mytest"></div> 

JS를 : 캔버스 요소, SVG, 또는 콤보와 아마

var paper = Raphael('mytest', 500, 400); 

var background = paper.rect(0, 0, 500, 400, 0); 
background.attr("fill", "#ffffff").attr("stroke", "none"); 

var centerX = 200, centerY = 200, Radius = 100, percent = 95; 
// change the percent value between 0 and 100 

var startArcX = centerX + Radius * Math.cos(Math.PI/2); 
var startArcY = centerY - Radius * Math.sin(Math.PI/2); 

var endArcX = Math.round(centerX + Radius * Math.cos(Math.PI * (0.5 - 0.02 * percent))); 
var endArcY = Math.round(centerY - Radius * Math.sin(Math.PI * (0.5 - 0.02 * percent))); 

var bigArc = (percent>50)?1:0; 

var directionDrawing = 1; 

var stringPath = 'M' + startArcX.toString() + ',' + startArcY.toString() 
       + ' A' + Radius.toString() + ',' + Radius.toString() 
       + ' 0 ' 
       + bigArc.toString() + ',' + directionDrawing.toString() + ' ' 
       + endArcX.toString() + ',' + endArcY.toString(); 



var path1 = paper.path(stringPath); 
path1.attr("stroke", "#ff0000").attr("stroke-width", "20px");