圆角关于圆角imageview，下面这种效果怎么实现

Posted 2023-03-19

参考技术A android 自定义圆角ImageView以及锯齿的处理
看到很多人开发过程中要使用圆角图片时，解决方法有：

1.重新绘制一张图片

2.通过布局来配置

3.通过重写View来实现

其中1，2在这里就不讲了，重点讲讲方法三的实现。

实现一：通过截取画布一个圆形区域与图片的相交部分进行绘制，缺点：锯齿明显，设置Paint,Canvas抗锯齿无效。
package com.open.circleimageview.widget;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PaintFlagsDrawFilter;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.Region;
import android.util.AttributeSet;
import android.view.View;

public class CircleImageViewA extends View

public CircleImageViewA(Context context, AttributeSet attrs, int defStyle)
super(context, attrs, defStyle);


public CircleImageViewA(Context context, AttributeSet attrs)
super(context, attrs);


public CircleImageViewA(Context context)
super(context);


private Bitmap bitmap;
private Rect bitmapRect=new Rect();
private PaintFlagsDrawFilter pdf=new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG);
private Paint paint = new Paint();

paint.setStyle(Paint.Style.STROKE);
paint.setFlags(Paint.ANTI_ALIAS_FLAG);
paint.setAntiAlias(true);// 设置画笔的锯齿效果。 true是去除，大家一看效果就明白了

private Path mPath=new Path();

public void setImageBitmap(Bitmap bitmap)

this.bitmap=bitmap;

@Override
protected void onDraw(Canvas canvas)

if(null==bitmap)

return;

bitmapRect.set(0, 0, getWidth(), getHeight());
canvas.save();
canvas.setDrawFilter(pdf);
mPath.reset();
canvas.clipPath(mPath); // makes the clip empty
mPath.addCircle(getWidth()/2, getWidth()/2, getHeight()/2, Path.Direction.CCW);
canvas.clipPath(mPath, Region.Op.REPLACE);
canvas.drawBitmap(bitmap, null, bitmapRect, paint);
canvas.restore();



实现二：通过PorterDuffXfermode 方式（注意要设置硬件加速，否则部分机子无效），优点：锯齿基本没有
package com.open.circleimageview.widget;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PaintFlagsDrawFilter;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

public class CircleImageViewB extends View

public CircleImageViewB(Context context, AttributeSet attrs, int defStyle)
super(context, attrs, defStyle);
init();


public CircleImageViewB(Context context, AttributeSet attrs)
super(context, attrs);
init();


public CircleImageViewB(Context context)
super(context);
init();


private Bitmap bitmap;
private Rect bitmapRect=new Rect();
private PaintFlagsDrawFilter pdf=new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG);
private Paint paint = new Paint();

paint.setStyle(Paint.Style.STROKE);
paint.setFlags(Paint.ANTI_ALIAS_FLAG);
paint.setAntiAlias(true);// 设置画笔的锯齿效果。 true是去除，大家一看效果就明白了

private Bitmap mDstB=null;
private PorterDuffXfermode xfermode=new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY);

private void init()

try
if(android.os.Build.VERSION.SDK_INT>=11)

setLayerType(LAYER_TYPE_SOFTWARE, null);

catch (Exception e)
e.printStackTrace();


public void setImageBitmap(Bitmap bitmap)

this.bitmap=bitmap;


private Bitmap makeDst(int w, int h)

Bitmap bm = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(bm);
Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
p.setColor(Color.parseColor("#ffffffff"));
c.drawOval(new RectF(0, 0, w, h), p);
return bm;

@Override
protected void onDraw(Canvas canvas)

if(null==bitmap)

return;

if(null==mDstB)

mDstB=makeDst(getWidth(), getHeight());


bitmapRect.set(0, 0, getWidth(), getHeight());
canvas.save();
canvas.setDrawFilter(pdf);
canvas.drawBitmap(mDstB, 0, 0, paint);
paint.setXfermode(xfermode);
canvas.drawBitmap(bitmap, null, bitmapRect, paint);
paint.setXfermode(null);
canvas.restore();

本回答被提问者和网友采纳

请问以下CSS3 效果：两边是圆角，中间是一条分界线 这种效果怎么实现

问题如图，，，我郁闷了，我知道border-radius能实现圆角，但是这中间还有一个线咋办，不会弄，我是做前端的，公司要做网站，好多都不会，基本是边做边学，希望各路大神指点啊，多谢

这是两个按钮或者div，左边的设置左边框圆角，右边的那个设置右边框圆角。具体的参数，你可以参考一下这个教程：
border-radius:2em;

等价于：
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

你也可以根据你的需要设置自己需要的边框。比如只设置左上角圆角。自己尝试一下吧。

http://www.w3school.com.cn/cssref/pr_border-radius.asp 参考技术A boder-radius可以分别设置四个角的值，顺序为左上、右上、右下、左下
代码如下：
#div1
border-radius:20px 0 0 20px;
/*border-top-left-radius: 20px;
border-bottom-left-radius: 20px;*/

#div2
border-radius: 0 20px 20px 0;
/*border-top-right-radius: 20px;
border-bottom-right-radius: 20px;*/

求采纳 参考技术B 一个border-right不就解决了么 参考技术C <div class="box">
    <div>左边</div>
    <div>右边</div>
</div>

*
margin:0;
padding:0;
box-sizing: border-box;

.box
width: 200px;
border-radius:40px;
border:1px solid #ddd;
line-height: 40px;
overflow: hidden;

.box>div
width:50%;
text-align: center;
float: left;
vertical-align: middle;
background: #ffff00;

.box>div:first-child
border-right:1px solid #ddd;