六边形 ImageView 圆角

Posted 2023-02-26

【中文标题】六边形 ImageView 圆角

【英文标题】：Hexagonal ImageView Rounded corners

【发布时间】：2014-12-17 14:26:45

【问题描述】：

您好，我想要如上图所示的圆角。我设法制作了六边形 ImageView。但我无法绕过角落。请帮忙。如果有人想看，我在这里复制代码。我试过给出椭圆形 ImageView 中使用的弧线，但它不起作用。我是安卓新手。任何帮助将不胜感激。

public class HexagonImageView extends ImageView 

private Path hexagonPath;
private Path hexagonBorderPath;
private float radius;
private Bitmap image;
private int viewWidth;
private int viewHeight;
private Paint paint;
private BitmapShader shader;
private Paint paintBorder;
private int borderWidth = 5;

public HexagonImageView(Context context) 
    super(context);
    setup();


public HexagonImageView(Context context, AttributeSet attrs) 
    super(context, attrs);
    setup();


public HexagonImageView(Context context, AttributeSet attrs, int defStyleAttr) 
    super(context, attrs, defStyleAttr);
    setup();


private void setup() 
    paint = new Paint();
    paint.setAntiAlias(true);

    paintBorder = new Paint();
    setBorderColor(Color.WHITE);
    paintBorder.setAntiAlias(true);
    this.setLayerType(LAYER_TYPE_SOFTWARE, paintBorder);
    paintBorder.setShadowLayer(4.0f, 1.0f, 1.0f, Color.BLACK);

    hexagonPath = new Path();
    hexagonBorderPath = new Path();



public void setRadius(float r) 
    this.radius = r;
    calculatePath();
    this.invalidate();


public void setBorderWidth(int borderWidth)  
    this.borderWidth = borderWidth;
    this.invalidate();


public void setBorderColor(int borderColor)  
    if (paintBorder != null)
        paintBorder.setColor(borderColor);

    this.invalidate();


private void calculatePath() 

    float triangleHeight = (float) (Math.sqrt(3) * radius / 2);
    float centerX = viewWidth/2;
    float centerY = viewHeight/2;

    hexagonBorderPath.moveTo(centerX, centerY + radius);
    hexagonBorderPath.lineTo(centerX - triangleHeight, centerY + radius/2);
    hexagonBorderPath.lineTo(centerX - triangleHeight, centerY - radius/2);
    hexagonBorderPath.lineTo(centerX, centerY - radius);
    hexagonBorderPath.lineTo(centerX + triangleHeight, centerY - radius/2);
    hexagonBorderPath.lineTo(centerX + triangleHeight, centerY + radius/2);
    hexagonBorderPath.moveTo(centerX, centerY + radius);

    float radiusBorder = radius - borderWidth;    
    float triangleBorderHeight = (float) (Math.sqrt(3) * radiusBorder / 2);

    hexagonPath.moveTo(centerX, centerY + radiusBorder);
    hexagonPath.lineTo(centerX - triangleBorderHeight, centerY + radiusBorder/2);
    hexagonPath.lineTo(centerX - triangleBorderHeight, centerY - radiusBorder/2);
    hexagonPath.lineTo(centerX, centerY - radiusBorder);
    hexagonPath.lineTo(centerX + triangleBorderHeight, centerY - radiusBorder/2);
    hexagonPath.lineTo(centerX + triangleBorderHeight, centerY + radiusBorder/2);
    hexagonPath.moveTo(centerX, centerY + radiusBorder);

    this.invalidate();


private void loadBitmap()  
    BitmapDrawable bitmapDrawable = (BitmapDrawable) this.getDrawable();

    if (bitmapDrawable != null)
        image = bitmapDrawable.getBitmap();


@SuppressLint("DrawAllocation")
@Override
public void onDraw(Canvas canvas)
    super.onDraw(canvas);

    loadBitmap();

    // init shader
    if (image != null) 

        canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);

        shader = new BitmapShader(Bitmap.createScaledBitmap(image, canvas.getWidth(), canvas.getHeight(), true), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        paint.setShader(shader);

        canvas.drawPath(hexagonBorderPath, paintBorder);
        canvas.drawPath(hexagonPath, paint);
        canvas.clipPath(hexagonPath, Region.Op.DIFFERENCE);
    



@Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    int width = measureWidth(widthMeasureSpec);
    int height = measureHeight(heightMeasureSpec, widthMeasureSpec);

    viewWidth = width - (borderWidth * 2);
    viewHeight = height - (borderWidth * 2);

    radius = height / 2 - borderWidth;

    calculatePath();

    setMeasuredDimension(width, height);


private int measureWidth(int measureSpec)   
    int result = 0;
    int specMode = MeasureSpec.getMode(measureSpec);
    int specSize = MeasureSpec.getSize(measureSpec);

    if (specMode == MeasureSpec.EXACTLY)  
        result = specSize;
    
    else 
        result = viewWidth;
    

    return result;


private int measureHeight(int measureSpecHeight, int measureSpecWidth)  
    int result = 0;
    int specMode = MeasureSpec.getMode(measureSpecHeight);
    int specSize = MeasureSpec.getSize(measureSpecHeight);

    if (specMode == MeasureSpec.EXACTLY) 
        result = specSize;
    
    else 
        result = viewHeight;
    

    return result;

【参考方案1】：

您需要将您的hexagonPath.lineTo 命令替换为hexagonPath.cubicTo 或hexagonPath.quadTo。就个人而言，我发现后者很容易使用。就像您的画线一样，它们都是从最后一个点开始绘制的，但是它们分别允许您指定 2 个或 1 个控制点的坐标以及目标点。控制点会导致绘图点之间的弯曲效果。

如果听起来工作量太大（比听起来容易），this answer 中引用了一个库来满足您的确切要求。

【讨论】：

嗨@jason，我仍然坚持这一点。我尝试了很多东西，但似乎没有任何效果。你能帮帮我吗？你能不能做一个圆角，让我做剩下的。谢谢

@RahulSood...你得到你的答案了吗？

【参考方案2】：

我用this

我和你的一样。只需修改圆角半径和角度以获得你想要的。