View绘制

[]自定义UI

    ()布局  
    ()绘制
    ()触摸反馈

[]绘制关键点

    ()自定义绘制的方式是重写绘制方法,其中最常用的是 onDraw()
    ()绘制的关键是 Canvas 的使用
        Canvas 的绘制类方法: drawXXX() (关键参数:Paint)
        Canvas 的辅助类方法:范围裁切和几何变换
    ()可以使用不同的绘制方法来控制遮盖关系

[]自定义 View 1-1 绘制基础

自定义绘制的四个级别
    1.Canvas 的 drawXXX() 系列方法及 Paint 最常见的使用
    2.Paint 的完全攻略
    3.Canvas 对绘制的辅助——范围裁切和几何变换
    4.使用不同的绘制方法来控制绘制顺序

[]Canvas.drawXXX()

绘制颜色:drawColor(),drawRGB(),drawARGB()
绘制圆,圆环:drawCircle()
绘制矩形:drawRect() 
绘制点:drawPoint(),drawPoints()
绘制椭圆:drawOval()
绘制线:drawLine(),drawLines()
绘制圆角矩形:drawRoundRect()
利用椭圆来绘制弧形和扇形:drawArc() 注意:x轴的正向,即正右的方向,是0度的位置。startAngle和sweepAngle参数为正数是顺时针,为负数是逆时针
绘制Bitmap:drawBitmap()
绘制Text:drawText()
绘制自定义图形:drawPath(),通过描述路径的方式来绘制图形的

Path 有两类方法:一类是直接描述路径的,另一类是辅助的设置或计算

()Path 方法第一类:直接描述路径
    第一组:addXxx() ——添加子图形:添加的是完整封闭图形
                添加圆:addCircle()
                添加弧形:addArc()
                添加椭圆:addOval()
                添加矩形:addRect()
                添加圆角矩形:addRoundRect()
                添加另一个Path:addPath()

    第二组:xxxTo() ——画线(直线或曲线):添加的只是一条线
                画直线:lineTo(),rLineTo()
                画二次贝塞尔曲线:quadTo(),rQuadTo()
                画三次贝塞尔曲线:cubicTo(),rCubicTo()
                移动到目标位置:moveTo(),rMoveTo(y)
                画弧形:arcTo()
                封闭当前子图形:close() 

()Path 方法第二类:辅助的设置或计算
    设置填充方式:Path.setFillType(Path.FillType ft) 

FillType的取值:

()EVEN_ODD(奇偶原则):
平面中的任意一点,向任意方向射出一条射线,这条射线和图形相交的次数(相交才算,相切不算哦)如果是奇数,则这个点在图形内部,是要被涂色的区域;如果是偶数,则这个点在图形外部,是不被涂色的区域。

()WINDING(默认值,非零环绕数原则):平面中的点向任意方向射出一条射线,以0为初始值,对于射线和图形的所有交点,遇到每个顺时针的交点(图形从射线的左边向右穿过)把结果加1,遇到每个逆时针的交点(图形从射线的右边向左穿过)把结果减1,最终把所有的交点都算上,得到的结果如果不是0,则认为这个点在图形内部,是要被涂色的区域;如果是 0,则认为这个点在图形外部,是不被涂色的区域。

()INVERSE_EVEN_ODD

()INVERSE_WINDING

[]自定义 View 1-2 Paint 详解

[]Paint 的 API 大致可以分为 4 类:

颜色
效果
drawText() 相关
初始化

[]颜色:
有三层对颜色的处理

()基本颜色  
    1.Canvas.drawColor/ARGB()—颜色参数
    2.Canvas.drawBitmap()—bitmap参数
    3.Canvas图形和文字绘制—paint参数
()ColorFilter
    Paint.setColorFilter(ColorFilter)
()Xfermode
    Paint.setXfermode(Xfermode)

[]1.1 基本颜色

()1.1.1直接设置颜色
    ()1.1.1.1 setColor(int color)
    ()1.1.1.2 setARGB(int a, int r, int g, int b)

