使用Glide加载SVG时，图像变得模糊 [英] Image becomes blurry when loading SVG with Glide

问题描述

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

In the app I'm using the following sample to load an SVG image into 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看起来像这样:

An ImageView in xml looks like this:

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

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

So, the problem can be seen on the image below. The right icon was set from app's resources, while the left one is loaded from server using Glide. For some reason image is not scaling properly and looks blurry.

我已经尝试过以下答案的解决方案: 使用Glide加载SVG时图像尺寸太小，但这不起作用.

I've already tried the solution from this answer: Image size too small when loading SVG with Glide, but it doesn't work.

推荐答案

升级到滑行v4之后，问题就消失了.现在，我使用以下代码加载svg:

After upgrading to glide v4 the problem has gone. Now I'm using the following code for loading svg:

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

在我的AppGlideModule中，我有:

And in my AppGlideModule I have:

@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:

SvgDrawableTranscoder converts SVG to PictureDrawable with one simple method:

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类的方式:

And that's how I implemented SvgEncoder class:

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;
        }
    }
}

这篇关于使用Glide加载SVG时，图像变得模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！