為了提高自己的開發水平，就想系統地學習一下Android自定義控制元件。首先呢就要從Paint和canvas學起了，與本文主題相關的有關於canvas的畫線：

                                                           canvas.drawLine(300, 300, 500, 600, mPaint);

canvas的位移：

                                 canvas.translate(100,500);

canvas的旋轉：

                                 canvas.rotate(36);

設計思路呢也很簡單，五角星的每個尖角都是36°，所以呢通過畫一條水平線，通過位移和旋轉的位置變化，重複畫出五條線，這五條線恰好能夠組成一個五角星。效果圖：

下面看一下具體的程式碼實現：

public class SloopView extends View{

    //建立畫筆
    private Paint mPaint = new Paint();

    private Paint mPaint2 = new Paint();

    public SloopView(Context context) {
        this(context,null,0);
    }

    public SloopView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public SloopView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }

    private void initPaint() {
        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setStrokeWidth(10f);
        mPaint2.setColor(Color.YELLOW);
        mPaint2.setStyle(Paint.Style.FILL);
        mPaint2.setStrokeWidth(10f);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthsize = MeasureSpec.getSize(widthMeasureSpec);      //取出寬度的確切數值
        int widthmode = MeasureSpec.getMode(widthMeasureSpec);      //取出寬度的測量模式

        int heightsize = MeasureSpec.getSize(heightMeasureSpec);    //取出高度的確切數值
        int heightmode = MeasureSpec.getMode(heightMeasureSpec);    //取出高度的測量模式
        int height = 0;
        switch (heightmode){
            case MeasureSpec.AT_MOST:
                break;
            case MeasureSpec.EXACTLY:
            case MeasureSpec.UNSPECIFIED:
                break;
        }
        setMeasuredDimension(widthsize, heightsize);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        //畫點
//        canvas.drawPoint(200, 200, mPaint);
//        canvas.drawPoints(new float[]{
//                500,500,500,600,500,700
//        },mPaint);
        //畫線
//        canvas.drawLine(300, 300, 500, 600, mPaint);
//        canvas.drawLines(new float[]{
//                100,200,110,200,
//                120,200,130,200,
//                140,200,150,200,
//                160,200,170,200,
//                180,200,190,200,
//                200,200,210,200
//        },mPaint);
        //畫矩形，三種畫法

//        canvas.drawRect(100,100,800,400,mPaint);
//
//        Rect rect = new Rect(100,500,800,800);
//        canvas.drawRect(rect,mPaint);
//
//        RectF rectF = new RectF(100,900,800,1200);
//        canvas.drawRect(rectF,mPaint);

        //畫圓角矩形

//        RectF rectF = new RectF(100, 100, 800, 400);
//        canvas.drawRoundRect(rectF, 30, 30, mPaint);
//
//        if (Build.VERSION.SDK_INT>=21){
//            canvas.drawRoundRect(100,500,800,800,30,30,mPaint);
//        }

        //畫橢圓
//        RectF rectF = new RectF(100,100,800,400);
//        canvas.drawRect(rectF,mPaint2);
//        canvas.drawOval(rectF,mPaint);
//
//        if (Build.VERSION.SDK_INT>=21) {
//            canvas.drawOval(100, 500, 800, 800, mPaint);
//        }

        //畫圓
//        canvas.drawCircle(500, 500, 400, mPaint);

//        //畫圓弧(非正圓)
//        RectF rectF = new RectF(100, 100, 800, 400);
//        //繪製背影矩形
//        canvas.drawRect(rectF,mPaint2);
//
//        //繪製圓弧,不使用中心點
//        mPaint.setColor(Color.BLUE);
//        canvas.drawArc(rectF, 0, 90, false, mPaint);
//
//        //繪製圓弧，並使用中心點
//        RectF rectF1 = new RectF(100,600,800,900);
//        //繪製矩形背景
//        canvas.drawRect(rectF1,mPaint2);
//
//        //繪製圓弧
//        canvas.drawArc(rectF1, 0, 90, true, mPaint);

        //畫圓弧（正圓）
//        RectF rectF = new RectF(100, 100, 400, 400);
//        //繪製背影矩形
//        canvas.drawRect(rectF,mPaint2);
//
//        //繪製圓弧,不使用中心點
//        mPaint.setColor(Color.BLUE);
//        canvas.drawArc(rectF, 0, 90, false, mPaint);
//
//        //繪製圓弧，並使用中心點
//        RectF rectF1 = new RectF(100, 600, 400, 900);
//        //繪製矩形背景
//        canvas.drawRect(rectF1,mPaint2);
//
//        //繪製圓弧
//        canvas.drawArc(rectF1, 0, 90, true, mPaint);

        //繪製五角星圖案
        canvas.drawLine(100, 500, 700, 500, mPaint);
        canvas.translate(100,500);
        canvas.rotate(36);
        canvas.drawLine(0, 0, 600, 0, mPaint);
        canvas.translate(600,0);
        canvas.rotate(36);
        canvas.drawLine(0, 0, -600, 0, mPaint);
        canvas.translate(-600, 0);
        canvas.rotate(36);
        canvas.drawLine(0, 0, 600, 0, mPaint);
        canvas.translate(600, 0);
        canvas.rotate(36);
        canvas.drawLine(0, 0, -600, 0, mPaint);
    }

}

這個也是通過自定義view的形式實現的，具體的原始碼請點這裡。

原始碼下載

轉載本文請註明出處；