()1.1.2 setShader(Shader shader) 设置Shader
    并不直接用Shader类,而是用它的子类: LinearGradient,RadialGradient,SweepGradient,BitmapShader,ComposeShader
    ()1.1.2.1 LinearGradient 线性渐变
    ()1.1.2.2 RadialGradient 辐射渐变
    ()1.1.2.3 SweepGradient 扫描渐变
    ()1.1.2.4 BitmapShader  Bitmap着色    
    ()1.1.2.5 ComposeShader 混合着色器   

ComposeShader(Shader shaderA, Shader shaderB, PorterDuff.Mode mode)         
    PorterDuff.Mode mode:把源图像(shaderB)绘制到目标图像(shaderA)处时应该怎样确定二者结合后的颜色,共有17个,分为两类:  
                1.Alpha 合成      
                    CLEAR,SRC,DST,SRC_OVER,
                    DST_OVER,SRC_IN,DST_IN,SRC_OUT,
                    DST_OUT,SRC_ATOP,DST_ATOP,XOR,ADD
            2.混合 
                DARKEN,LIGHTEN,MULTIPLY,SCREEN,OVERLAY

[]1.2 setColorFilter(ColorFilter colorFilter)

并不直接用ColorFilter类,而是用它的子类: LightingColorFilter ,PorterDuffColorFilter,ColorMatrixColorFilter

()1.2.1 LightingColorFilter 模拟简单的光照效果
()1.2.2 PorterDuffColorFilter
()1.2.3 ColorMatrixColorFilter

[]1.3 setXfermode(Xfermode xfermode)

Xfermode 指的是要绘制的内容(源图像)和Canvas的目标位置的内容(目标图像)应该怎样结合计算出最终的颜色。

Xfermode 注意事项
    (1) 使用离屏缓冲
        int saved = Canvas.saveLayer()
            //绘制......
        canvas.restoreToCount(saved)
    (2) 控制好透明区域

[]2 效果

()2.1 setAntiAlias() 设置抗锯齿
()2.2 setStyle() 设置样式
()2.3 线条形状
    ()2.3.1 setStrokeWidth() 设置线条宽度
    ()2.3.2 setStrokeCap() 设置线头形状
    ()2.3.3 setStrokeJoin() 设置拐角形状
    ()2.3.4 setStrokeMiter() 设置拐角形状为MITER时拐角的延长线的最大值

()2.4 色彩优化
    ()2.4.1 setDither() 设置图像的抖动
    ()2.4.2 setFilterBitmap() 设置是否使用双线性过滤

()2.5 setPathEffect(PathEffect effect) 给图形的轮廓设置效果

并不直接用PathEffect类,而是用它的子类: CornerPathEffect,DiscretePathEffect,DashPathEffect,PathDashPathEffect,SumPathEffect ,ComposePathEffect

    ()2.5.1 CornerPathEffect 把所有拐角变成圆角
    ()2.5.2 DiscretePathEffect 把线条进行随机的偏离
    ()2.5.3 DashPathEffect 使用虚线来绘制线条
    ()2.5.4 PathDashPathEffect 使用Path来绘制虚线
    ()2.5.5 SumPathEffect 按照两种PathEffect分别对目标进行绘制
    ()2.5.6 ComposePathEffect 先使用PathEffect,改变后再使用另一个 PathEffect

()2.6 setShadowLayer() 给绘制内容下面加一层阴影

()2.7 setMaskFilter(MaskFilter maskfilter) 设置绘制层上方的附加效果

并不直接用MaskFilter类,而是用它的子类: BlurMaskFilter EmbossMaskFilter

    ()2.7.1 BlurMaskFilter 模糊效果
    ()2.7.2 EmbossMaskFilter 浮雕效果

()2.8 获取绘制的 Path
    ()2.8.1 getFillPath()获取绘制的Path
    ()2.8.2 getTextPath()获取文字的Path

[]3 drawText() 相关

[]4 初始化类

()4.1 reset() 重置Paint的所有属性为默认值
()4.2 set() 把参数设置的所有属性全部复制过来
()4.3 setFlags() 批量设置flags。相当于依次调用它们的set方法

[]自定义 View 1-4 Canvas 对绘制的辅助 clipXXX() 和 Matrix

[] 范围裁切:裁切方法之后的绘制,都会被限制在裁切范围内

()1.1 clipRect()
()1.2 clipPath()

