javascript - 带有圆 Angular 末端的 Canvas 矩形(进度条) - 值较低的问题

Question

我正在尝试制作一个宽度取决于百分比的矩形，在我用 0% 测试某些内容之前，它工作得很好。

我希望它在 0% 时消失，但当我选择圆 Angular 时，它似乎有一个最小宽度。对于较低的百分比数字，同样的问题也很明显，根据我所收集的信息，如果百分比低于 6%，它会以相反的方式插入对象，此时矩形会变成圆形，并且不能再变小。有解决方法吗？我一心只想着它，目前只需要解决这个问题。

const canvas = $("#progressBar");
const ctx = canvas.get(0).getContext("2d");

// rectWidth = 630 * percent / 100 (in this case 100%)
const rectX = 60;
const rectY = 10;
const rectWidth = 630 * 100 / 100;
const rectHeight = 38;
const cornerRadius = 37;

ctx.lineJoin = "round";
ctx.lineWidth = cornerRadius;
ctx.strokeStyle = '#FF1700';
ctx.fillStyle = '#FF1700';

ctx.strokeRect(rectX + (cornerRadius / 2), rectY + (cornerRadius / 2), rectWidth - cornerRadius, rectHeight - cornerRadius);
ctx.fillRect(rectX + (cornerRadius / 2), rectY + (cornerRadius / 2), rectWidth - cornerRadius, rectHeight - cornerRadius);

// rectWidth = 630 * percent / 100 (in this case 0%)
const rectX2 = 60;
const rectY2 = 60;
const rectWidth2 = 630 * 0 / 100;
const rectHeight2 = 38;
const cornerRadius2 = 37;

ctx.lineJoin = "round";
ctx.lineWidth = cornerRadius;
ctx.strokeStyle = '#FF1700';
ctx.fillStyle = '#FF1700';

ctx.strokeRect(rectX2 + (cornerRadius2 / 2), rectY2 + (cornerRadius2 / 2), rectWidth2 - cornerRadius2, rectHeight2 - cornerRadius2);
ctx.fillRect(rectX2 + (cornerRadius2 / 2), rectY2 + (cornerRadius2 / 2), rectWidth2 - cornerRadius2, rectHeight2 - cornerRadius2);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="progressBar" width="750" height="120">
</canvas>

代码:

Answer 1

当你处于0%时，你实现它的方式总是有一些“问题”。 。如果你想什么都没有，那么 0%并且当百分比增长时它保持一致，您不想使用 ctx.lineJoin = "round"

作为解决方法，您可以使用方法 arc() 来绘制圆 Angular 。 。

关于 arc(x, y, radius, startAngle, endAngle) ，我们知道x = r , y = r和radius = r

我们只需要一些几何计算即可获得所需的值startAngle (α) 和 endAngle (α+Δ)。

用三 Angular 函数cosine ，我们有Math.cos(θ) = (r - p) / r ⇒ θ = Math.acos((r - p) / r) .

我们有和α = Math.PI - θ我们知道Δ = 2 * θ ⇒ (α+Δ) = Math.PI + θ

最后:

• startAngle α = Math.PI - Math.acos((r - p) / r)
• endAngle (α+Δ) = Math.PI + Math.acos((r - p) / r)

在我们的例子中，r = h /2所以当 p < r ⇔ p < h / 2 ，这给了我们:

ctx.arc(h / 2, h / 2, h / 2, Math.PI - Math.acos((h - 2 * p) / h), Math.PI + Math.acos((h - 2 * p) / h))
ctx.fillStyle = '#FF1700';
ctx.fill();

const canvas = $("#progressBar");
const ctx = canvas.get(0).getContext("2d");

const h = 100;
const p = 30;

/* To visalize ------------------------------------------------------*/
ctx.beginPath();
ctx.arc(h / 2, h / 2, h / 2, Math.PI / 2, 3 / 2 *Math.PI);
ctx.lineTo(500, 0);
ctx.arc((h / 2) + 500, h / 2, h / 2, 3 / 2 *Math.PI,Math.PI / 2);
ctx.lineTo(h / 2, h);
ctx.strokeStyle = '#000000';
ctx.stroke();
ctx.closePath();
/* ------------------------------------------------------------------*/

ctx.beginPath();
ctx.arc(h / 2, h / 2, h / 2, Math.PI - Math.acos((h - 2 * p) / h), Math.PI + Math.acos((h - 2 * p) / h));
ctx.fillStyle = '#FF1700';
ctx.fill();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="progressBar" width="750" height="120">
</canvas>

现在，如果我们想要这种外观(红色部分，我们想要骑上灰色部分)。该方法包括执行相同的操作，但只进行一半的进度，然后对称地重复相同的图形(阴影区域)。

