在Android上为imageView渲染圆角

Question

我有以下代码用于渲染带圆角的imageView.

public class RoundedCornerImageView extends ImageView {

private int rounded;
public RoundedCornerImageView(Context context) {
    super(context);
}

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

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


public int getRounded() {
    return rounded;
}

public void setRounded(int rounded) {
    this.rounded = rounded;

}


@Override
public void onDraw(Canvas canvas)
{


    Drawable drawable = getDrawable();

    int w = drawable.getIntrinsicHeight(),
        h = drawable.getIntrinsicWidth();

    Bitmap rounder = Bitmap.createBitmap(w,h,Bitmap.Config.ARGB_8888);
    Canvas tmpCanvas = new Canvas(rounder);

    // We're going to apply this paint eventually using a porter-duff xfer mode.
    // This will allow us to only overwrite certain pixels. RED is arbitrary. This
    // could be any color that was fully opaque (alpha = 255)
    Paint xferPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    xferPaint.setColor(Color.WHITE);

    // We're just reusing xferPaint to paint a normal looking rounded box, the 20.f
    // is the amount we're rounding by.
    tmpCanvas.drawRoundRect(new RectF(0,0,w,h), 10.0f, 10.0f, xferPaint);

    // Now we apply the 'magic sauce' to the paint
    xferPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));

    drawable.draw(canvas);
    canvas.drawBitmap(rounder, 0, 0, xferPaint);
}
}



<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="vertical"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:background='#a3deef'
    >
<com.example.scheduling_android.view.RoundedCornerImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/eventImageView"
        android:adjustViewBounds="false"/>
</LinearLayout>

它的工作原理是它确实裁剪掉了图像的角落.但是,当我尝试在具有背景颜色#a3deef的linearLayout中渲染它时会出现问题.生成的显示为#a3deef的背景颜色,每个图像显示为圆角,其中4个裁剪角全部为黑色.

我该怎么做才能使裁剪角透明而不是黑色？此外,如果有人可以向我解释它为什么会变黑,而不是任何其他颜色也会很棒!

提前致谢.

Answer 1

如果源代码还不是Bitmap,那么你所采用的方法并不能很好地工作,主要是因为最好将内容绘制到Canvas绘图回调之外的使用传输模式中(所以它只发生一次而不是每次绘制刷新)并且Drawable.draw()在其他任何地方调用都不会产生正确的结果,因为边界不会按预期设置.

一种显着更有效的方法是不修改源数据,只是将圆形剪辑应用于绘图Canvas.对于非常大的半径,这可能会产生一点锯齿,但在10px时它不会引人注意.此方法的唯一其他缺点是clipPath()硬件加速目前不支持,因此您必须将此视图的图层类型设置为软件,以便渲染在Android 3.0+上运行

public class RoundedCornerImageView extends ImageView {

    private Path roundedPath;
    private int rounded;

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

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

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

    private void init() {
        // If the application is hardware accelerated,
        // must disable it for this view.
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        // Set a default radius
        setRounded(10);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        if (w != oldw || h != oldh) {
            roundedPath = new Path();
            roundedPath.addRoundRect(new RectF(0, 0, w, h),
                    rounded, rounded, Path.Direction.CW);
        }
    }

    public int getRounded() {
        return rounded;
    }

    public void setRounded(int rounded) {
        this.rounded = rounded;
        roundedPath = new Path();
        roundedPath.addRoundRect(new RectF(0, 0, getWidth(), getHeight()),
                rounded, rounded, Path.Direction.CW);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //Apply the clip
        canvas.clipPath(roundedPath);
        //Let the view draw as normal
        super.onDraw(canvas);
    }
}

在修改后的版本中,您只需在每次视图或半径大小更改时更新剪切路径,并将其Path作为剪辑应用于Canvas之前的绘图.

HTH