前言

之前我们已经把UI的整体绘制流程及意义弄清楚了，那么想要开发出我们那些好看的控件还需要两个非常重要的组件，从上一节当中我们知道的在绘制时，我们看到了Canvas类在绘制流程Draw中被使用到了，那么我们具体来分析下，我们的Draw和Canvas还有Paint到底有何联系

1.Canvas和Paint的关系

其实Canvas在我们的绘制中扮演的角色其实是会话，我们通常情况下都能够知道我们能使用Canvas去调画圆型，矩形图片等，但是最终其实真正的绘制并不是在我们的android层面进行的
通过Canvas当中的一个源码举例：我现在调用的是drawArc，那么依次一直往下走会发现

 public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter,
        @NonNull Paint paint) {
    super.drawArc(oval, startAngle, sweepAngle, useCenter, paint);
}



public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter,
        @NonNull Paint paint) {
    throwIfHasHwBitmapInSwMode(paint);
    drawArc(oval.left, oval.top, oval.right, oval.bottom, startAngle, sweepAngle, useCenter,
            paint);
}


 public void drawArc(float left, float top, float right, float bottom, float startAngle,
        float sweepAngle, boolean useCenter, @NonNull Paint paint) {
    throwIfHasHwBitmapInSwMode(paint);
    nDrawArc(mNativeCanvasWrapper, left, top, right, bottom, startAngle, sweepAngle,
            useCenter, paint.getNativeInstance());
}

private static native void nDrawArc(long nativeCanvas, float left, float top, float right,
        float bottom, float startAngle, float sweep, boolean useCenter, long nativePaint);

最后调用到的是底层的一个nDrawArc的本地方法，那么其实本身android的绘制是交由系统底层的so库完成，也就是C的代码，（PS:此处不深究底层，在这里我们先明白自己得出的结论）那么在此处其实实际在我们可以得出一个结论就是，Canvas并不是具体的执行者，而是一个传达着， 在Canvas当中我们会将所有的参数信息设置好，然后交由底层去绘制那么我们可以得到，其实Canvas就是一个图形绘制的会话

1.png

而在我们具体绘制的时候，我们都需要得到一个Paint 参数

     public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean         useCenter,
            @NonNull Paint paint) {
          super.drawArc(oval, startAngle, sweepAngle, useCenter, paint);
    }

