Прямоугольник с закругленными углами, как индикатор выполнения?

Question

Я пытаюсь сделать прогресс бар в виде прямоугольника с закругленными углами, нарисованных на холсте, это jsfiddle имеет форму:

http://jsfiddle.net/xT3ax/

this.beginPath(); 
this.moveTo(x + cornerRadius.upperLeft, y); 
this.lineTo(x + width - cornerRadius.upperRight, y); 
this.quadraticCurveTo(x + width, y, x + width, y + cornerRadius.upperRight); 
this.lineTo(x + width, y + height - cornerRadius.lowerRight); 
this.quadraticCurveTo(x + width, y + height, x + width - cornerRadius.lowerRight, y + height); 
this.lineTo(x + cornerRadius.lowerLeft, y + height); 
this.quadraticCurveTo(x, y + height, x, y + height - cornerRadius.lowerLeft); 
this.lineTo(x, y + cornerRadius.upperLeft); 
this.quadraticCurveTo(x, y, x + cornerRadius.upperLeft, y); 
this.closePath(); 

Есть ли простой способ сделать процент эта форма только? или имеют процент одного цвета, а остальные остальные?

Я не могу придумать, как это сделать, за исключением того, что, возможно, сломать фигуру на 4 или 8 частей и нарисовать процент каждой линии или кривой, которая составляет всю форму? как это, но лучше:

http://jsfiddle.net/xT3ax/1/

Answer 1

Вы можете нарисовать процент-ход прямоугольника с закругленными углами, как это:

Полный код находится в нижней части и вот Fiddle: http://jsfiddle.net/m1erickson/P2qTq/

Сначала определите размеры прямоугольника. Вам нужны горизонтальные и вертикальные длины линии и радиус

// define the rectangle 
var horizLineLength=80; 
var vertLineLength=40; 
var cornerRadius=25; 

углового Поскольку вы будете поглаживать прямоугольник постепенно, рассчитывать на то, что накоплена длиной будет начинать каждый сегмент прямоугольника.

// calc some lengths for use in percent complete 
var cornerLength = 2 * cornerRadius * Math.PI; 
var totalLength = cornerLength*4+horizLineLength*2+vertLineLength*2; 

// calc at what accumulated length each part of the rect starts 
var startT=0;       // top line 
var startTR=horizLineLength;   // top-right corner 
var startR=startTR+cornerLength;  // right line 
var startBR=startR+vertLineLength;  // bottom-right corner 
var startB=startBR+cornerLength;  // bottom line 
var startBL=startB+horizLineLength;  // bottom-left corner 
var startL=startBL+cornerLength;  // left line 
var startTL=startL+vertLineLength;  // top-left corner 

Затем постепенно нарисовать прямоугольник, используя определенный процент

// incrementally draw the rectangle 
// based on the specified percentage 
function drawPercentRect(percent){ 

    // use percent to calc the length-traveled-along-rect 
    accumLength = percent/100 * totalLength; 

    // clear the canvas 
    // draw the approprate portion of the top line 
    // draw the approprate portion of the top-right corner 
    // draw the approprate portion of the right line 
    // draw the approprate portion of the bottom-right corner 
    // draw the approprate portion of the bottom line 
    // draw the approprate portion of the bottom-left corner 
    // draw the approprate portion of the left line 
    // draw the approprate portion of the top-left corner 
} 

Вам нужно определить соответствующую длину каждого сегмента рисовать

Для линий, вычислить длину этой линии необходимо. Если линия должна быть полностью вытянута, зажмите размер линии, нарисованный до максимальной длины этой линии. Затем нарисуйте линию от начальной точки до вычисленной конечной точки.

// top line 
    d=accumLength-startT 
    d=Math.min(d,horizLineLength); 
    if(d>0){ 
     x1 = offsetX + cornerRadius; 
     y1 = offsetY; 
     x2 = offsetX + cornerRadius + d; 
     y2 = offsetY; 
     drawLine(x1,y1,x2,y2); 
    } 

Для углов вычислить длину этой дуги. Если угол должен быть полностью вытянут, зажмите размер дуги до максимальной длины угла. Затем нарисуйте дуговую подметку от расчетного начала до вычисленного конца.

// top-right corner 
    d=accumLength-startTR; 
    d=Math.min(d,cornerLength); 
    if(d>0){ 
     x = offsetX + cornerRadius + horizLineLength; 
     y = offsetY + cornerRadius; 
     start = -Math.PI/2; 
     end = -Math.PI/2 + (d/cornerLength * Math.PI/2) ; 
     drawCorner(x,y,start,end);  
    } 

Вот полный код и скрипку: http://jsfiddle.net/m1erickson/P2qTq/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
    #slider-vertical{ height:200px; position:absolute; top:60px; left:350px; } 
    #percent{ width:25px; position:absolute; top:20px; left:340px; border:0; color:blue; font-weight:bold;} 
</style> 

