android - 自定义ViewGroup实现圆角边框效果外沿内容无法擦去？

Question

在对viewGroup实现圆角边框效果，我是我的代码：

public class NewViewGroup extends FrameLayout {
    public NewViewGroup(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onLayout(boolean c, int l, int t, int r, int b) {
        super.onLayout(c, l, t, r, b);
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(Color.BLUE);
        paint.setStyle(Paint.Style.FILL);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        canvas.drawRoundRect(new RectF(0, 0, getMeasuredWidth(), getMeasuredHeight()), 120, 120, paint);
    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }
}

测试了一下：

<cn.litforest.source.widget.NewViewGroup
        android:layout_below="@+id/collapse_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:background="@drawable/raichu_face_by_keafox"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    </cn.litforest.source.widget.NewViewGroup>

效果图：

出现问题，没办法把圆角外面的内容擦去，请问该怎么解决？

Answer 1

Check out this article Image Composition with Xfermode and Arbitrary Shape ImageView

The key reason is

This is because when drawing directly through the Canvas#drawXX method, SRC is only the pixels within the graphic. For example, if you draw a circle, then SRC (the pixel to be drawn) is only the pixel within the circle, that is to say, the picture and The pixels where the circles do not overlap will not change in any way, and of course they will not disappear.

Answer 2

I wanted to use PorterDuffXfermode to create a rounded corner effect before, but I couldn’t do it. Now I use clipPath to cut the canvas to do it.
Code changed to:

@Override
    protected void dispatchDraw(Canvas canvas) {
        Path path = new Path();
        path.addRoundRect(new RectF(0, 0, getMeasuredWidth(), getMeasuredHeight()), 60, 60, Path.Direction.CW);
        canvas.clipPath(path, Region.Op.REPLACE);
        super.dispatchDraw(canvas);

    }

Screenshot of effect:

That’s it. In the question, doesn't PorterDuff.Mode.DST_IN display the intersection of the lower layer? I don't understand why the outer edge also comes out?

Answer 3

Why do I see the cut effect in the layout file? Running with a mobile phone is ineffective