自定义VIew学习之旅_1

最新推荐文章于 2021-07-23 20:54:04 发布
最新推荐文章于 2021-07-23 20:54:04 发布
阅读量280 收藏
点赞数 1
分类专栏： 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shma1022/article/details/79388560
版权

一.canvas.drawXXX()方法

前言：drawXXX()的方法主要是在onDraw(),dispatchDraw(),onDrawForeground()这三个方法中实现的，具体这三个方法的区别后期会讲到

Canvas.drawXXX() 和 Paint 基础

drawXXX() 系列方法和 Paint 的基础掌握了，就能够应付简单的绘制需求。它们主要包括：
     Canvas 类下的所有 draw- 打头的方法，例如 drawCircle() drawBitmap()。
Paint 类的几个最常用的方法。具体是：
     Paint.setStyle(Style style) 设置绘制模式–填充或者不填充
     Paint.setColor(int color) 设置颜色
     Paint.setStrokeWidth(float width) 设置线条宽度
     Paint.setTextSize(float textSize) 设置文字大小
     Paint.setAntiAlias(boolean aa) 设置抗锯齿开关

1.为当前view填充颜色：canvas.drawColor(@ColorInt int color)/canvas.drawARGB(int a,int r,int g,int b),/canvas.drawRGB(,int r,int g,int b）

举几个栗子：

canvas.drawColor(Color.BLACK);
canvas.drawColor(Color.parseColor("000000"));
canvas.drawRGB(45, 45, 45);
canvas.drawARGB(125, 45, 45, 45);
2.画圆：canvas.drawCircle(float centerX, float centerY, float radius, Paint paint)

参数：centerX：圆心x坐标/像素 ； centerY：圆心Y坐标/像素 ；radius：圆的半径 ；paint：画笔(设置圆形的样式)
这里有个Android坐标系的问题：圆点就是View的左上顶点，x轴水平向右延伸，y轴竖直向下延伸
这里写图片描述
如果要绘制其他样式的圆，比如空心圆，红色的圆等等，可以在paint中设置，常用的设置类型都在上面提到了。
举个栗子：

//在屏幕100，100的位置绘制一个半径为50的红心圆
Paint paint=new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.RED);
canvas.drawCircle(100,100,50,paint);
3.画矩形：canvas.drawRect(float left, float top, float right, float bottom, Paint paint)/canvas.drawRect(RectF rect, Paint paint),canvas.drawRect(RectF rect, Paint paint)

参数：left, top, right, bottom 是矩形四条边的坐标；paint：画笔(设置矩形的样式)；rect就相当于把left,top,right,bottom封装到了一个对象中。
举个栗子：

//在屏幕100，100的位置绘制一个长为200，高为100的红色实心矩形
Paint paint=new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.RED);
canvas.drawRect(100,100,300,200,paint);
4.画点
    4.1画单个点：canvas.drawPoint(float x, float y, Paint paint)

参数：x：点心x坐标；y：点心y坐标；paint：画笔(设置点的样式)
这里还有两个知识：点的大小paint.setStrokeWidth(int width)；
点的形状 paint.setStrokeCap(Cap cap)，这里的形状还适用于画线设置线头两端的形状
举个栗子：

//在屏幕100，100的位置绘制一个大小为10的红色的点
Paint paint=new Paint();
paint.setColor(Color.RED);
paint.setStrokeWidth(10);
//BUTT 方形(平头),ROUND 圆形(圆头), SQUARE 方形(方头)
paint.setStrokeCap(Paint.Cap.BUTT);
canvas.drawPoint(100,100,paint);
    4.2画多个点：canvas.drawPoints(float[] pts, int offset, int count, Paint paint) / canvas.drawPoints(float[] pts, Paint paint)

参数：pts:点心坐标数组({0,0,1,1,2,2}两两为一组xy坐标)；offset：从数组第几个数值开始绘制；count：一共绘制count个数值，绘制count/2个点。
举个栗子：

//描述困难直接上图，看下面
Paint paint=new Paint();
paint.setColor(Color.RED);
paint.setStrokeWidth(10);
paint.setStrokeCap(Paint.Cap.BUTT); 
float[] pts={0, 0, 50, 50, 50, 100, 100, 50, 100, 100, 150, 50, 150, 100};
//从第一个50开始绘制，绘制到最后一个100后停止绘制
canvas.drawPoints(pts,2,8,paint);

太小了看不到，看不到，看不到
绘制多个点的效果

5.画椭圆：canvas.drawOval(float left, float top, float right, float bottom, Paint paint)/canvas.drawOval(RectF rect, Paint paint)