为了绘制对称形状，我们将使用 ctx.scale(-1, 1)并与 save() restore()方法。第二条圆弧中心的 x 位置将为 - (r - p) ⇔ -((h / 2) - p)就像我们将在水平对称中工作一样，最终将是 (h / 2) - p

ctx.beginPath();
ctx.arc(h / 2, h / 2, h / 2, Math.PI - Math.acos((h - p) / h), Math.PI + Math.acos((h - p) / h));
ctx.save();
ctx.scale(-1, 1);
ctx.arc((h / 2) - p, h / 2, h / 2, Math.PI - Math.acos((h - p) / h), Math.PI + Math.acos((h - p) / h));
ctx.restore();
ctx.fillStyle = '#FF1700';
ctx.fill();

const canvas = $("#progressBar");
const ctx = canvas.get(0).getContext("2d");

const h = 100;
const p = 25;

/* To visalize ------------------------------------------------------*/
ctx.beginPath();
ctx.arc(h / 2, h / 2, h / 2, Math.PI / 2, 3 / 2 *Math.PI);
ctx.lineTo(500, 0);
ctx.arc((h / 2) + 500, h / 2, h / 2, 3 / 2 *Math.PI,Math.PI / 2);
ctx.lineTo(h / 2, h);
ctx.strokeStyle = '#000000';
ctx.stroke();
ctx.closePath();
/* ------------------------------------------------------------------*/

ctx.beginPath();
ctx.arc(h / 2, h / 2, h / 2, Math.PI - Math.acos((h - p) / h), Math.PI + Math.acos((h - p) / h));
ctx.save();
ctx.scale(-1, 1);
ctx.arc((h / 2) - p, h / 2, h / 2, Math.PI - Math.acos((h - p) / h), Math.PI + Math.acos((h - p) / h));
ctx.restore();
ctx.fillStyle = '#FF1700';
ctx.fill();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="progressBar" width="750" height="120">
</canvas>

这将一直持续到 p <= h在我们需要更改代码后，请考虑矩形部分。我们将使用 if...else 来做到这一点。

if(p <= h){
  ctx.beginPath();
  ctx.arc(h / 2, h / 2, h / 2, Math.PI - Math.acos((h - p) / h), Math.PI + Math.acos((h - p) / h));
  ctx.save();
  ctx.scale(-1, 1);
  ctx.arc((h / 2) - p, h / 2, h / 2, Math.PI - Math.acos((h - p) / h), Math.PI + Math.acos((h - p) / h));
  ctx.restore();
  ctx.fillStyle = '#FF1700';
  ctx.fill();
} else {
  ctx.beginPath();
  ctx.arc(h / 2, h / 2, h / 2, Math.PI / 2, 3 / 2 *Math.PI);
  ctx.lineTo(p - 2 * h, 0);
  ctx.arc(p - (h / 2), h / 2, h / 2, 3 / 2 *Math.PI,Math.PI / 2);
  ctx.lineTo(h / 2, h);
  ctx.fillStyle = '#FF1700';
  ctx.fill();
}

const canvas = $("#progressBar");
const ctx = canvas.get(0).getContext("2d");

const h = 100;
const p = 350;

/* To visalize ------------------------------------------------------*/
ctx.beginPath();
ctx.arc(h / 2, h / 2, h / 2, Math.PI / 2, 3 / 2 *Math.PI);
ctx.lineTo(500, 0);
ctx.arc((h / 2) + 500, h / 2, h / 2, 3 / 2 *Math.PI,Math.PI / 2);
ctx.lineTo(h / 2, h);
ctx.strokeStyle = '#000000';
ctx.stroke();
ctx.closePath();
/* ------------------------------------------------------------------*/