这个时候就会有疑问Paint到底负责什么？
当我们打开Paint之后看到最上面有一句这样的注释

      /**
       * The Paint class holds the style and color information about how to draw（这个Paint类保存关于如何绘制的样式和颜色信息）
       * geometries, text and bitmaps.（几何、文本和位图。）
       */
      public class Paint {

可以看到这个翻译出来之后就很明显了。 这类其实实际上就是保存的色彩与样式信息
那么结合之前我们可以得出这样一个结论
我们在绘制图形的时候，Canvas决定了图形的位置，形状等特性， 而Paint决定了色彩和样式这两者
那么后面几次的课程我们是围绕这两个的一些高级应用来进行处理
基础篇我就不多去一个个讲了，参考下列

2.Paint基础篇

Paint的方法主要可以抽象成两大类

2.1. 负责设置获取图形绘制、路径相关：

   1.setStyle(Paint.Style style) 
   设置画笔样式，取值有
Paint.Style.FILL :填充内部
Paint.Style.FILL_AND_STROKE ：填充内部和描边
Paint.Style.STROKE ：仅描边、
注意STROKE、FILL_OR_STROKE与FILL模式下外轮廓的位置会扩大。
2.setStrokeWidth(float width) 
设置画笔宽度 
3.setAntiAlias(boolean aa) 
设置画笔是否抗锯齿 
4.setStrokeCap(Paint.Cap cap) ------demo演示 
设置线冒样式，取值有Cap.ROUND(圆形线冒)、Cap.SQUARE(方形线冒)、Paint.Cap.BUTT(无线冒) 
注意：冒多出来的那块区域就是线帽！就相当于给原来的直线加上一个帽子一样，所以叫线帽 
5.setStrokeJoin(Paint.Join join) ------ demo演示
设置线段连接处样式，取值有：Join.MITER（结合处为锐角）、Join.Round(结合处为圆弧)、Join.BEVEL(结合处为直线) 
6.setStrokeMiter(float miter) 
设置笔画的倾斜度，90度拿画笔与30拿画笔，画出来的线条样式肯定是不一样的吧。（事实证明，根本看不出来什么区别好吗……囧……）
void reset() 
清空画笔复位。
void set(Paint src) 
            设置一个外来Paint画笔。
7.void setARGB(int a, int r, int g, int b) 
int getAlpha() 
void setAlpha(int a) 
int getColor() 
void setColor(int color) 
获取与设置alpha值、颜色、ARGB等。
final boolean isAntiAlias() 
8.void setAntiAlias(boolean aa) 
获取与设置是否使用抗锯齿功能，会消耗较大资源，绘制图形速度会变慢，一般会开启。设置后会平滑一些；
final boolean isDither() 
9.void setDither(boolean dither) 
获取与设定是否使用图像抖动处理，会使绘制出来的图片颜色更加平滑和饱满、图像更加清晰。      
10.setPathEffect(PathEffect effect);   
* 设置绘制路径的效果，如点画线等 
（1）、CornerPathEffect——圆形拐角效果 
    paint.setPathEffect(new CornerPathEffect(100));
    利用半径R=50的圆来代替原来两条直线间的夹角
（2）、DashPathEffect——虚线效果            
    //画同一条线段,偏移值为15  
    paint.setPathEffect(new DashPathEffect(new float[]{20,10,50,100},15));
    intervals[]：表示组成虚线的各个线段的长度；整条虚线就是由intervals[]中这些基本线段循环组成的。比如，我们定义new float[] {20,10}；那这个虚线段就是由两段线段组成的，第一个可见的线段长为20，每二个线段不可见，长度为10；
    phase：
    开始绘制的偏移值            
    .....       
11.setXfermode(Xfermode xfermode);   
设置图形重叠时的处理方式，如合并，取交集或并集，经常用来制作橡皮的擦除效果       
12.setMaskFilter(MaskFilter maskfilter);   
设置MaskFilter，可以用不同的MaskFilter实现滤镜的效果，如滤化，立体等        
13.setColorFilter(ColorFilter colorfilter);   
设置颜色过滤器，可以在绘制颜色时实现不用颜色的变换效果
14.setShader(Shader shader);   
设置图像效果，使用Shader可以绘制出各种渐变效果   
15.setShadowLayer(float radius ,float dx,float dy,int color);   
在图形下面设置阴影层，产生阴影效果，radius为阴影的角度，dx和dy为阴影在x轴和y轴上的距离，color为阴影的颜色  

2.2 负责设置获取文字相关的

            float getFontSpacing() 
            获取字符行间距。
            float getLetterSpacing() 
            void setLetterSpacing(float letterSpacing) 
            设置和获取字符间距
            
            final boolean isUnderlineText() 
            void setUnderlineText(boolean underlineText) 
            是否有下划线和设置下划线。
            final boolean isStrikeThruText() 
            void setStrikeThruText(boolean strikeThruText) 
            获取与设置是否有文本删除线。
            
            float getTextSize() 
            void setTextSize(float textSize) 
            获取与设置文字大小，注意：Paint.setTextSize传入的单位是px，TextView.setTextSize传入的单位是sp，注意使用时不同分辨率处理问题。
            
            Typeface getTypeface() 
            Typeface setTypeface(Typeface typeface) 
            获取与设置字体类型。Android默认有四种字体样式：BOLD(加粗)、BOLD_ITALIC(加粗并倾斜)、ITALIC(倾斜)、NORMAL(正常)，我们也可以通过Typeface类来自定义个性化字体。
            
            float getTextSkewX() 
            void setTextSkewX(float skewX) 
            获取与设置文字倾斜，参数没有具体范围，官方推荐值为-0.25，值为负则右倾，为正则左倾，默认值为0。
            
            Paint.Align getTextAlign() 
            void setTextAlign(Paint.Align align) 
            获取与设置文本对齐方式，取值为CENTER、LEFT、RIGHT，也就是文字绘制是左边对齐、右边还是局中的。

            setSubpixelText(boolean subpixelText)
            固定的几个范围：320*480，480*800，720*1280，1080*1920等等；那么如何在同样的分辨率的显示器中增强显示清晰度呢？
            亚像素的概念就油然而生了，亚像素就是把两个相邻的两个像素之间的距离再细分，再插入一些像素，这些通过程序加入的像素就是亚像素。在两个像素间插入的像素个数是通过程序计算出来的，一般是插入两个、三个或四个。
            所以打开亚像素显示，是可以在增强文本显示清晰度的，但由于插入亚像素是通过程序计算而来的，所以会耗费一定的计算机性能。
            
            int breakText(String text, boolean measureForwards, float maxWidth, float[] measuredWidth) 
            比如文本阅读器的翻页效果，我们需要在翻页的时候动态折断或生成一行字符串，这就派上用场了~

这个基本是paint的基础使用所有涉及到的方法

对于Paint我们主要是高级应用在的使用

3.Paint高级应用篇

关于Paint的整体比较需要了解一些的总体可以分为三个方向

渲染，滤镜，Xfermode

3.1.渲染

LinearGradient--线性渲染

    霓虹灯文字，倒影图片

device-2017-05-10-193944.png

device-2017-05-10-194140.png

    //霓虹灯文字
    public class LinearGradientTextView extends TextView{
private TextPaint mPaint;

private LinearGradient mLinearGradient ;
private Matrix mMatrix;

private float mTranslate;
private float DELTAX = 20;

public LinearGradientTextView(Context context) {
    super(context);
}

public LinearGradientTextView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    // 拿到TextView的画笔
    mPaint = getPaint();
    String text = getText().toString();
    float textWith = mPaint.measureText(text);
    // 3个文字的宽度
    int gradientSize = (int) (textWith / text.length() * 3);

    // 从左边-gradientSize开始，即左边距离文字gradientSize开始渐变
    mLinearGradient = new LinearGradient(-gradientSize,0,0,0,new int[]{
            0x22ffffff, 0xffffffff, 0x22ffffff},null, Shader.TileMode.CLAMP
    );

    mPaint.setShader(mLinearGradient);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    mTranslate += DELTAX;
    float textWidth = getPaint().measureText(getText().toString());
    if(mTranslate > textWidth + 1 || mTranslate < 1){
        DELTAX = - DELTAX;
    }

    mMatrix = new Matrix();
    mMatrix.setTranslate(mTranslate, 0);
    mLinearGradient.setLocalMatrix(mMatrix);
    postInvalidateDelayed(50);

}
    }

SweepGradient----渐变渲染/梯度渲染

RadialGradient----环形渲染

ComposeShader----组合渲染

那么涉及到比较重要的成员有

Shader ---着色器

Canvas的drawXXXX这个方法是画具体的形状，画笔的shader定义的就是图形的着色和外观

BitmapShader--位图图像渲染，用BitMap对绘制的图形进行渲染着色，简单来说是用图片对图形进行贴图
圆形头像，放大镜效果
TileMode 拉伸形式
CLAMP --是拉伸最后一个像素铺满
MIRROR ---是横向纵向不足处不断翻转镜像平铺
REPEAT ---类似电脑壁纸，横向纵向不足的重复放置

参考百度去了解上述几种渲染， 课上会详细说明
另外滤镜方面和Xfermode作为一下一次课内容

著作：Kerwin Barry
邮箱:kerwin0210@sina.com
原创博客，转载请注明出处.....