Rounded line corners about jquery-circle-progress HOT 7 CLOSED

Hi!

Sorry, I have not implemented this option yet (it was not required till now).

However, you may do next:

$.circleProgress.defaults.drawArc = function(v) {
    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 = "round"; // this line do the trick that you need
    ctx.strokeStyle = this.arcFill;
    ctx.stroke();
    ctx.restore();
}

$.circleProgress.defaults.drawFrame = function(v) {
    this.lastFrameValue = v;
    this.ctx.clearRect(0, 0, this.size, this.size);
    this.drawEmptyArc(v); // we switch this line ...
    this.drawArc(v); // ... and this one
}

Looks like a hack but it works. Probably I'd implement this option in next version

from jquery-circle-progress.

I close this issue now. But no worries, I'm going to implement "nice way" to make corners rounded in the next version

from jquery-circle-progress.

Awesome man!

from jquery-circle-progress.

Я в настройках искал строку "lineCap"
Не найдя, полез в код, но не знал как поправить его нормально.

from jquery-circle-progress.

Да, я специально оставил лазейку в виде $.circleProgress.defaults для сложной кастомизации.

FYI, по сути $.circleProgress.defaults - это прототип конструктора, поэтому изменив что-то в defaults, ты изменяешь это во всех экземплярах на странице (но чтобы изменения вступили в силу, надо сделать el.circleProgress() еще раз)

from jquery-circle-progress.

Да, уже догадался :)

from jquery-circle-progress.

I've released v1.1.2 and there is new config option: lineCap: "round" Happy New Year! ;)

from jquery-circle-progress.