如何在 Android ImageView 上制作圆形滤色器？

Question

我正在使用自定义 class（ImageView 的扩展）来获得 XML 圆形图像视图。问题是当我调用 .setColorFilter() 它不遵守相同的 circular/round 界限。

如何让滤色器只影响图像而不影响视图的整个矩形？

这里是我的习惯class供参考：

public class RoundedCornerImageFilterView extends ImageFilterView {
    public RoundedCornerImageFilterView(Context context) {
        super(context);
    }

    public RoundedCornerImageFilterView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public RoundedCornerImageFilterView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public void setImageFilter(int color) {
        this.setColorFilter(color, PorterDuff.Mode.SRC_IN);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        Drawable drawable = getDrawable();

        if (drawable == null) {
            return;
        }

        if (getWidth() == 0 || getHeight() == 0) {
            return;
        }
        Bitmap b = ((BitmapDrawable) drawable).getBitmap();
        Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);
        int w = getWidth();
        int h = getHeight();
        Bitmap roundedCornerBitmap = getRoundedCornerBitmap(bitmap, h, w);
        canvas.drawBitmap(roundedCornerBitmap, 0, 0, null);

    }

    public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int height, int width) {
        Bitmap sbmp;
        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
                bitmap.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = 0xff424242;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0,
                (width), (height));
        final RectF rectF = new RectF(rect);
        final float roundPx = 28;

        paint.setAntiAlias(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(color);
        canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rect, paint);

        return output;
    }

}

我的 xml 实现：

<MY_PATH.RoundedCornerImageFilterView
    android:id="@+id/MY_IMAGE_VIEW"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    />

我正在尝试设置滤色器：

MY_IMAGE_VIEW.setColorFilter(Color.parseColor(color), PorterDuff.Mode.OVERLAY)

过滤器之前（看起来应该如此）：

设置过滤器后（您现在可以看到方形边缘）：

Answer 1

虽然图像（位图）被赋予了圆角，但写入它的 canvas 却没有。由于滤色器应用于 canvas，颜色会溢出到角落。

我建议您将圆角矩形应用于路径，然后将路径剪裁到 canvas。像这样：

public class RoundedImageView extends AppCompatImageView {
    private final Path mPath = new Path();

    public RoundedImageView(Context context) {
        super(context);
        init();
    }

    public RoundedImageView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public RoundedImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        setColorFilter(Color.RED, PorterDuff.Mode.OVERLAY);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mPath.reset();
        mPath.addRoundRect(new RectF(0, 0, w, h), 128, 128, Path.Direction.CW);
    }

    @Override
    public void draw(Canvas canvas) {
        canvas.save();
        canvas.clipPath(mPath);
        super.draw(canvas);
        canvas.restore();
    }
}

我这里使用的是ImageView，但是概念还是一样的。

如果您进行这种类型的裁剪，那么舍入位图就变得多余了，因为它也会被裁剪到路径中。

如何在 Android ImageView 上制作圆形滤色器？

How to make color filter round on an Android ImageView?

android

android-custom-view

android-imageview

android-color