帶圓角的帆布矩形作爲進度條嗎？

我試圖在畫布上繪製一個圓角矩形的形式，一個進度條，這的jsfiddle有形狀：帶圓角的帆布矩形作爲進度條嗎？

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/

來源

2013-05-01 mao

試圖瞭解你需要什麼...你要開始與空白區域，然後** **行程圓角矩形件逐件？或者你是否想要**在一塊一塊的矩形中填充**？或別的東西... – markE 2013-05-02 00:53:27

@markE中風我想？我想繪製的矩形一塊一塊的輪廓，所以當進展是100％的完整輪廓繪製和0％沒有任何繪製 – mao 2013-05-02 01:12:53

可以繪製圓角矩形的這樣的比例行程：

enter image description here

的完整代碼在底部，這裏是一個小提琴： 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>

來源

2013-05-02 04:35:30 markE

多數民衆贊成在夢幻般，謝謝你 – mao 2013-05-02 18:38:29

帶圓角的帆布矩形作爲進度條嗎？

回答

相關問題