自定义View的绘制

这是一篇总结性地文章,内容来自扔物线文章以及网易公开课,本文是自己对文章的总结
一、View的坐标系

每一个子View都有一个自己的坐标系,并且互不影响,坐标系的原点是View的左上角,遵循右正左负,下正上负

如这张图所示,在左上定点为画布的原点,圆心的左边是(300,300)


image.png
二、canvas的作用

1.canvas可以指定绘制的位置,以及绘制什么样的图层

canvas.drawColor() 在整个绘制层上绘制一层背景色

三、Paint负责绘制的风格

绘制的颜色,抗锯齿,绘制线条的方式,实心还是空心等等和风格相关的都是由paint来做的

Paint.setAntiAlias(boolean aa) 设置抗锯齿开关
Paint.setStyle(Paint.Style.STROKE) 画出图形的线条 不会填充整个图形
Paint.setStrokeCap(cap) 设置线条端点形状
Paint. setShader 设置着色器
Paint.setColorFilter 设置颜色的过滤效果 比如加滤镜
Paint.setStrokeJoin 设置线条拐角的方式
Paint.setDither(boolean dither) 加入抖动效果有规律地扰乱图像来让图像对于肉眼更加真实
Paint.setFilterBitmap(filterBitmap)优化图像放大后的效果,消除马赛克
Paint.setPathEffect 图像外围轮廓线的效果
Paint.setShadowLayer 给绘制的内容加一层阴影 BlurMaskFilter 模糊效果

1. Paint.setStrokeCap(cap)效果示意图

画笔圆角效果

2. Paint.setFilterBitmap(true)效果示意图
左边是未开启优化的,右边是开启优化的,可以看到少了许多马赛克的效果

设置双线性过滤

3. Paint.setStrokeJoin效果示意图

拐角的效果

4.使用着色器可以实现一种规律性的变化。着色器分为三类 线性渐变new LinearGradient,从中心进行辐射渐变RadialGradient,像雷达
一样扫描的渐变SweepGradient, 使用图像来图形上色 BitmapShader,将多个着色器组合起来使用的ComposeShader



线性的着色器示例

image.png

    /**
        * 1.线性渲染,LinearGradient(float x0, float y0, float x1, float y1, @NonNull @ColorInt int colors[], @Nullable float positions[], @NonNull TileMode tile)
        * (x0,y0):渐变起始点坐标
        * (x1,y1):渐变结束点坐标
        * color0:渐变开始点颜色,16进制的颜色表示,必须要带有透明度
        * color1:渐变结束颜色
        * colors:渐变数组
        * positions:位置数组,position的取值范围[0,1],作用是指定某个位置的颜色值,如果传null,渐变就线性变化。
        * tile:用于指定控件区域大于指定的渐变区域时,空白区域的颜色填充方法
        */
       mShader = new LinearGradient(0, 0, 500, 500, new int[]{Color.RED, Color.BLUE, Color.GREEN}, new float[]{0.f,0.7f,1}, Shader.TileMode.REPEAT);
       mPaint.setShader(mShader);
       canvas.drawRect(0,0,1000,1000, mPaint);

环形的着色器示例


image.png
   /* 环形渲染,RadialGradient(float centerX, float centerY, float radius, @ColorInt int colors[], @Nullable float stops[], TileMode tileMode)
        * centerX ,centerY:shader的中心坐标,开始渐变的坐标
        * radius:渐变的半径
        * centerColor,edgeColor:中心点渐变颜色,边界的渐变颜色
        * colors:渐变颜色数组
        * stoops:渐变位置数组,类似扫描渐变的positions数组,取值[0,1],中心点为0,半径到达位置为1.0f
        * tileMode:shader未覆盖以外的填充模式。
        */
       mShader = new RadialGradient(250, 250, 250, new int[]{Color.GREEN, Color.YELLOW, Color.RED}, null, Shader.TileMode.CLAMP);
       mPaint.setShader(mShader);
       canvas.drawCircle(250, 250, 250, mPaint);

位图的着色器示例


image.png
       /**
        * 位图渲染,BitmapShader(@NonNull Bitmap bitmap, @NonNull TileMode tileX, @NonNull TileMode tileY)
        * Bitmap:构造shader使用的bitmap
        * tileX:X轴方向的TileMode
        * tileY:Y轴方向的TileMode
              REPEAT, 绘制区域超过渲染区域的部分,重复排版
              CLAMP, 绘制区域超过渲染区域的部分,会以最后一个像素拉伸排版
              MIRROR, 绘制区域超过渲染区域的部分,镜像翻转排版
        */
       mShader = new BitmapShader(mBitmap, Shader.TileMode.REPEAT, Shader.TileMode.MIRROR);
       mPaint.setShader(mShader);
       canvas.drawRect(0,0,500, 500, mPaint);