参数：left, top, right, bottom 是这个椭圆的左、上、右、下四个边界点的坐标；paint：画笔(设置矩形的样式)；rectF就相当于把left,top,right,bottom封装到了一个对象中。
举个栗子：

//在屏幕100，100的位置绘制一个长为400，高为200的红色空心椭圆
Paint paint=new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.RED);
canvas.drawOval(100,100,500,300,paint);
6.画线
    6.1画单个线：drawLine(float startX, float startY, float stopX, float stopY, Paint paint)

参数：startX, startY, stopX, stopY 分别是线的起点和终点坐标；paint：画笔(设置矩形的样式)；
举个栗子：

//从100，100到500，300的红色线段，这里就可以设置paint的Cap样式
Paint paint=new Paint();
paint.setColor(Color.RED);
canvas.drawLine(100,100,500,300,paint);
    6.1画多个线：drawLines(float[] pts, int offset, int count, Paint paint) / drawLines(float[] pts, Paint paint)

参数：类似于绘制多个点，这里的pts可以理解为四个数值为一组，分别代表起点x，起点y，终点x，终点y
举个栗子：

//这里直接用HenCoder的数据，形状如下
Paint paint=new Paint();
paint.setColor(Color.RED);
float[] points = {20, 20, 120, 20, 70, 20, 70, 120, 20, 120, 120, 120, 150, 20, 250, 20, 150, 20, 150, 120, 250, 20, 250, 120, 150, 120, 250, 120};  
canvas.drawLines(points, paint);

这么大能看到，能看到，能看到

这里写图片描述

7.画圆角矩形：canvas.drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint)/canvas.drawRoundRect(RectF rect, float rx, float ry, Paint paint)

参数：left, top, right, bottom 是四条边的坐标；rx 和 ry 是圆角的横向半径和纵向半径；paint：画笔(设置圆角矩形的样式)；rectF就相当于把left,top,right,bottom封装到了一个对象中。
举个栗子：

//在屏幕100，100的位置绘制一个长为400，高为200，弧度为50的红色实心圆角矩形
Paint paint=new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.RED);
canvas.drawRoundRect(100, 100, 500, 300, 50, 50, paint);
7.画弧形：canvas.drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

参数：left, top, right, bottom 分别是椭圆的四个边的坐标；startAngle：弧形开始的角度；sweepAngle：弧形扫过的角度；userCenter：弧形时候连接圆心(true：扇形；false：弧形)，paint：画笔(设置弧形的样式)；
举个栗子：

//在屏幕100，100的位置绘制一个长为400，高为200，弧度为50的红色实心圆角矩形
Paint paint=new Paint();
paint.setStyle(Paint.Style.FILL); 
canvas.drawArc(200, 100, 800, 500, -110, 100, true, paint); // 绘制实心的扇形  
canvas.drawArc(200, 100, 800, 500, 20, 90, false, paint); // 绘制实心的弧形  
paint.setStyle(Paint.Style.STROKE); 
canvas.drawArc(200, 100, 800, 500, 100, 160, true, paint); // 绘制封口空心的弧形弧形  
canvas.drawArc(200, 100, 800, 500, 180, 60, false, paint); // 绘制不封口的空心弧形
8.画Bitmap：drawBitmap(Bitmap bitmap, float left, float top, Paint paint) /drawBitmap(Bitmap bitmap, Rect src, RectF dst, Paint paint) / drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint) / drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint)

参数：left, top就是绘制图片的起点坐标；paint：画笔(设置Bitmap的样式)；
举个栗子：

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.test);
canvas.drawBitmap(bitmap, 200, 100, paint);
9.绘制文字：drawText(String text, float x, float y, Paint paint)

参数：text：要绘制的文字；left, top就是绘制文字的起点坐标；paint：画笔(设置文字的样式)；
举个栗子：

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.test);
canvas.drawBitmap(bitmap, 200, 100, paint);

Canvas.drawPath(Path path,Paint paint)画自定义图形

