Antialiasing issues

[kkizlaitis]

First of all, thank you for this package!

I have downloaded a very simple animation (just an inflating red circle): Recording However, when I render it, it appears pixelated around the edges. Maybe it is because I show it very small? I specify width: 30 and height: 30.

Here is a screenshot of how it looks on an iPhone X:

Would love to hear what could be done to resolve the sharp edges of the circle.

[binqiiyuenan]

I had the same problem with my iPhone 11Pro, which worked well on Android

[kkizlaitis]

I also saw that it doesn't matter what the size of the animation is. My device was iPhone X (not a simulator).

[binqiiyuenan]

Yes, it has nothing to do with size. Have you found a solution later

[kkizlaitis]

Not yet, for now I left it like that... Input from @xvrh would be greatly appreciated 😊

[binqiiyuenan]

I covered the serrate with a line of the same color to solve this problem on the iPhone, I hope it helps you.

[AndrewsXc]

I encountered the same aliasing problem on iPhone 11 devices with lottie 0.7.0+1. And I found that this happens only in iOS 14.

[lifelikejuly]

I have same problem.but it cant find in Android. I see circle draw use path to do will have Antialiasing.

[lifelikejuly]

In fill_content.dart I modify draw func,if is iOS and hasCircle use drawCircle instead of drawPath.

// canvas.drawPath(_path, _paint);
if(Platform.isIOS){
  if(hasCircle){
    var rect = _path.getBounds();
    canvas.drawCircle(rect.center,rect.width / 2,_paint);
  }else{
    canvas.drawPath(_path, _paint);
  }
}else{
  canvas.drawPath(_path, _paint);
}

It is not very well solution,but can solve my problem.Hope it can help you.

[wzono]

In fill_content.dart I modify draw func,if is iOS and hasCircle use drawCircle instead of drawPath.

// canvas.drawPath(_path, _paint);
if(Platform.isIOS){
  if(hasCircle){
    var rect = _path.getBounds();
    canvas.drawCircle(rect.center,rect.width / 2,_paint);
  }else{
    canvas.drawPath(_path, _paint);
  }
}else{
  canvas.drawPath(_path, _paint);
}

It is not very well solution,but can solve my problem.Hope it can help you.

How do I know about hasCircle?

[lifelikejuly]

In fill_content.dart I modify draw func,if is iOS and hasCircle use drawCircle instead of drawPath.

// canvas.drawPath(_path, _paint);
if(Platform.isIOS){
  if(hasCircle){
    var rect = _path.getBounds();
    canvas.drawCircle(rect.center,rect.width / 2,_paint);
  }else{
    canvas.drawPath(_path, _paint);
  }
}else{
  canvas.drawPath(_path, _paint);
}

It is not very well solution,but can solve my problem.Hope it can help you.

How do I know about hasCircle?

Find CircleShape and you can see EllipseContent. If fill_content has EllipseContent mean have circle.

[eggfly]

if(Platform.isIOS){
  final hasCircle = _path.any((path) {
    return path is EllipseContent;
  });
  if(hasCircle){
    var rect = _path.getBounds();
    canvas.drawCircle(rect.center,rect.width / 2,_paint);
  }else{
    canvas.drawPath(_path, _paint);
  }
}else{
  canvas.drawPath(_path, _paint);
}

This code may work but it needs some more tests