Android 自定义控件之基础几何图形绘制详解

最新推荐文章于 2024-06-29 22:58:51 发布
最新推荐文章于 2024-06-29 22:58:51 发布
阅读量4.8k 收藏 5
点赞数 2
分类专栏： Android 文章标签： android canvas paint 自定义 View
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/airsaid/article/details/52562488
版权

转载请标明出处： http://blog.csdn.net/airsaid/article/details/52562488
本文出自：周游的博客

前言

距离写上一篇自定义View文章已经大半年过去了，一直想继续写，但是无奈技术有限，生怕误人子弟。这段时间项目刚刚完成，有点时间，跟着大神的脚步，巩固下自定义View的相关基础知识。

Canvas&Paint

Canvas和Paint可以理解为现实中的画布和画笔，这两样是绘图必备，首先来详细的了解下这两个。

Paint常用函数

首先来看下Paint的常用函数：
* setColor(int color)：设置画笔颜色。
* setStrokeWidth(float width)：设置画笔宽度。
* setAntiAlias(boolean aa)：设置抗锯齿。
* setStyle(Style style): 设置填充样式。
* setShadowLayer(float radius, float dx, float dy, int shadowColor)：设置阴影。

设置画笔颜色和画笔宽度没什么可说的，设置抗锯齿可以让我们绘制的图形更加圆滑，除了Paint的setAntiAlias()函数可以设置抗锯齿外，也可以通过Canvas设置：

canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG));

setStyle()

setStyle()函数可以设置如下参数：
* Paint.Style.STROKE：描边。
* Paint.Style.FILL：填充内部。
* Paint.Style.FILL_AND_STROKE：填充内部和描边。
新建个项目，在onDraw函数中分别绘制下，看下都有什么区别：

protected void onDraw(Canvas canvas) {
    mPaint.setColor(Color.BLUE);
    mPaint.setStyle(Paint.Style.STROKE);
    canvas.drawCircle(mLeftX, mLeftY, 100, mPaint);

    mPaint.setColor(Color.RED);
    mPaint.setStyle(Paint.Style.FILL);
    canvas.drawCircle(mLeftX * 4, mLeftY, 100, mPaint);

    mPaint.setColor(Color.BLACK);
    mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    canvas.drawCircle(mLeftX * 7, mLeftY, 100, mPaint);
}

运行结果：
这里写图片描述

通过运行结果可以看到，貌似Paint.Style.FILL和Paint.Style.FILL_AND_STROKE其实并没有什么区别。
但是，如果把画笔的宽度调宽一些：

mPaint.setStrokeWidth(50);

mPaint.setColor(Color.RED);
mPaint.setStyle(Paint.Style.FILL);
canvas.drawCircle(mLeftX, mLeftY, 50, mPaint);

mPaint.setColor(Color.BLACK);
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
canvas.drawCircle(mLeftX * 4, mLeftY, 50, mPaint);

运行结果：
这里写图片描述

可以看出看来，FILL_AND_STROKE其实会把宽度一起填充。

setShadowLayer()

setShadowLayer(float radius, float dx, float dy, int shadowColor)：
* radius：阴影倾斜度。
* dx：水平位移。
* dy：垂直位移。
* shadowColor：阴影颜色。
给文字绘制上阴影：

mPaint.setTextSize(50);
mPaint.setColor(Color.BLUE);
mPaint.setShadowLayer(5, 10, 10, Color.GREEN);
canvas.drawText("Airsaid", mLeftX, mLeftY, mPaint);

运行结果：
这里写图片描述

Canvas常用函数

Canvas作为画布，含有绘制各种图形的函数，下面根据具体图形来分类进行详细讲解。

绘制背景

  • drawColor(int)：绘制画布背景。
  • drawRGB(int r, int g, int b)：同上。
  • drawARGB(int a, int r, int g, int b)：同上，四个参数取值范围0~255。

绘制一条直线

  • drawLine(float startX, float startY,float stopX,float stopY,Paint paint)：
    • startX：开始x坐标。
    • startY：开始Y坐标。
    • stopX：结束x坐标。
    • stopY：结束Y坐标。
    • paint：绘制直线所用画笔。
      代码实例：
mPaint.setColor(Color.BLUE);
mPaint.setStrokeWidth(10);
canvas.drawLine(0, 0, getWidth(), 0, mPaint);

运行结果：
这里写图片描述

