Android - Glide 4.0.0-RC0：成功加载 SVG 后如何为 ImageView 设置色调颜色

Question

我关注了这个示例：https://github.com/bumptech/glide/tree/master/samples/svg/src/main/java/com/bumptech/glide/samples/svg

使用 Glide 4.0.0-RC0 成功加载 SVG 文件后，我想为 ImageView 设置色调颜色，但 setColorFilter 不起作用

我的来源：

package com.example.quangson.glidesvg;

import static com.bumptech.glide.load.resource.drawable.DrawableTransitionOptions.withCrossFade;

import android.content.ContentResolver;
import android.graphics.PorterDuff;
import android.graphics.drawable.PictureDrawable;
import android.net.Uri;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;
import com.bumptech.glide.RequestBuilder;
import com.example.quangson.glidesvg.glide.GlideApp;
import com.example.quangson.glidesvg.glide.SvgSoftwareLayerSetter;

public class MainActivity extends AppCompatActivity {

    private static final String TAG = "SVGActivity";
    private ImageView imageViewSVG;
    private ImageView imageViewPNG;
    private RequestBuilder<PictureDrawable> requestBuilder;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageViewSVG = (ImageView) findViewById(R.id.svg_image_view1);
        imageViewPNG = (ImageView) findViewById(R.id.svg_image_view2);

        imageViewPNG.setImageResource(R.drawable.image_mylogo);

        requestBuilder = GlideApp.with(this)
                .as(PictureDrawable.class)
                .error(R.drawable.image_error)
                .transition(withCrossFade())
                .listener(new SvgSoftwareLayerSetter());
        Uri uri = Uri.parse(ContentResolver.SCHEME_ANDROID_RESOURCE + "://" + getPackageName() + "/"  + R.raw.android_toy_h);
        requestBuilder.load(uri).into(imageViewSVG);

        imageViewSVG.setColorFilter(getResources().getColor(R.color.colorAccent), PorterDuff.Mode.SRC_IN);
        imageViewPNG.setColorFilter(getResources().getColor(R.color.colorAccent), PorterDuff.Mode.SRC_IN);
    }
}

在我的来源中：

我将 PNG 图像（从 res/drawable）加载到 imageViewPNG 和 setColorFilter for imageViewPNG ⇒ WORKING

我将 SVG 图像（从 res/raw）加载到 imageViewSVG 和 setColorFilter for imageViewSVG ⇒ 不工作（成功加载 SVG 文件但无法 setColorFilter）

请帮我为 imageViewSVG 设置色调。

---

我尝试像下面的代码进行编辑以制作生成 BitmapDrawable 的 SvgDrawableTranscoder（然后将 setColorFilter），但它不起作用，帮帮我？

package com.sonzero.chibiz.glide;

import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Picture;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.PictureDrawable;

import com.bumptech.glide.load.engine.Resource;
import com.bumptech.glide.load.resource.SimpleResource;
import com.bumptech.glide.load.resource.transcode.ResourceTranscoder;
import com.caverock.androidsvg.SVG;

/**
 * Convert the {@link SVG}'s internal representation to an Android-compatible one
 * ({@link Picture}).
 */
public class SvgDrawableTranscoder implements ResourceTranscoder<SVG, BitmapDrawable> {
    @Override
    public Resource<BitmapDrawable> transcode(Resource<SVG> toTranscode) {
        SVG svg = toTranscode.get();
        Picture picture = svg.renderToPicture();
        PictureDrawable drawable = new PictureDrawable(picture);
        Bitmap bitmap = asBitmap(drawable);
        BitmapDrawable mDrawable = new BitmapDrawable(bitmap);
        return new SimpleResource<BitmapDrawable>(mDrawable);
    }

    public Bitmap asBitmap(PictureDrawable pd) {
        Bitmap bitmap = Bitmap.createBitmap(pd.getIntrinsicWidth(),pd.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        canvas.drawPicture(pd.getPicture());
        return bitmap;
    }
}

Answer 1

Glide SVG 加载器生成 PictureDrawable。上次查了一下，PictureDrawables 不支持setColorFilter() 方法。

您可以尝试制作自己的SvgDrawableTranscoder 版本，它会生成BitmapDrawable，并使用AndroidSVG 的renderToCanvas() 方法绘制到该版本中。

更新

AndroidSVG 1.4+ 现在支持在渲染时传递额外的 CSS。创建一个RenderOptions 对象并使用.css() 提供一些CSS 规则。然后，您可以将该 RenderOptions 对象传递给您的 SvgDrawableTranscoder 中的 renderToPicture()。

RenderOptions  renderOptions = RenderOptions.create().css("path { fill: red; }");
Picture picture = svg.renderToPicture(renderOptions);
...etc...

RenderOptions documentation

Answer 2

我的方法工作正常

Step-1创建更新imageview颜色的方法

fun ImageView.paintColor(colorString: String) {
    val paint = Paint()
    val colorFilter = PorterDuffColorFilter(Color.parseColor(colorString), PorterDuff.Mode.SRC_ATOP)
    paint.colorFilter = colorFilter
    setLayerPaint(paint)
}


                      

第 2 步在您想要更新此图像颜色的地方简单调用此函数

 yourImageView.paintColor("#ff0000")