if(p <= h){
  ctx.beginPath();
  ctx.arc(h / 2, h / 2, h / 2, Math.PI - Math.acos((h - p) / h), Math.PI + Math.acos((h - p) / h));
  ctx.save();
  ctx.scale(-1, 1);
  ctx.arc((h / 2) - p, h / 2, h / 2, Math.PI - Math.acos((h - p) / h), Math.PI + Math.acos((h - p) / h));
  ctx.restore();
  ctx.fillStyle = '#FF1700';
  ctx.fill();
} else {
  ctx.beginPath();
  ctx.arc(h / 2, h / 2, h / 2, Math.PI / 2, 3 / 2 *Math.PI);
  ctx.lineTo(p - 2 * h, 0);
  ctx.arc(p - (h / 2), h / 2, h / 2, 3 / 2 *Math.PI,Math.PI / 2);
  ctx.lineTo(h / 2, h);
  ctx.fillStyle = '#FF1700';
  ctx.fill();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="progressBar" width="750" height="120">
</canvas>

现在，我们可以结束了:

const canvas = $("#progressBar");
const ctx = canvas.get(0).getContext("2d");
const canvasWidth = ctx.canvas.width;
const canvasHeight = ctx.canvas.height;

class progressBar {

  constructor(dimension, color, percentage){
    ({x: this.x, y: this.y, width: this.w, height: this.h} = dimension);
    this.color = color;
    this.percentage = percentage / 100;
    this.p;
  }
  
  static clear(){
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);  
  }
  
  draw(){
    // Visualize -------
    this.visualize();
    // -----------------
    this.p = this.percentage * this.w;
    if(this.p <= this.h){
      ctx.beginPath();
      ctx.arc(this.h / 2 + this.x, this.h / 2 + this.y, this.h / 2, Math.PI - Math.acos((this.h - this.p) / this.h), Math.PI + Math.acos((this.h - this.p) / this.h));
      ctx.save();
      ctx.scale(-1, 1);
      ctx.arc((this.h / 2) - this.p - this.x, this.h / 2 + this.y, this.h / 2, Math.PI - Math.acos((this.h - this.p) / this.h), Math.PI + Math.acos((this.h - this.p) / this.h));
      ctx.restore();
      ctx.closePath();
    } else {
      ctx.beginPath();
      ctx.arc(this.h / 2 + this.x, this.h / 2 + this.y, this.h / 2, Math.PI / 2, 3 / 2 *Math.PI);
      ctx.lineTo(this.p - this.h + this.x, 0 + this.y);
      ctx.arc(this.p - (this.h / 2) + this.x, this.h / 2 + this.y, this.h / 2, 3 / 2 * Math.PI, Math.PI / 2);
      ctx.lineTo(this.h / 2 + this.x, this.h + this.y);
      ctx.closePath();
    }
    ctx.fillStyle = this.color;
    ctx.fill();
  }
  
  visualize(){
    if (wholeprogressbar.checked === true){
      this.showWholeProgressBar();
    }
  }

  showWholeProgressBar(){
    ctx.beginPath();
    ctx.arc(this.h / 2 + this.x, this.h / 2 + this.y, this.h / 2, Math.PI / 2, 3 / 2 * Math.PI);
    ctx.lineTo(this.w - this.h + this.x, 0 + this.y);
    ctx.arc(this.w - this.h / 2 + this.x, this.h / 2 + this.y, this.h / 2, 3 / 2 *Math.PI, Math.PI / 2);
    ctx.lineTo(this.h / 2 + this.x, this.h + this.y);
    ctx.strokeStyle = '#000000';
    ctx.stroke();
    ctx.closePath();
  }
  
  get PPercentage(){
    return this.percentage * 100;
  }
  
  set PPercentage(x){
    this.percentage = x / 100;
  }
  
}

// We create new progress bars

progressbar2 = new progressBar({x: 10, y: 10, width: 400, height: 35}, "#FF1700", 50);
// progressbar2.draw(); ---> No need coz we draw them later

progressbar = new progressBar({x: 10, y: 60, width: 400, height: 35}, "#FF1700", 0);
// progressbar.draw(); ---> No need coz we draw them later

// For showing the current percentage (just for example)
setInterval(function() {
	let currentPercentage = progressbar.PPercentage;
    document.getElementById("percentage").innerHTML = `${Math.round(currentPercentage)} %`;
}, 20);

// We draw the progress-bars (just for example, one fix at 50% and one moving on a range from 0 to 100 %)

let i=0;
setInterval(function() {
  const start = 0;
  const end = 100;
  const step = 0.3;  
  progressbar.PPercentage = i * step;
  progressBar.clear();
  progressbar.draw();
  progressbar2.draw();
  i++;
  if(progressbar.PPercentage > end){
    i = start;
  }
}, 20);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<canvas id="progressBar" width="420" height="100"></canvas>

<div>
    <p> Progression at <span id="percentage"></span></p>
    <input type="checkbox" id="wholeprogressbar" name="wholeprogressbar" onclick="progressbar.draw()">
    <label for="wholeprogressbar">Visualize all the progress bar (100%)</label>
</div>

编辑:

要创建进度条，您只需创建一个新实例

progressbar = new progressBar({x: PositionXinTheCanvas, y: PositionYinTheCanvas, width: WidthOfTheProgressBar, height: HeightOfTheProgressBar}, "ColorOfTheProgressBar", CurrentProgression);

..然后绘制它

progressbar.draw();

如果您需要清除 Canvas ，请调用clear()方法。如果您想要为进度条设置动画，您将需要它。由于它是静态方法，因此您需要在类 progressBar 上调用它:

progressBar.clear();