绘制多条直线

  • drawLines(float[] pts, Paint paint)：一般绘制多条直线。
    • pts：坐标点数据的集合，每４个为一组绘制一条直线。
    • paint：绘制直线所用画笔。
      代码实例：
mPaint.setColor(Color.BLUE);
mPaint.setStrokeWidth(10);
float pts[] = {0, 10, getWidth(), 10, 0, 50, getWidth(), 50};
canvas.drawLines(pts, mPaint);

运行结果：
这里写图片描述

  • drawLines(float[] pts, int offset, int count, Paint paint)：有选择的绘制多条直线。
    • pts：坐标点数据的集合，每４个为一组绘制一条直线。
    • offset：跳过的数据个数，跳过的数据将不参与绘制过程。
    • conunt：实际参与绘制的数据个数。
    • paint：绘制直线所用画笔。
      代码示例，跳过一条线的绘制：
mPaint.setColor(Color.BLUE);
mPaint.setStrokeWidth(10);
float pts[] = {0, 10, getWidth(), 10, 0, 50, getWidth(), 50};
canvas.drawLines(pts, 4, 4, mPaint);

运行结果：
这里写图片描述

绘制单点

  • drawPoint(float x, float y,Paint paint)：绘制一个点。
    • x：点的x坐标。
    • y：点的y坐标。
    • paint：绘制点所用画笔。
      代码示例：
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(20);
canvas.drawPoint(100, 100, mPaint);

运行结果：
这里写图片描述

绘制多点

  • drawPoints(float[] pts, Paint paint)：绘制多个点。
    • pts：坐标点的数据集合，每两个为一组绘制一个点。
      代码示例（绘制三个点）：
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(20);
float pts[] = {100, 100, 200, 100, 300, 100};
canvas.drawPoints(pts, mPaint);

运行结果：
这里写图片描述

  • drawPoints(float[] pts, int offset, int count, Paint paint)： 有选择的绘制多个点。
    • pts：参数同上，其他参数同绘制多条线一样。
      代码示例（跳过第1个点，只绘制2个点）：
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(20);
float pts[] = {100, 100, 200, 100, 300, 100};
canvas.drawPoints(pts, 2, 4, mPaint);

运行结果：

这里写图片描述

绘制矩形

  • drawRect(Rect r, Paint paint)：根据传入的Rect绘制矩形。
  • drawRect(RectF rect, Paint paint)：根据传入的RectF绘制矩形。
  • drawRect(float left, float top, float rigth, float bottom, Paint paint)：直接传入矩形的四个点来绘制矩形。
    代码示例（分别使用以上函数绘制三个矩形）：
mPaint.setColor(Color.RED);

Rect rect = new Rect(100, 30, 200, 100);
canvas.drawRect(rect, mPaint);

RectF rectF = new RectF(300, 30, 400, 100);
canvas.drawRect(rectF, mPaint);

canvas.drawRect(500, 30, 600, 100, mPaint);

其中Rect和RectF为矩形辅助类，可根据4个点构建一片矩形区域，用于帮助我们对矩形进行操作。

运行结果：
这里写图片描述

绘制圆角矩形

  • drawRoundRect(RectF rect, float rx, float ry, Paint paint)： 根据传入的RectF绘制圆角矩形。
    • rect：要绘制的矩形。
    • rx：x轴圆角椭圆半径。
    • ry：y轴圆角椭圆半径。
  • drawRoundRect(float left, float top, float rigth, float bottom, float rx, float ry, Paint paint)：直接传入矩形的四个点来绘制圆角矩形，从API21开始提供。
    参数同上。
    代码实例（根据以上函数分别绘制圆角矩形）：
mPaint.setColor(Color.RED);
RectF rectF = new RectF(0, 0, 300, 100);
canvas.drawRoundRect(rectF, 30f, 30f, mPaint);

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    canvas.drawRoundRect(400f, 0f, 700f, 100f, 30f, 30f, mPaint);
}

其中，由于直接传入矩形的四个点来绘制圆角矩形的函数是在API21才开始提供，所以进行了判断。
运行结果：
这里写图片描述

绘制圆形

  • drawCircle(float cx,float cy,float radius,Paint paint)：
    • cx：圆心点x轴坐标。
    • cy：圆心点y轴坐标。
    • radius：圆的半径。
    • paint：绘制圆形所用画笔。
      代码示例：
mPaint.setColor(Color.RED);
canvas.drawCircle(100f, 50f, 50f, mPaint);

运行结果：
这里写图片描述