注意:要加上Canvas.save()和Canvas.restore()来及时恢复绘制范围

[] 几何变换

[]几何变换的使用大概分为三类:

    ()使用Canvas来做常见的二维变换;
    ()使用Matrix来做常见和不常见的二维变换;
    ()使用Camera来做三维变换。

()2.1 使用 Canvas 来做常见的二维变换
    ()2.1.1 Canvas.translate() 平移
    ()2.1.2 Canvas.rotate() 旋转
    ()2.1.3 Canvas.scale() 放缩
    ()2.1.4 skew() 错切

()2.2 使用 Matrix 来做变换
    ()2.2.1 使用 Matrix 来做常见变换

        Matrix 做常见变换的方式:
            ()创建Matrix对象
            ()调用Matrix的preXXX()/postXXX()来设置几何变换
            ()使用Canvas.setMatrix(matrix)或 Canvas.concat(matrix)来把几何变换应用到Canvas

            注意:尽量采用Canvas.concat(matrix)

    ()2.2.2 使用Matrix来做自定义变换
        ()2.2.2.1 Matrix.setPolyToPoly()用点对点映射的方式设置变换

()2.3 使用 Camera 来做三维变换

    Camera 的三维变换有三类:旋转、平移、移动相机

    ()2.3.1 Camera.rotate*() 三维旋转
    ()2.3.2 Camera.translate() 移动
    ()2.3.3 Camera.setLocation() 设置虚拟相机的位置

[]自定义 View 1-3 drawText() 文字的绘制

()1 Canvas 绘制文字的方式

()1.1 drawText() 绘制文字
()1.2 drawTextOnPath() 沿着Path绘制文字
()1.3 StaticLayout 文字自动换行

()2 Paint 对文字绘制的辅助

()2.1 设置显示效果类
    ()2.1.1 setTextSize() 设置文字大小
    ()2.1.2 setTypeface() 设置字体
    ()2.1.3 setFakeBoldText() 设置是否使用伪粗体
    ()2.1.4 setStrikeThruText() 设置是否加删除线
    ()2.1.5 setUnderlineText() 设置是否加下划线
    ()2.1.6 setTextSkewX() 设置文字横向错切角度
    ()2.1.7 setTextScaleX() 设置文字横向放缩
    ()2.1.8 setLetterSpacing() 设置字符间距
    ()2.1.9 setFontFeatureSettings() 用CSS的font-feature-settings来设置文字
    ()2.1.10 setTextAlign() 设置字的对齐方式

()2.2 测量文字尺寸类
    ()2.2.1 float getFontSpacing() 获取推荐的行距
    ()2.2.2 FontMetircs getFontMetrics() 获取Paint的FontMetrics
    ()2.2.3 getTextBounds() 获取文字的显示范围
    ()2.2.4 float measureText(String text) 获取测量文字的宽度
    ()2.2.5 getTextWidths(String text, float[] widths) 获取字符串中每个字符的宽度,并把结果填入参数 widths
    ()2.2.6 int breakText(String text, boolean measureForwards, float maxWidth, float[] measuredWidth) 获取测量文字宽度

注意:breakText()和measureText()的区别是:breakText() 是在给出宽度上限的前提下测量文字的宽度。如果文字的宽度超出了上限,那么在临近超限的位置截断文字。

    ()2.2.7 光标相关
        ()2.2.7.1 getRunAdvance() 获取出某个字符处光标的x坐标
        ()2.2.7.2 getOffsetForAdvance() 给出坐标值,计算第几个字符最接近这个坐标

[]自定义 View 1-8 硬件加速

()开启硬件加速

Application
    <application android:hardwareAccelerated="true" ...>

Activity
    <application android:hardwareAccelerated="true">
        <activity android:hardwareAccelerated="false" />
    </application>

Window
    getWindow().setFlags(int flags, int mask)
    其中flags和mask的值都为WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED

View
    View.setLayerType(int layerType, Paint paint)
    layerType的值:LAYER_TYPE_NONE,LAYER_TYPE_HARDWARE,LAYER_TYPE_SOFTWARE

注:具体的硬件加速可以参考(http://hencoder.com/ui-1-8/)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值