Question

嗨我需要画一个六边形边框。我尝试使用下面的代码，但我面临的问题是颜色正在填充整个Hexagon。我需要只为Hexagon的边框赋予颜色。任何人都可以帮助我吗？

public class HexagonLayout extends RelativeLayout {

     public HexagonLayout(Context context) {
      super(context);
     }

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

     @SuppressLint("NewApi")
     public HexagonLayout(Context context, AttributeSet attrs, int defStyle) {
      super(context, attrs, defStyle);

     }

     @Override
     protected void onDraw(Canvas canvas) {

      Path clipPath = new Path();
      clipPath.addPath(Hexagon());
      //canvas.clipPath(clipPath);

      Paint mPaint=new Paint();
      mPaint.setColor(Color.BLUE);

      mPaint.setAntiAlias(true);
      canvas.drawPath(Hexagon(), mPaint);
      super.onDraw(canvas);

     }

     private Path Hexagon() {

      float midx = 100;
      float midy = 200;

      Path p = new Path();

      p.moveTo(midx, midy);
      p.lineTo(midx+150, midy + 220);
      p.lineTo(midx, midy + 220);
      p.lineTo(midx-150, midy + 220);
      p.lineTo(midx-300, midy);
      p.lineTo(midx-150, midy-220);
      p.lineTo(midx+150, midy-220);
      p.lineTo(midx+300, midy);
      p.lineTo(midx+150, midy + 220);
      return p;

     }
}

Answer 1

试试此代码

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Path;
import android.graphics.Region;
import android.util.AttributeSet;
import android.view.View;

public class HexagonMaskView extends View {
    private Path hexagonPath;
    private Path hexagonBorderPath;
    private float radius;
    private float width, height;
    private int maskColor;

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() {
    hexagonPath = new Path();
    hexagonBorderPath = new Path();
    maskColor = 0xFF01FF77;
}

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

public void setMaskColor(int color) {
    this.maskColor = color;
    invalidate();
}

private void calculatePath() {
    float triangleHeight = (float) (Math.sqrt(3) * radius / 2);
    float centerX = width/2;
    float centerY = height/2;
    hexagonPath.moveTo(centerX, centerY + radius);
    hexagonPath.lineTo(centerX - triangleHeight, centerY + radius/2);
    hexagonPath.lineTo(centerX - triangleHeight, centerY - radius/2);
    hexagonPath.lineTo(centerX, centerY - radius);
    hexagonPath.lineTo(centerX + triangleHeight, centerY - radius/2);
    hexagonPath.lineTo(centerX + triangleHeight, centerY + radius/2);
    hexagonPath.moveTo(centerX, centerY + radius);

    float radiusBorder = radius - 5;    
    float triangleBorderHeight = (float) (Math.sqrt(3) * radiusBorder / 2);
    hexagonBorderPath.moveTo(centerX, centerY + radiusBorder);
    hexagonBorderPath.lineTo(centerX - triangleBorderHeight, centerY + radiusBorder/2);
    hexagonBorderPath.lineTo(centerX - triangleBorderHeight, centerY - radiusBorder/2);
    hexagonBorderPath.lineTo(centerX, centerY - radiusBorder);
    hexagonBorderPath.lineTo(centerX + triangleBorderHeight, centerY - radiusBorder/2);
    hexagonBorderPath.lineTo(centerX + triangleBorderHeight, centerY + radiusBorder/2);
    hexagonBorderPath.moveTo(centerX, centerY + radiusBorder);
    invalidate();
}

@Override
public void onDraw(Canvas c){
    super.onDraw(c);
    c.clipPath(hexagonBorderPath, Region.Op.DIFFERENCE);
    c.drawColor(Color.WHITE);
    c.save();
    c.clipPath(hexagonPath, Region.Op.DIFFERENCE);
    c.drawColor(maskColor);
    c.save();
}

// getting the view size and default radius
@Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    width = MeasureSpec.getSize(widthMeasureSpec);
    height =  MeasureSpec.getSize(heightMeasureSpec);
    radius = height / 2 - 10;
    calculatePath();
}
}

如何显示六边形边框

1 个答案: