VarunC VarunC - 27 days ago 7
Javascript Question

jQuery Circle Progressbar starting 0 value is incorrectly showing

http://jsbin.com/nadozi/edit?html,js,output

Here is my JSBin.

I'm trying to initialize the circle with

value = 0
, but it shows a Dot as starting point. Only happens when
lineCap
is round. How can I hide it and start as blank grayed circle when starting fresh circle?

This is the library I'm trying to use:
https://github.com/kottenator/jquery-circle-progress

Answer

The issue was identified and acknowledged here - GitHub - Issue #108

The workaround to bypass drawing when value is 0 also worked:

drawArc: function(v) {
  // introduced this value check so that arc is rendered only when value is > 0
  if (this.getValue() > 0) {
    var ctx = this.ctx,
        r = this.radius,
        t = this.getThickness(),
        a = this.startAngle;

    ctx.save();
    ctx.beginPath();

    if (!this.reverse) {
      ctx.arc(r, r, r - t / 2, a, a + Math.PI * 2 * v);
    } else {
      ctx.arc(r, r, r - t / 2, a - Math.PI * 2 * v, a);
    }

    ctx.lineWidth = t;
    ctx.lineCap = this.lineCap;
    ctx.strokeStyle = this.arcFill;
    ctx.stroke();
    ctx.restore();
  }
}
Comments