绘制椭圆

  • drawOval(RectF oval, Paint paint)：根据矩形对象绘制椭圆。
    • oval：矩形对象。椭圆根据该矩形对象生成，以矩形的长作为椭圆的x轴，宽为y轴。
  • drawOval(float left, float top, float rigth, float bottom, Paint paint)：直接传入矩形的四个点来绘制椭圆，从API21开始提供。
    参数同上。
    代码示例：
mPaint.setColor(Color.RED);
RectF rectF = new RectF(50, 0, 200, 100);
canvas.drawOval(rectF, mPaint);

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    canvas.drawOval(300, 0, 450, 100, mPaint);
}

运行结果：
这里写图片描述

绘制弧形

  • drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)：
    • oval：矩形对象。
    • startAngle：弧形开始的角度。
    • sweepAngle：弧形持续的角度。
    • useCenter：是否有弧形的两边。
    • paint：绘制弧形的画笔。
  • drawArc(float left, float top, float rigth, float bottom,float startAngle, float sweepAngle, boolean useCenter, Paint paint)：
    参数同上。
    代码实例：
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(5);
mPaint.setStyle(Paint.Style.STROKE);
RectF rectF = new RectF(50, 0, 200, 100);
canvas.drawArc(rectF, 0f, 180f, false, mPaint);

RectF rectF2 = new RectF(250, 0, 400, 100);
canvas.drawArc(rectF2, 0f, 180f, true, mPaint);

RectF rectF3 = new RectF(450, 0, 600, 100);
mPaint.setStyle(Paint.Style.FILL);
canvas.drawArc(rectF3, 0f, 180f, true, mPaint);

运行结果：
这里写图片描述

参考链接

