3

I have some rendering problems with svg circular progressbar on retina and non-retina display. I tried to use another plugins, but it's the same problems. All plugins created distorted, jagged lines.

Zoomed screenshot from retina: you can see here the red lines around the gray line zoomed image

I found one interesting thing, if i change the order of colors: first- grey, then (on top) - red, it will be more smooth circles, not so jagged.

But in the project i need the order of colors like in example:

Part of code

var circle = new ProgressBar.Circle('.js_timer', {
        color: '#ccc',
        trailColor: '#e31e24',
        strokeWidth: 6,
        trailWidth: 6,
        duration: 1500,
        easing: 'easeInOut',
        text: {
            value: null
        }
    });

    circle.animate(0.7);

Full example: http://jsfiddle.net/ouwumbu0/14/

Thanks for the help!

Alexander Torn
  • 31
  • 2
  • I'm afraid this question is of little use here without a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) to illustrate the problem. – r3mainer Jan 05 '16 at 14:53
  • 1
    @squeamishossifrage I have added minimal and complete example to jsfiddle and posted link here. And i have added the image that illustrated the problem. Do you need something else? I will do! – Alexander Torn Jan 05 '16 at 14:59
  • Ah, sorry. I missed the jsfiddle link. It looks like this is a problem with the progressbar.js library, which is drawing the darker circle underneath the grey circle. In the antialiased parts at the edges of the circles, the two colours are blending, resulting in a dark outline. You'll have to use a different library, or write your own code that draws only the visible parts of the lower circle. – r3mainer Jan 05 '16 at 15:23
  • i've already tried another libraries. Looks like the problem in svg rendering, not in the code. – Alexander Torn Jan 05 '16 at 17:22
  • 1
    No, there's nothing wrong with the SVG rendering. Objects are combined by simple alpha compositing, which is why you're seeing these edge effects. Either find a better library, or write your own code that only draws the visible parts of each circular segment. – r3mainer Jan 05 '16 at 19:38
  • Squeamish is correct. You are drawing a light grey arc on top of a dark red circle. The anti-aliasing from the dark red circle is showing up around the edges of the grey arc. The effect is probably being exacerbated by the small size of your circles. You could reduce the effect by switching the colours around (ie. draw red on top of grey). Or, as Squeamish suggests, modify the code to only draw the part of the red circle that is not covered by grey. Or find another library that works that way. – Paul LeBeau Jan 05 '16 at 23:31
  • @PaulLeBeau Thanks for the comment. Do you have any idea how to draw the part of the red circle that is not covered by grey? I have no idea how to do this. – Alexander Torn Jan 20 '16 at 13:15
  • 2
    Here is a quick non-animated example: https://jsfiddle.net/ycbLfjyt/1/ – Paul LeBeau Jan 20 '16 at 13:45

0 Answers0