xvrh / lottie-flutter

Render After Effects animations natively on Flutter. This package is a pure Dart implementation of a Lottie player.
https://pub.dev/packages/lottie
MIT License
1.17k stars 200 forks source link

the lottie file with image displayed on the screen is abnormal #187

Open chendanfeng00 opened 2 years ago

chendanfeng00 commented 2 years ago

i write the code like this: return Lottie.asset( "assets/like.json", repeat: false, ); And the lottie file has a image file. but the code run on the screen is abnormal。 I find that the reason is in the image_layer.dart:

@override
  void drawLayer(Canvas canvas, Size size, Matrix4 parentMatrix,
      {required int parentAlpha}) {
    var bitmap = getBitmap();
    if (bitmap == null) {
      return;
    }
    var density = window.devicePixelRatio;

    paint.setAlpha(parentAlpha);
    if (_colorFilterAnimation != null) {
      paint.colorFilter = _colorFilterAnimation!.value;
    }
    canvas.save();
    canvas.transform(parentMatrix.storage);
    var src =
        Rect.fromLTWH(0, 0, bitmap.width.toDouble(), bitmap.height.toDouble());
    var dst = Rect.fromLTWH(
        0, 0, bitmap.width * density, bitmap.height.toDouble() * density);
    canvas.drawImageRect(bitmap, src, dst, paint);
    canvas.restore();
  }

the src rect is different from the dst rect. it makes that the image is larger than normal size。 @xvrh

chendanfeng00 commented 2 years ago

i write the code like this: return Lottie.asset( "assets/like.json", repeat: false, ); And the lottie file has a image file. but the code run on the screen is abnormal。 I find that the reason is in the image_layer.dart:

@override
  void drawLayer(Canvas canvas, Size size, Matrix4 parentMatrix,
      {required int parentAlpha}) {
    var bitmap = getBitmap();
    if (bitmap == null) {
      return;
    }
    var density = window.devicePixelRatio;

    paint.setAlpha(parentAlpha);
    if (_colorFilterAnimation != null) {
      paint.colorFilter = _colorFilterAnimation!.value;
    }
    canvas.save();
    canvas.transform(parentMatrix.storage);
    var src =
        Rect.fromLTWH(0, 0, bitmap.width.toDouble(), bitmap.height.toDouble());
    var dst = Rect.fromLTWH(
        0, 0, bitmap.width * density, bitmap.height.toDouble() * density);
    canvas.drawImageRect(bitmap, src, dst, paint);
    canvas.restore();
  }

the src rect is different from the dst rect. it makes that the image is larger than normal size。 @xvrh

the question is resolved

premedios-i9 commented 2 years ago

What did you do because I'm having the same issue.