参数：path：路径(可以通过该类绘制出不同的形状)；paint：画笔(…)
既然是自定义图形，那么就会遇到两个图形相交的情况，这里先补充一下相交图形的填充模式：path.setFillType(Path.FillType ft).
这里的FillType取值有四个：EVEN_ODD、WINDING、INVERSE_EVEN_ODD、INVERSE_WINDING

  1. EVEN_ODD（奇偶原则）
    对于平面中的任意一点，向任意方向射出一条射线，这条射线和图形相交的次数（相交才算，相切不算哦）如果是奇数，则这个点被认为在图形内部，是要被涂色的区域；如果是偶数，则这个点被认为在图形外部，是不被涂色的区域。
    这里写图片描述

    射线的方向不影响结果，如果射线经过交点，则观察有几条线经过该交点就计算几次

  2. WINDING（非零环绕数原则）
    以 0 为初始值，对于射线和图形的所有交点，遇到每个顺时针的交点（图形从射线的左边向右穿过）
    把结果加1，遇到每个逆时针的交点（图形从射线的右边向左穿过）把结果减 1，
    最终把所有的交点都算上，得到的结果如果不是 0，则认为这个点在图形内部，
    是要被涂色的区域；如果是0，则认为这个点在图形外部，是不被涂色的区域。
    这里写图片描述

    *射线的方向不影响结果，如果射线经过交点，则观察有几条线经过该交点就计算几次

这里用一张图来表现几个相交图形的填充，便于理解Path的填充方式
这里写图片描述
- INVERSE_EVEN_ODD（将EVEN_ODD的效果进行反转）
- INVERSE_WINDING（将WINDING的效果进行反转）

path正文

1.Path添加子图形：path.addXXX()

- addCircle(float x, float y, float radius, Direction dir) 添加圆

和canvas.drawCircle()使用方法差不多，少了一个Paint参数，多了一个Direction参数(绘制的方向：顺时针 (CW clockwise) 和逆时针 (CCW counter-clockwise))，实际使用中不同的绘制方向就会影响到上面提到的填充模式，而paint参数会在canvas.drawPath()中使用

- addOval(float left, float top, float right, float bottom, Direction dir) / addOval(RectF oval, Direction dir) 添加椭圆

和canvas.drawOval()使用方法差不多，少了一个Paint参数，多了一个Direction参数(绘制的方向：顺时针 (CW clockwise) 和逆时针 (CCW counter-clockwise))，实际使用中不同的绘制方向就会影响到上面提到的填充模式，而paint参数会在canvas.drawPath()中使用

- addRect(float left, float top, float right, float bottom, Direction dir) / addRect(RectF rect, Direction dir) 添加矩形

和canvas.drawRect()使用方法差不多，少了一个Paint参数，多了一个Direction参数(绘制的方向：顺时针 (CW clockwise) 和逆时针 (CCW counter-clockwise))，实际使用中不同的绘制方向就会影响到上面提到的填充模式，而paint参数会在canvas.drawPath()中使用

- addRoundRect(RectF rect, float rx, float ry, Direction dir) / addRoundRect(float left, float top, float right, float bottom, float rx, float ry, Direction dir) / addRoundRect(RectF rect, float[] radii, Direction dir) / addRoundRect(float left, float top, float right, float bottom, float[] radii, Direction dir) 添加圆角矩形

和canvas.drawRoundRect()使用方法差不多，少了一个Paint参数，多了一个Direction参数(绘制的方向：顺时针 (CW clockwise) 和逆时针 (CCW counter-clockwise))，实际使用中不同的绘制方向就会影响到上面提到的填充模式，而paint参数会在canvas.drawPath()中使用

-addArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle) / addArc(RectF oval, float startAngle, float sweepAngle)添加弧形
-arcTo(RectF oval, float startAngle, float sweepAngle, boolean forceMoveTo) / arcTo(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean forceMoveTo) / arcTo(RectF oval, float startAngle, float sweepAngle) 画弧形

先说一下addArc和arcTo的区别：addArc就是默认forceMoveTo参数为true的arcTo。而forceMoveTo的意思是上次绘制结束后是否连线到当前绘制的弧形，
这里少了userCenter和Paint参数，Path是用来绘制路径的，所以这里只会绘制弧形，而不会绘制扇形，所以用不到userCenter，Paint参数我就不说了。

2.画线：path.XXXTo()

- lineTo(float x, float y) / rLineTo(float x, float y) 画直线

从当前位置(最后一次调用path绘制后的终点位置)向目标位置画一条直线， x 和 y 是目标位置的坐标。这两个方法的区别是，lineTo(x, y) 的参数是绝对坐标，即以当前位置为起点，以x，y的位置为终点。而 rLineTo(x, y) 的参数是相对当前位置的相对坐标 （前缀 r 指的就是 relatively 「相对地」)，即以当前位置为起点，以当前位置的x坐标向右增加x，从当前位置的y坐标向下增加y的点作为终点

- quadTo(float x1, float y1, float x2, float y2) / rQuadTo(float dx1, float dy1, float dx2, float dy2) 画二次贝塞尔曲线