Airsaid
关注
专栏目录
【愚公系列】2023年10月 WPF控件专题 Path控件详解
时光隧道
07-09 9746
WPF控件是Windows Presentation Foundation（WPF）中的基本用户界面元素。它们是可视化对象，可以用来创建各种用户界面。WPF控件可以分为两类：原生控件和自定义控件。原生控件是由Microsoft提供的内置控件，如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见的标准用户界面元素。自定义控件则允许开发人员使用XAML和C#等编程语言来创建个性化的用户界面元素。自定义控件可以根据需求提供更多的功能和自定义化选项，以及更好的用户体验。
android 几何图形的绘制
03-20
NULL 博文链接：https://byandby.iteye.com/blog/826418
自定义控件——基础图形绘制
weixin_43847987的博客
09-03 304
android中的paint类就是画笔，canvas类就是纸，也就是画布。 画笔的基本属性如下： Paint paint = new Paint(); paint.setColor(Color.RED);//设置画笔基本属性 paint.setStyle(Paint.Style.STROKE);//设置填充样式 paint.setStrokeWidth(50);//设置画笔宽度 如何实现画一个...
Android 自定义控件笔记（如何创建自己的自定义控件，具体步骤）
最新发布
Chenyile161616的博客
06-29 819
自定义View，自定义控件
自定义控件零基础教学（一）——自定义控件的绘制理念
xw960219的博客
04-06 320
开篇之言：        这是我第一次写博客。为什么写呢？有两个很重要的原因。第一，在之前浏览的博客经验中，我发现很多博客都极其缺少对于IT专业知识的现实比喻，将晦涩难懂的专业语句或结构用现实就有的现象去比喻，这有利于学习者更好的去理解那些知识。第二个原因就是想抛砖引玉，我是一个应届毕业生，本身只对游戏开发感兴趣，但无奈被老师坑来学习安卓应用开发，和手游一点边的着不到，所以在学习安卓的时候，我更侧...
Android绘制自定义控件,Android自定义控件 | View绘制原理（画在哪？）
weixin_39573535的博客
05-25 111
View绘制就好比画画，抛开Android概念，如果要画一张图，首先会想到哪几个基本问题：画多大?画在哪？怎么画？Android绘制系统也是按照这个思路对View进行绘制，上面这些问题的答案分别藏在：测量(measure)定位(layout)绘制(draw)这一篇将从源码的角度分析“定位(layout)”。如果想直接看结论可以移步到第三篇末尾。如何描述位置位置都是相对的，比如“我在你的右边”、“你...
Android图形绘制之——简单的几何图形
lvmingci的博客
02-27 659
1.自定义view 2.重写onDraw()方法 3.xml中引用： 自定义view代码： public class MyView extends View{ public MyView(Context context, AttributeSet attrs) { super(context, attrs); } /** * 重写绘制
Android自定义控件三部曲文章索引
热门推荐
启舰
11-25 17万+
前言：在我从C++转到Android时，就被Android里炫彩斑斓的自定义控件深深折服，想知道如果想利用C++实现这些功能，那是相当困难的。从那时候起，我就想，等我学会了自定义控件，一定要写一篇系列出来，方便后来者能更系统完善地掌握它。今天，这个系列就这样默默地诞生了，希望它能够完成它的使命，在你读完这系列博客时，发现定自义控件也不过如此！如果，顺便能给个评论，加个关注，我将不胜感激——启舰 ...
Canvas详解(android自定义view,onDraw()绘制各种图形)
fengzi
08-13 6269
Canvas Canvas:The Canvas class holds the “draw” calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into the bitmap), a dra...
Android自定义控件进阶05-Path之基本操作
鸿蒙开发知识记录
08-11 438
Android自定义控件进阶05-Path之基本操作 在上一篇Canvas之图片文字中我们了解了如何使用Canvas中绘制图片文字，结合前几篇文章，Canvas的基本操作已经差不多完结了，然而Canvas不仅仅具有这些基本的操作，还可以更加炫酷，本次会了解到path(路径)这个Canvas中的神器，有了这个神器，就能创造出更多**炫(zhuang)酷(B)**的东东了。 一.Path常用方法表 为了兼容性(偷懒) 本表格中去除了部分API21(即安卓版本5.0)以上才添加的方法。 作用 相
Android绘图之Paint的使用方法详解
01-05
大家都知道在Android中，自定义控件是一个非常重要的知识点，而自定义控件对Android开发者是一个难点，考验开发人员对View原理的理解，对于继承View的自定义控件，一般都需要重写onDraw方法，而且往往需要开发人员...
Canvas_drawPoints
12-22
介绍Canvas中drawPoints方法 详情见博客http://blog.csdn.net/a87b01c14/article/details/50380873
安卓自定义View基础-绘制点、线、矩形、圆形等
05-11
安卓自定义View基础-绘制点、线、矩形、圆形等详情查看http://blog.csdn.net/z1353095373/article/details/71601293
Android自定义View实现shape图形绘制
01-04
概述 之前曾写过一篇文章介绍了Android中drawable使用Shape资源，通过定义drawable中的shape资源能够绘制简单的图形效果，如矩形，椭圆形，线形和圆环等。后来我在项目中正好遇到这样一个需求，要在特定的位置上显示一条垂直的虚线。正当我胸有成竹的把上面的资源文件放入进去的时候，我才发现它并不能符合我的要求。使用shape画出的垂直虚线，其实就是将一条水平的线，旋转90度。但这样做的弊端就是，该View有效区域为旋转90度后与原来位置相重合的区域，还不能随意的改动，这样的效果根本没法使用。于是我就想到使用自定义view来绘制我想要的结果。 1.画一条水平虚线 代码如下所示：
Android绘图机制与处理技巧（三）——Android图像处理之图形特效处理
黄飞的专栏
05-30 1505
Android绘图机制与处理技巧（三）——Android图像处理之图形特效处理
平面几何
wjhtu_csdn的博客
04-29 464
最近在做一个2D界面的开发，其中会用到很多几何运算，不胜其烦。痛定思痛，不如自己写几个类吧，希望把关于点、线、矩形的操作包含进去，我用三个类表达他们，分别是CPoint2D、CLine2D、CRect2D。 CPoint2D 表示一个点，有两个数据成员，double x，double y分别表示x和y坐标。 构造函数 用一个点构造另一个点： CPoint2D(CPoint2D pt)； ...
在嵌套布局中画图
wangjia55的专栏
08-02 1042
1.类 public class MyLayout extends RelativeLayout{ private Path mPath; private Paint mPaint; private int color; private int size; private Canvas mCanvas; private Bitm
Android控件绘制完成原来是这样的
q390345932的专栏
10-22 2337
实际开发中经常会碰到需要获取某个控件的宽度和高度的情况，但是在实际测试中我们在Activity的启动中期函数中废了老大劲了，我们发现是这样的OnCreate=>>>>>>>>>width==0,height==0 onStart=>>>>>>>>>width==0,height==0 onResume=>>>>>>>>>width==0,height==0这可不就傻眼了，裤子都脱了，你就给我看这个。
Android自定义控件，你们是如何系统学习的？
baidu_32472003的博客
04-03 637
Android自定义控件，你们是如何系统学习的？https://www.zhihu.com/question/41101031
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值