如何将六边形的边框调整为imageview

Question

我想通过使用下面提到的类为 imageview 显示六边形边框。但我想为它调整边框。我试过但面临同样的结果。请看代码。 即使我尝试在可绘制文件夹的 xml 布局中使用给定形状，但都是徒劳的。

public class HexagonMaskView extends ImageView {

private Path hexagonPath;
private Path hexagonBorderPath;
private Paint mBorderPaint;

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

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

public HexagonMaskView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

private void init() {
    this.hexagonPath = new Path();
    this.hexagonBorderPath = new Path();

    this.mBorderPaint = new Paint();
    this.mBorderPaint.setColor(Color.WHITE);
    this.mBorderPaint.setStrokeCap(Paint.Cap.ROUND);
    this.mBorderPaint.setStrokeWidth(50f);
    this.mBorderPaint.setStyle(Paint.Style.STROKE);
}

public void setRadius(float radius) {
    calculatePath(radius);
}

public void setBorderColor(int color) {
    this.mBorderPaint.setColor(color);
    invalidate();
}

private void calculatePath(float radius) {
    float halfRadius = radius / 2f;
    float triangleHeight = (float) (Math.sqrt(3.0) * halfRadius);
    float centerX = getMeasuredWidth() / 2f;
    float centerY = getMeasuredHeight() / 2f;

    this.hexagonPath.reset();
    this.hexagonPath.moveTo(centerX, centerY + radius);
    this.hexagonPath.lineTo(centerX - triangleHeight, centerY + halfRadius);
    this.hexagonPath.lineTo(centerX - triangleHeight, centerY - halfRadius);
    this.hexagonPath.lineTo(centerX, centerY - radius);
    this.hexagonPath.lineTo(centerX + triangleHeight, centerY - halfRadius);
    this.hexagonPath.lineTo(centerX + triangleHeight, centerY + halfRadius);
    this.hexagonPath.close();

    float radiusBorder = radius - 5f;
    float halfRadiusBorder = radiusBorder / 2f;
    float triangleBorderHeight = (float) (Math.sqrt(3.0) * halfRadiusBorder);

    this.hexagonBorderPath.reset();
    this.hexagonBorderPath.moveTo(centerX, centerY + radiusBorder);
    this.hexagonBorderPath.lineTo(centerX - triangleBorderHeight, centerY + halfRadiusBorder);
    this.hexagonBorderPath.lineTo(centerX - triangleBorderHeight, centerY - halfRadiusBorder);
    this.hexagonBorderPath.lineTo(centerX, centerY - radiusBorder);
    this.hexagonBorderPath.lineTo(centerX + triangleBorderHeight, centerY - halfRadiusBorder);
    this.hexagonBorderPath.lineTo(centerX + triangleBorderHeight, centerY + halfRadiusBorder);
    this.hexagonBorderPath.close();
    invalidate();
}

@Override
public void onDraw(Canvas c) {
    c.drawPath(hexagonBorderPath, mBorderPaint);
    c.clipPath(hexagonPath, Region.Op.INTERSECT);
    c.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
    super.onDraw(c);
}

@Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int width = MeasureSpec.getSize(widthMeasureSpec);
    int height = MeasureSpec.getSize(heightMeasureSpec);
    setMeasuredDimension(width, height);
    calculatePath(Math.min(width / 2f, height / 2f) - 10f);
}

}

但我得到的是

我想显示如下屏幕。

Answer 1

检查一下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/gradient"
>

<ImageView
    android:id="@+id/imageView3"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:rotation="90"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="50dp"
    app:srcCompat="@drawable/hexagon" />

</RelativeLayout>

从此Answer修改的方法

<vector android:height="24dp" android:viewportHeight="628.0"
android:viewportWidth="726.0" android:width="27dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#FFFFA3B3"
    android:pathData="m723,314c-60,103.9 -120,207.8 -180,311.8 -120,0 -240,0 -360,0C123,521.8 63,417.9 3,314 63,210.1 123,106.2 183,2.2c120,0 240,0 360,0C603,106.2 663,210.1 723,314Z"
    android:strokeColor="#FFA3B3" android:strokeWidth="4"/>

确保在 gradle 文件中添加这一行 vectorDrawables.useSupportLibrary = true..

输出

已编辑

 <md.com.androidui.HexagonMaskView
    android:id="@+id/imageView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="50dp"
    android:layout_centerHorizontal="true"
    android:src="@drawable/photo_"
    android:background="@android:color/transparent"/>

HexagonMaskView 的变化

  @Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int width = MeasureSpec.getSize(widthMeasureSpec);
    int height = MeasureSpec.getSize(heightMeasureSpec);
    setMeasuredDimension(400, 450); //Change size according to your needs here or in xml
    calculatePath(Math.min(width / 2f, height / 2f) - 10f);
}

或

 <md.com.androidui.HexagonMaskView
    android:id="@+id/imageView3"
    android:layout_width="150dp"
    android:layout_height="170dp"
    android:layout_marginTop="50dp"
    android:layout_centerHorizontal="true"
    android:src="@drawable/photo_"
    android:background="@android:color/transparent"/>

输出

Answer 2

您好，请查看下面的xml代码。

<ImageView
        android:layout_marginTop="@dimen/_30sdp"
        android:id="@+id/logo"
        android:rotation="90"
        android:src="@drawable/alex"
        android:background="@drawable/hexagon"
        android:layout_gravity="center"
        android:layout_width="@dimen/_50sdp"
        android:layout_height="@dimen/_50sdp" />

这就是我得到的。

Actual_Image