<script> 
    $(function(){ 

     var canvas=document.getElementById("canvas"); 
     var ctx=canvas.getContext("2d"); 

     // styling 
     ctx.lineWidth=15; 
     ctx.strokeStyle="gold"; 

     // define the rectangle 
     var offsetX=75; 
     var offsetY=100; 
     var horizLineLength=80; 
     var vertLineLength=40; 
     var cornerRadius=25; 

     // calc some lengths for use in percent complete 
     var cornerLength = 2 * cornerRadius * Math.PI; 
     var totalLength = cornerLength*4+horizLineLength*2+vertLineLength*2; 


     // calc at what accumulated length each part of the rect starts 
     var startT=0; 
     var startTR=horizLineLength; 
     var startR=startTR+cornerLength; 
     var startBR=startR+vertLineLength; 
     var startB=startBR+cornerLength; 
     var startBL=startB+horizLineLength; 
     var startL=startBL+cornerLength; 
     var startTL=startL+vertLineLength; 

     // percent complete 
     var percent=100; 

     // draw the radius rectangle 
     function drawPercentRect(percent){ 

      // percent expressed as a length-traveled-along-rect 
      accumLength = percent/100 * totalLength; 

      // clear the canvas 
      ctx.clearRect(0,0,canvas.width,canvas.height); 

      // top line 
      d=accumLength-startT 
      d=Math.min(d,horizLineLength); 
      if(d>0){ 
       x1 = offsetX + cornerRadius; 
       y1 = offsetY; 
       x2 = offsetX + cornerRadius + d; 
       y2 = offsetY; 
       drawLine(x1,y1,x2,y2); 
      } 

      // top-right corner 
      d=accumLength-startTR; 
      d=Math.min(d,cornerLength); 
      if(d>0){ 
       x = offsetX + cornerRadius + horizLineLength; 
       y = offsetY + cornerRadius; 
       start = -Math.PI/2; 
       end = -Math.PI/2 + (d/cornerLength * Math.PI/2) ; 
       drawCorner(x,y,start,end);  
      } 

      // right line 
      d=accumLength-startR; 
      d=Math.min(d,vertLineLength); 
      if(d>0){ 
       x1= offsetX + cornerRadius + horizLineLength + cornerRadius; 
       y1= offsetY + cornerRadius; 
       x2= offsetX + cornerRadius + horizLineLength + cornerRadius; 
       y2= offsetY + cornerRadius + d; 
       drawLine(x1,y1,x2,y2); 
      } 

      // bottom-right corner 
      d=accumLength-startBR; 
      d=Math.min(d,cornerLength); 
      if(d>0){ 
       x = offsetX + cornerRadius + horizLineLength; 
       y = offsetY + cornerRadius + vertLineLength; 
       start = 0; 
       end = (d/cornerLength) * Math.PI/2; 
       drawCorner(x,y,start,end);  
      } 

      // bottom line 
      d=accumLength-startB; 
      d=Math.min(d,horizLineLength); 
      if(d>0){ 
       x1= offsetX + cornerRadius + horizLineLength; 
       y1= offsetY + cornerRadius + vertLineLength + cornerRadius; 
       x2 = offsetX + cornerRadius + horizLineLength - d; 
       y2 = offsetY + cornerRadius + vertLineLength + cornerRadius; 
       drawLine(x1,y1,x2,y2); 
      } 

      // bottom-left corner 
      d=accumLength-startBL; 
      d=Math.min(d,cornerLength); 
      if(d>0){ 
       x = offsetX + cornerRadius; 
       y = offsetY + cornerRadius + vertLineLength; 
       start = Math.PI/2; 
       end = Math.PI/2 + (d/cornerLength) * Math.PI/2; 
       drawCorner(x,y,start,end); 
      } 

      // left line 
      d=accumLength-startL; 
      d=Math.min(d,vertLineLength); 
      if(d>0){ 
       x1= offsetX; 
       y1= offsetY + cornerRadius + vertLineLength; 
       x2= offsetX; 
       y2= offsetY + cornerRadius + vertLineLength - d; 
       drawLine(x1,y1,x2,y2); 
      } 

      // top-left corner 
      d=accumLength-startTL; 
      d=Math.min(d,cornerLength); 
      if(d>0){ 
       x = offsetX + cornerRadius; 
       y = offsetY + cornerRadius; 
       start = Math.PI; 
       end = Math.PI + (d/cornerLength) * Math.PI/2; 
       drawCorner(x,y,start,end); 
      } 

     } 

     function drawLine(x1,y1,x2,y2){ 
      ctx.beginPath(); 
      ctx.moveTo(x1,y1) 
      ctx.lineTo(x2,y2); 
      ctx.stroke(); 
     } 

     function drawCorner(x,y,start,end){ 
      ctx.beginPath(); 
      ctx.arc(x,y,cornerRadius,start,end,false); 
      ctx.stroke(); 
     } 


     // slider for demo 
     $("#slider-vertical").slider({ 

      orientation: "vertical", 
      range: "min", 
      min: 0, 
      max: 100, 
      value: 100, 
      slide: function(event, ui) { 
      $("#percent").val(ui.value); 
      drawPercentRect(ui.value); 
      } 
     }); 

     $("#percent").val($("#slider-vertical").slider("value")); 

     // draw at 100% to start 
     drawPercentRect(100); 


}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
    <input type="text" id="percent" /> 
    <div id="slider-vertical"></div> 
</body> 
</html>