Diamond Shaped Button with transparent borders

问题

I used a customView class for create a diamond shape button. In onDraw method of this class:

 @Override
protected void onDraw(Canvas canvas) {

    mPath.moveTo(mWidth/2 , 0);
    mPath.lineTo(mWidth , mHigh/2);
    mPath.lineTo(mWidth /2 , mHigh);
    mPath.lineTo(0 , mHigh/2);
    mPath.lineTo( mWidth/2 ,0);

    canvas.drawPath(mPath ,mBorderPaint);
    super.onDraw(canvas);

}

And borderPaint defined like this:

    mBorderPaint = new Paint();
    mBorderPaint.setColor(mBorderColor);
    mBorderPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    borderPaint.setStrokeWidth(mBorderWidth);

But I want my diamond button has a transparent border. What should I do?

回答1:

You have to draw the path twice, first to draw the fill and then to draw the stroke.

//initialize the paint object before onDraw method is called
mBorderPaint = new Paint();

@Override
protected void onDraw(Canvas canvas) {

    mPath.moveTo(mWidth/2 , 0);
    mPath.lineTo(mWidth , mHeight/2);
    mPath.lineTo(mWidth /2 , mHeight);
    mPath.lineTo(0 , mHeight/2);
    mPath.lineTo( mWidth/2 ,0);

    //setup the paint for fill
    mBorderPaint.setAlpha(255);
    mBorderPaint.setColor(mBorderColor);
    mBorderPaint.setStyle(Paint.Style.FILL);
    borderPaint.setStrokeWidth(mBorderWidth);

    //draw it
    canvas.drawPath(mPath ,mBorderPaint);

    //setup the paint for stroke
    mBorderPaint.setAlpha(51);
    mBorderPaint.setStyle(Paint.Style.STROKE);

    //draw it again
    canvas.drawPath(mPath ,mBorderPaint);

    super.onDraw(canvas);
}

来源：https://stackoverflow.com/questions/28898906/diamond-shaped-button-with-transparent-borders