带你玩转自定义view系列--Android画笔的详解

View 的简介

View是Android所有控件的基类，接下来借鉴网上的一张图片让大家一目了然（图片出自：http://blog.51cto.com/wangzhaoli/1292313）

image

Android画笔的详解

Android提供了2D图形绘制的各种工具，如Canvas(画布)、Point(点)、Paint(画笔)、Rectangles(矩形)等，利用这些工具可以直接在界面上进行绘制。

在自定义View中，我们经常用到的Canvas(画布)和Paint(画笔)，像我们画画一样，需要画布和画笔，在View中绘制控件，Canvas就代表着画布，Paint就代表着画笔。

这是的Android的的的官网里画的API：https://developer.android.com/reference/android/graphics/Paint

官网中的API有很多，下面是比较常用的一些API：

Paint.setAntiAlias(boolean flag);//设置抗锯齿效果 设置true的时边缘会将锯齿模糊化Paint.setDither(boolean flag);//设置防抖动,设置true的时图片看上去会更柔和点Paint.setColor(int color);//设置画笔颜色Paint.setARGB(int a, int r, int g, int b); //设置画笔的ARGB值Paint.setAlpha(int alpha);//设置画笔的Alpha值Paint.setStyle(); //设置画笔的style (三种：FILL填充 FILL_AND_STROKE填充加描边 STROKE描边 )Paint.setStrokeWidth(float width);//设置描边宽度Paint.setXfermode(Xfermode xfermode);//设置图形重叠时的处理方式，如合并，取交集或并集，经常用来制作橡皮的擦除效果Paint.setShader(Shader shader);//设置图像效果，使用Shader可以绘制出各种渐变效果Paint.setShadowLayer(float radius ,float dx,float dy,int color);//在图形下面设置阴影层，产生阴影效果，radius为阴影的半径，dx和dy为阴影在x轴和y轴上的距离，color为阴影的颜色 //下面写文本的时候经常用到的Paint.setTextSize(float textSize);//设置画笔文字大小Paint.measureText(String text);//测试文本的长度Paint.setTextAlign(Paint.Align align);// CENTER(文本居中) LEFT(文本左对齐) RIGHT(文本右对齐)

下面就演示一下上面这几个API的效果。

Paint.setStye()

Paint.setStyle() //设置画笔的style，有三种:

• Paint.Style.FILL //将填充使用此样式绘制的几何和文本，忽略绘画中与笔划相关的所有设置
• Paint.Style.FILL_AND_STROKE //使用此样式绘制的几何和文本将同时填充和描边，尊重绘画中与笔划相关的字段
• Paint.Style.STROKE //使用此样式绘制的几何和文本将被描边，尊重绘画上与笔划相关的字段

演示一个小demo:

paint = new Paint();       paint.setColor(Color.RED);//画笔颜色为红色       paint.setStrokeWidth(80); //描边宽度为80(为了区分效果，特意设置特别大)       float radius = 100f;       //将填充使用此样式绘制的几何和文本，忽略绘画中与笔划相关的所有设置       paint.setStyle(Paint.Style.FILL);       canvas.drawCircle(400, 200, radius, paint);       //使用此样式绘制的几何和文本将同时填充和描边，尊重绘画中与笔划相关的字段       paint.setStyle(Paint.Style.FILL_AND_STROKE);       canvas.drawCircle(400, 500, radius, paint);       //使用此样式绘制的几何和文本将被描边，尊重绘画上与笔划相关的字段       paint.setStyle(Paint.Style.STROKE);       canvas.drawCircle(400, 900, radius, paint);

结果：

image

Paint.setShader(Shader shader)

Paint.setShader(Shader shader) //设置图像效果，使用Shader可以绘制出各种渐变效果

Shader：着色器，用来给图像着色，此类是基类， Shader的API (https://developer.android.com/reference/android/graphics/Shader)。有5个子类：

• BitmapShader
• ComposeShader
• LinearGradient
• RadialGradient
• SweepGradient

在了解上面5个类之前，先了解一下Shader.TileMode这个枚举，有三个值：

• Shader.TileMode.CLAMP :如果着色器在其原始边界之外绘制，则复制边缘颜色
• Shader.TileMode.MIRROR :水平和垂直重复着色器的图像，交替镜像，使相邻的图像始终接缝
• Shader.TileMode.REPEAT :水平和垂直重复着色器的图像

BitmapShader

这里只介绍一种着色器，其余的点击阅读原文进行查看。

其实这个Shader用于绘制bitmap作为纹理，然后通过平铺模式进行填充

/**        * 构造函数        * @bitmap 用来填充图形的Bitmap        * @tileX X轴Bitmap用Shader.TileMode模式填充        * @tileY Y轴Bitmap用Shader.TileMode模式填充        */       BitmapShader(Bitmap bitmap, Shader.TileMode tileX, Shader.TileMode tileY)

演示一下：

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.flower);       BitmapShader shader = new BitmapShader(bitmap, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.MIRROR);       paint.setShader(shader);       canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), paint);

结果：

image

X轴用Shader.TileMode.CLAMP模式，就是用bitmap的右边缘去填充X轴的其余空间 Y轴用Shader.TileMode.MIRROR模式，就是在用相邻两张图像互为镜像的方式填充整个Y轴其余空间

接下来XY轴换一下模式：

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.flower);       BitmapShader shader = new BitmapShader(bitmap, BitmapShader.TileMode.MIRROR, BitmapShader.TileMode.REPEAT);       paint.setShader(shader);       canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), paint);

结果：

image

X轴用Shader.TileMode.MIRROR模式，就是在用相邻两张图像互为镜像的方式填充整个X轴其余空间 Y轴用Shader.TileMode.REPEAT模式，就是用相同的图像重复填充整个Y轴其余空间

其余四种着色器示例请阅读原文进行查看。

Paint.setShadowLayer(float radius ,float dx,float dy,int color)

Paint.setShadowLayer(float radius ,float dx,float dy,int color) //在图形下面设置阴影层，产生阴影效果

/**        * @radius radius为阴影半径，半径越大，阴影面积越大，越模糊；反之，半径越小，阴影面积越小，也越清晰，radius=0时，阴影消失        * @dx dx为阴影在x轴上的偏移值        * @dy dy为阴影在y轴上的偏移值        * @color color为阴影的颜色        */       Paint.setShadowLayer( float radius, float dx, float dy, int color);

演示一下：

paint.setColor(Color.RED);       paint.setShadowLayer(20, 0, 0, Color.YELLOW);       paint.setTextSize(100);       canvas.drawText("I am Layne", 200, 300, paint);

结果：

image

改一下：

paint.setShadowLayer(20,50, 50, Color.YELLOW);

结果：

image

改一下：

paint.setShadowLayer(1,50, 50, Color.YELLOW);

结果：

image

再改一下：

paint.setShadowLayer(0,50, 50, Color.YELLOW);

结果：

image

添加阴影：

paint.setColor(Color.RED);       paint.setShadowLayer(30, 0, 0, Color.BLACK);       setLayerType(LAYER_TYPE_SOFTWARE, paint);//要注意加上这句       canvas.drawCircle(400, 800, 100, paint);

**结果： **

image

常用画笔的 API 介绍完了