这条二次贝塞尔曲线的起点就是当前位置，而参数中的 x1, y1 和 x2, y2 则分别是控制点和终点的坐标。和 rLineTo(x, y) 同理，rQuadTo(dx1, dy1, dx2, dy2) 的参数也是相对坐标

-cubicTo(float x1, float y1, float x2, float y2, float x3, float y3) / rCubicTo(float x1, float y1, float x2, float y2, float x3, float y3) 画三次贝塞尔曲线

和上面这个 quadTo() rQuadTo() 的二次贝塞尔曲线同理，cubicTo() 和 rCubicTo() 是三次贝塞尔曲线，不再解释。

arcTo(RectF oval, float startAngle, float sweepAngle, boolean forceMoveTo) / arcTo(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean forceMoveTo) / arcTo(RectF oval, float startAngle, float sweepAngle) 画弧形

这里解释一下drawArc、arcTo、addArc三个的关系：
drawArc：画一个扇形或弧形
arcTo：画一个弧形
addArc：画一个弧形，相当于arcTo方法中的forceMoveTo参数为true的简化

-moveTo(float x, float y) / rMoveTo(float x, float y) 移动到目标位置

将绘制的起点移动到目标位置，绘制的起点默认为最后一次绘制后的位置，初始值为原点。

-close() 封闭当前子图形

将最后绘制结束点的坐标与起点坐标连起来，和lineTo(起点坐标)一个效果

