android使用canvas画线，位移，旋转，绘制五角星

    为了提高自己的开发水平，就想系统地学习一下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的形式实现的，具体的源码请点这里。

源码下载

转载本文请注明出处；