Android 2D图形绘制

很久没有用到图形绘制的东西了，有同事问我问题我只能告诉他用到哪些东西，具体的都忘记了。现在写篇博客做个笔记。

• Paint基本用法
• Canvas基本用法
• Path基本用法
• 自定义View雷达实例

---

Paint基本用法

Paint直接翻译为油漆，SDK里面的注释为The Paint class holds the style and color information about how to draw geometries, text and bitmaps.简单的可以理解为画笔，控制了绘制出的文本和图片的样式和颜色。
常用的方法：

方法	作用
setColor	设置颜色
setAntiAlias	设置抗锯齿
setAlpha	设置透明度（值为0-255）
setStyle	设置画笔风格
setStrokeWidth	设置画笔粗细

Canvas基本用法

Canvas可以简单理解为一块画布，有了画布和画笔就可以简单的绘制图形了。
常用的方法：

方法	作用
drawText	绘制文字
drawCircle	绘制圆圈
drawLine	绘制直线
drawPoint	绘制点
drawArc	绘制圆弧
drawRoundRect	绘制矩形

Path基本用法

Path可以简单理解为路径，可以用于画布上使用画笔绘制图形也可以用于图片剪切。
常用的方法：

方法	作用
moveTo	把一个点设置为路径起点
lineTo	从最后一个指定的点到这个点添加一条线
close	闭合路径
addArc	给路径添加一个弧形的轮廓（我觉得就是把路径变弧形）
offset	设置路径偏移

下面用Path做几个例子。

代码如下：

public class LeidaView extends View {
    private Paint mPaint;
    private Context context;

    @Override
    protected void onDraw(Canvas canvas) {
        //不封闭的三角形
        Path mPath = new Path();
        mPath.moveTo(200, 100);
        mPath.lineTo(500, 100);
        mPath.lineTo(325, 300);
        canvas.drawPath(mPath, mPaint);
        //封闭的三角形
        Path mPath1 = new Path();
        mPath1.moveTo(700, 100);
        mPath1.lineTo(1000, 100);
        mPath1.lineTo(825, 300);
        mPath1.close();
        canvas.drawPath(mPath1, mPaint);
        //画笔设置了FILL之后，掉不掉用Close看起来效果一样
        mPaint.setStyle(Paint.Style.FILL);
        Path mPath2 = new Path();
        mPath2.moveTo(200, 600);
        mPath2.lineTo(500, 600);
        mPath2.lineTo(325, 800);
        canvas.drawPath(mPath2, mPaint);
        Path mPath3 = new Path();
        mPath3.moveTo(700, 600);
        mPath3.lineTo(1000, 600);
        mPath3.lineTo(825, 800);
        mPath3.close();
        canvas.drawPath(mPath3, mPaint);
        mPaint.setStyle(Paint.Style.STROKE);//这里如果FILL模式画不出来线
        //路径偏移
        Path mPath4 = new Path();
        mPath4.moveTo(200, 1000);
        mPath4.lineTo(300, 1200);
        canvas.drawPath(mPath4, mPaint);
        //X，Y坐标做加法
        mPath4.offset(500,0);
        canvas.drawPath(mPath4,mPaint);

    }

    public LeidaView(Context context) {
        this(context, null);
    }

    public LeidaView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public LeidaView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.BLUE);
        mPaint.setAntiAlias(true);
        mPaint.setAlpha(122);
        mPaint.setTextSize(34);
        mPaint.setStrokeWidth(3);
    }

}

自定义View雷达实例

  WindowManager wm = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
  //获取屏幕宽高
        int width = wm.getDefaultDisplay().getWidth();
        int height = wm.getDefaultDisplay().getHeight();
        canvas.drawCircle(width/2,height/2,(float)(width/2*0.9),mPaint);
        canvas.drawCircle(width/2,height/2,(float)(width/2*0.6),mPaint);
        canvas.drawCircle(width/2,height/2,(float)(width/2*0.3),mPaint);
        Path mPath=new Path();
        //将路径移动到边上
        mPath.moveTo((float)(width/2+width/2*0.9),height/2);
        mPath.lineTo(width/2,height/2);
        mPath.lineTo((float)981.5733,1100);//这个可能不同分辨率不同，我用的1920*1080测试
        mPath.close();
        canvas.drawPath(mPath,mPaint);
        mPaint.setStrokeWidth(20);
        canvas.drawPoint(width/2,height/2,mPaint);

效果图如下

如果想要给雷达加上动画，说一下简单的实现。
雷达的背景是不需要动的，也就是说需要动画效果的只有雷达的指针，也就是说只要给指针添加动画，所以我们将雷达的背景和指针的绘制拆分成为两个自定义的View，绘制方法相同。这里就不贴代码了。然后将雷达指针的view设置动画，如下代码：

Animation anim =new RotateAnimation(0f, 360f, Animation.RELATIVE_TO_SELF, 0.5f,Animation.RELATIVE_TO_SELF, 0.5729f);//这里第四和第六个参数代表旋转的中心，
//比如0.5就应该是x轴的中间，0.5729是因为Y轴长度没有去掉状态栏，这里偷了懒手动算了一个大概的值
anim.setDuration(3000); // 设置动画时间
anim.setInterpolator(new LinearInterpolator()); // 设置插入器，这里设置了一个匀速的
anim.setRepeatCount(10);设置次数

之后将指针的view启动这个anim就好啦。