组合的着色器示例

   /**
         * 组合渲染,
         * ComposeShader(@NonNull Shader shaderA, @NonNull Shader shaderB, Xfermode mode)
         * ComposeShader(@NonNull Shader shaderA, @NonNull Shader shaderB, PorterDuff.Mode mode)
         * shaderA,shaderB:要混合的两种shader
         * Xfermode mode: 组合两种shader颜色的模式
         * PorterDuff.Mode mode: 组合两种shader颜色的模式
         */
        BitmapShader bitmapShader = new BitmapShader(mBitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
        LinearGradient linearGradient = new LinearGradient(0, 0, 1000, 1600, new int[]{Color.RED, Color.GREEN, Color.BLUE}, null, Shader.TileMode.CLAMP);
        mShader = new ComposeShader(bitmapShader, linearGradient, PorterDuff.Mode.MULTIPLY);
        mPaint.setShader(mShader);
        canvas.drawCircle(250, 250, 250, mPaint);
三、Canvas重点API

drawArc :画扇形
drawPath(Path,Paint):画自定义的图形
drawTextOnPath:沿着一趟线绘制文字

1.对于drawPath需要传入path对象。path对象又有几种属性。

addXXX 表示添加某图形

quadTo:贝塞尔曲线
moveTo:将圆点移动到指定的位置,不管画什么图形都是从当前位置开始画的,通过moveTo可以指定画笔起始的位置。
close() 自动封闭,假设画了三角形的两边后直接调用该方法,会自动将两点连接起来形成封闭。
setFillType(Path.FillType ft) 设置填充方式

2.drawText难点

1.drawText指定的x,y是要绘制的文字左下角的坐标,纵坐标y代表文字的基线


image.png

2.可以使用StaticLayout来实现绘制文字的自动换行


image.png
  1. setTypeface设置字体
  2. setStrikeThruText删除线setUnderlineText下划线
  3. setLetterSpacing字符的间距
  4. setFontFeatureSettings使用css的方式设置字体
  5. setTextAlign对其方式
  6. setTextLocale设置绘制文字的地域文字类型。大陆简体 台湾繁体
  7. getFontSpacing获取推荐的行距,可以在换行绘制时使用
canvas.drawText(texts[1], 100, 150 + paint.getFontSpacing, paint);

4.canvas的裁切
绘制的内容超出这个范围会被裁切掉,使用clipRect方法。clipPath

5.保存canvas的一次绘制状态
canvas.save, canvas.restore。几何变化一定要配合save和restore来配合使用。否则将后续绘制也受之前的影响

canvas的几何变换

canvas的几何变换代码执行顺序是倒序的,如果想要先旋转再平移,那么平移代码要写在最上面,再写旋转的代码。translate,scale,rotate,skew

6.canvas的平移
使用translate方法让中心点平移到某个位置,由于canvas的几何变换是反着的,所以如果要先平移到一个点,再移动回原点要先写移动回原点的代码,再写移动到其他位置的代码。

7.使用matris矩阵来变换
post..方法代表在前面插入,也就是变换代码是顺序执行的
per..方法是往后边的代码插入,也就是和canvas的变换顺序,会插入到其他变换代码的后面。

四、使用Camera来实现三维旋转

image.png

1.camera.save/restore/applytoCanvas
camera的操作是在图像的原点(0,0)进行的,因此使用camera变化是不对称的,如果想要在图形的中心点进行变化,需要配合canvas的translate方法将canvas移动到中心点进行变化,然后再移动回去。因为camera是不支持设置轴心的,轴心永远是(0,0点)。

2.使用setLocation来将相机的位置向后移动
相机后移投影的图像变小。一般情况不需要移动x,y 只需要移动z轴。因为相机是在z轴上。
camera.setLocation(0, 0, newZ);

**3.camera的旋转正方向

image.png

View绘制的过程

1.新绘制的总是会覆盖之前绘制的内容
2.View的绘制过程是从drawBackground(不能重写),onDraw绘制主题,dispatchDraw绘制子view,drawForeground绘制前景色,而这些都是由draw方法触发的
3.如果是直接继承view,super.onDraw并没有什么用,因为onDraw本身就是空实现
4.ViewGroup在通过onDraw绘制完自身后,会通过onDispatchDraw方法绘制子View
5.ViewGroup默认会跳过draw方法而直接执行dispatchDraw,如果想让它绘制自身,使用setWillNotDraw(false)来执行完整的绘制流程

hencoder的图片

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,902评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,037评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,978评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,867评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,763评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,104评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,565评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,236评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,379评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,313评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,363评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,034评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,637评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,719评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,952评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,371评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,948评论 2 341

推荐阅读更多精彩内容