使用 Glide 加载 SVG 时图像变得模糊答案

【问题标题】：Image becomes blurry when loading SVG with Glide使用 Glide 加载 SVG 时图像变得模糊
【发布时间】：2018-03-22 15:36:04
【问题描述】：

在应用程序中，我使用以下示例将 SVG 图像加载到 ImageView 中：

Glide.with(context)
                .using(Glide.buildStreamModelLoader(Uri.class, context), InputStream.class)
                .from(Uri.class)
                .as(SVG.class)
                .transcode(new SvgDrawableTranscoder(), PictureDrawable.class)
                .sourceEncoder(new StreamEncoder())
                .cacheDecoder(new FileToStreamDecoder<>(new SvgDecoder()))
                .decoder(new SvgDecoder())
                .listener(new SvgSoftwareLayerSetter())
                .diskCacheStrategy(DiskCacheStrategy.NONE)
                .load(uri)
                .into(imageView);

xml 中的 ImageView 如下所示：

       <ImageView
        android:layout_width="46dp"
        android:layout_height="46dp"
        android:layout_marginTop="25dp"
        android:layout_gravity="center"
       />

因此，可以在下图中看到问题。右边的图标是从应用程序的资源中设置的，而左边的图标是使用 Glide 从服务器加载的。由于某种原因，图像无法正确缩放并且看起来很模糊。

我已经尝试过这个答案的解决方案： Image size too small when loading SVG with Glide，但它不起作用。

【问题讨论】：

尝试Drawable d = imageView.getDrawable() 并使用Log.d 转储d.getClass()、d.getIntrinsicWidth() 和d.getIntrinsicHeight()，现在你在logcat 上看到了什么？
左边是：d.getIntrinsicWidth() = 46, d.getIntrinsicHeight() = 46 右边是：d.getIntrinsicWidth() = 69, d.getIntrinsicHeight() = 69
那么d.getClass() 呢？是 android.graphics.drawable.PictureDrawable 和 android.graphics.drawable.BitmapDrawable 吗？如果您使用更大的ImageView，getIntrinsicWidth / getIntrinsicHeight 也会发生变化吗？例如 256px x 256 px
左边是android.graphics.drawable.PictureDrawable的实例我将ImageView的大小设置为56dp x 56dp后，内在的宽度/高度没有改变。
右边是android.support.graphics.drawable.VectorDrawableCompat，ImageView设置不同大小后，固有宽/高也保持不变，但图像缩放正确。

标签： java android svg android-glide

【解决方案1】：

升级到 glide v4 后问题消失了。现在我使用以下代码加载 svg：

      GlideApp.with(context)
            .as(PictureDrawable.class)
            .transition(withCrossFade())
            .fitCenter()
            .listener(new SvgSoftwareLayerSetter())
            .apply(RequestOptions.diskCacheStrategyOf(DiskCacheStrategy.RESOURCE))
            .load(uri).into(imageView);

在我的 AppGlideModule 中有：

@Override
public void registerComponents(@NonNull Context context, @NonNull Glide glide, Registry registry) {
    registry.register(SVG.class, PictureDrawable.class, new SvgDrawableTranscoder())
            .prepend(SVG.class, new SvgEncoder())
            .append(InputStream.class, SVG.class, new SvgDecoder());
}

SvgDrawableTranscoder 使用一种简单的方法将 SVG 转换为 PictureDrawable：

public class SvgDrawableTranscoder implements ResourceTranscoder<SVG, PictureDrawable> {

    @Override
    public Resource<PictureDrawable> transcode(@NonNull Resource<SVG> toTranscode, @NonNull Options options) {
        SVG svg = toTranscode.get();
        Picture picture = svg.renderToPicture();
        PictureDrawable drawable = new PictureDrawable(picture);
        return new SimpleResource<>(drawable);
    }
}

这就是我实现 SvgEncoder 类的方式：

public class SvgEncoder implements ResourceEncoder<SVG>{
    @NonNull
    @Override
    public EncodeStrategy getEncodeStrategy(@NonNull Options options) {
        return EncodeStrategy.SOURCE;
    }

    @Override
    public boolean encode(@NonNull Resource<SVG> data, @NonNull File file, @NonNull Options options) {
        try {
            SVG svg = data.get();
            Picture picture = svg.renderToPicture();
            picture.writeToStream(new FileOutputStream(file));
            return true;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
    }
}

【讨论】：

但是我在哪里可以找到 SVG.class？在此先感谢:)
@RadoVidjen - 我正在使用这个库：bigbadaboom.github.io/androidsvg 只需将其添加到您的依赖项中： implementation 'com.caverock:androidsvg:1.2.1'
感谢您的回答！我还有一个问题：new SvgDrawableTranscoder() 来自哪里？
@RadoVidjen 我已经用 SvgDrawableTranscoder 类代码编辑了我的答案。
在 Svg 编码器中 picture.writeToStream 已从 API 29 中删除，还有其他选择吗？

【解决方案2】：

对于 Android VectorDrawables，令人惊讶的是以下对我有用（请参阅 this post）：

Glide.with(context).load(myImage).dontTransform().into(myView);

【讨论】：