【我的Android进阶之旅】解决Android Studio在XML中使用自定义View输入自定义属性的时候没有任何提示的问题
字节卷动
08-16 5438
一、问题描述 这两天公司的一个年轻的小伙子在维护历史的自定义控件库的时候，发现之前开发这个自定义控件库的人员写的自定义控件，Android Studio开发的时候，在XML布局文件中无法自动提示出自定义属性，需要自己去看代码了解这个自定义控件有哪些自定义属性，然后手动的copy和paste代码。太恶心了！ 经过一段时间的排查，发现之前的开发人员自定义控件的自定义属性的declare-style...
Android自定义View之旅（一）自定义View的几种方式
冰码思维库
05-27 319
通常，自定义View有三个大的区分点，在日常开发中遇到自定义View的需求时，最好想一想该走哪条路，走得快一些轻松些总是好的。三条路都有适用点，我们要合理选择，做最懒的程序猿
Path常用方法
编程之美
08-20 3315
Path类中提供了一套xxxTo方法，其作用是从起点到终点移动path画笔并绘制线（moveTo方法只移动path画笔不绘制线），线有直线和曲线。 方法汇总如下表所示： lineTo(float x, float y) 绘制直线 x：终点x坐标值 y：终点y坐标值 moveTo(float x, float y) 移动画笔 x：终点x坐标值 y：终点y坐标值 arcTo(RectF oval,...
android 上面月亮模式,Android UI 篇- 手势月亮 亮度动画
weixin_35759015的博客
06-03 510
Android UI 篇- 手势月亮动画一、应用场景1.1、先上效果图2020-05-03 01_00_28.gif一个有创意的亮度动画，通过手势上下滑动控制手机屏幕亮度，动画从太阳(天亮了)变成月亮(夜黑了)，非常漂亮屏幕亮度动画！二、流程分析2.1、先上渐变图分析：渐变图1首先需要画一个圆需要画出 A,B 两点之间的向圆心弯曲的弧度，和 A,B 本身的圆弧，然后用 PorterDuff.Mod...
canvas 圆角矩形填充_解决使用canvas.drawRoundRect()时，四个圆角的线比较粗的问题...
weixin_31842715的博客
12-30 918
使用canvas.drawRoundRect()时，解决四个圆角的线比较粗的问题，最近在使用 drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint) 画圆角矩形时，四个圆角的线总是比四条边的线更粗，看起来相当难看。如下图：画图的代码片段如下。protected...
Android知识总结——Path常用方法解析
AnliaLee的博客
11-17 2309
开发过程中很容易忘记一些API的使用方法，网上搜索或者在源码里找也很难短时间内筛选出自己需要的，遂自己将这些知识总结一番
Android 自定义View —— Path
小牧在一直在学习,在前进的道路上大家一起学习，进步。
09-14 826
Path 的概念： Path类封装由直线段，二次曲线和三次曲线组成的复合（多个轮廓）几何路径。可以使用canvas.drawPath（path，paint）对其进行填充或描边绘制（基于Paint的Style），也可以用于剪切或在路径上绘制文本 Path 的使用也就是上一篇canvas 里面没有说的drawPath方法 （1）lineTo、rLineTo 绘制线 (注意很多方法都有不带r与带r 我也写了2边它们的区别，不带r的) （2）moveTo、rMoveTo 修改起始点位置 （3）setL..
自定义View学习之锯齿波纹效果
u012946477的博客
09-01 370
工作太久都忘记了学习，落下了很多基础而又实用的东西，尤其在自定义View这块，每每提及都惶恐不已，在我家小棉袄的鞭策之下，痛定思痛，拿起手中之笔，开启了我的学习之旅。在网上看到一篇自定义View的文章，以此为基准来学习了自定义View中结合Path和drawArc来实现锯齿波纹效果。 先上一张效果图 看图先来分析下整个View的组成部分，其实很简单 - 中间是一个矩阵 - 锯齿状的两侧可以
Android进阶之旅 - 自定义View
铁铮的博客
07-23 387
收录分享一篇红橙Darren的文章： 文章特色 第一部分，自定义 View 的入门，通过事例讲解自定义 View 的一些套路，让大家知道自定义 View 其实没想象中的那么难，主要熟悉 Canvas 画图。 第二部分，源码阅读分析，很多时候我们改别人写好的自定义 View 都是瞎改，尤其是针对 onTouch() 事件分发更是无从下手，我希望带大家系统的了解源码之后能顺心应手。 第三部分， Metral Design 这是 Google 提倡的一种效果理念，但我发现国内很多 APP 很少涉及到这..
Android 开发之旅：详解view的几种布局方式及实践
01-20
【Android 开发之旅：详解view的几种布局方式及实践】 在Android应用开发中，构建用户界面至关重要，而View和ViewGroup是构建用户界面的基础。View是Android系统中表示用户界面的基本元素，而ViewGroup则作为容器，...
自定义控件学习笔记（二）drawPath(）
yy471101598的博客
11-15 1万+
drawPath(Path path, Paint paint) 这个方法是通过描述路径的方式来绘制图形的，它的 path 参数就是用来描述图形路径的对象。path 的类型是 Path ，使用方法大概像下面这样：public class PathView extends View { Paint paint = new Paint(); Path path = new Path();
Android ApiDemos示例解析(70):Graphics->PathFillTypes
mmdev
07-16 186
对于简单的封闭图形（路径无相交的现象），图形的外部和内部和容易判断，但如果路径有相交的情况，对应重叠的部分，使用不同的填充模式，内部和外部的定义有所不同。填充模式可以分为两类： EVEN_ODD 意味着如果用一条直线横贯图形时，外部和内部交替出现。 WINDING 对应一条曲线C和指定点P，创建一条由P出发的任意方向无限延伸的直线。找到曲线C和这条直线的所有交点。计算所有由顺时针方向和曲线相...
使用canvas.drawRoundRect()时，解决四个圆角的线比较粗的问题
热门推荐
kuaiguixs的博客
12-11 2万+
最近在使用 drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint) 画圆角矩形时，四个圆角的线总是比四条边的线更粗，看起来相当难看
Android绘图进阶之Path详解
大神了没
08-08 3523
【原文地址 点击打开链接】 基本布局 例如圆形，矩形，弧线等等，这些都是 Android 预置好的绘图方法，但是如果我们想要绘制一些复杂的图形怎么办呢？例如绘制一个三角形，N变形，非规则图形呢？好在 Android 给我们提供了 Canvas的drawPath(Path path, Paint paint) 方法，这个 Path 是什么呢？Path
canvas 画图
一站到底s的博客
04-26 2008
Canvas绘图有三个基本要素：Canvas、绘图坐标系以及Paint *Canvas是画布，我们通过Canvas的各种drawXXX方法将图形绘制到Canvas上面， *在drawXXX方法中我们需要传入要绘制的图形的坐标形状， *还要传入一个画笔Paint Canvas坐标系与绘图坐标系 Canvas绘图中牵扯到两种坐标系：Canvas坐标系与绘图坐标系。 Canvas坐标系...
android 自定义View之Path详解
fengzi
08-19 2362
Path Path Path.Direction Path.FillType Path.Op Path的函数 The Path class encapsulates compound (multiple contour) geometric paths consisting of straight line segments, quadratic curves, and ...
Spring Boot Starter-kit：含多种技术应用，如数据库、认证机制，有应用结构.zip
11-14
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。
包含 Spring Boot 等系列技术参考指南中文版及相关资源的仓库.zip
11-14
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。
Unity3d 3D模型描边代码 懒人直接上代码
最新发布
11-14
Unity3d 3D模型描边代码 懒人直接上代码
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值