菱形按键采用透明边框 [英] Diamond Shaped Button with transparent borders

问题描述

我用了一个customView类创建一个菱形按钮。
在这个类的onDraw方法：

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);

}

和borderPaint这样定义的：

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?

推荐答案

您必须绘制路径两次，第一次绘制的填充，然后绘制中风。

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);
}

这篇关于菱形按键采用透明边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！