Android 自定义View 画圆(奥运五环)

效果图
在这里插入图片描述

前言

你会画画吗?你会写代码吗?你会用代码画画吗?

正文

自定义View,实际开发过程中,因为涉及用户体验的时候,UI通常会弄一些骚操作出来,这个时候就有两个选择,你是用GIF呢?还是自己自定义一个呢?用GIF当然会增加你的APP的体积,而自定义View难度也不小,于是很多人都会选择用GIF先解决这个问题,后面再去自己自定义,然后就没有然后了(PS:曾经我也是这样的一个人,但是,人是会变的,小老弟),好了,说了一些废话,下面进入主题,开始画画。

首先思考一个问题,用什么来画?废话,当然是纸和笔啊!那程序里面怎么画画呢?怎么把画出来的图形显示在页面上呢?你会不会思考这些呢?下面一一揭晓,Android中通过 PaintCanvas 来画画,啥玩意儿?我怎么都没有听说过呢?触及到我的知识盲区!开始怀疑人生,我是谁?我在哪?中午吃什么?

Paint

这个就是笔,在Android中也叫画笔,你可以设置画笔的颜色,下面通过表格来看看这个画笔有哪些属性

属性说明
setAntiAlias设置画笔的锯齿效果, true是去除,false是不去除,默认是有锯齿的,因为绘画效率会高一些
setColor设置画笔颜色
setARGB设置画笔的a,r,g,p值,设置Paint对象颜色,参数一为alpha透明通道
setAlpha设置alpha不透明度,范围为0~255
setFakeBoldText设置为粗体文本
setLinearText设置为线性文本
setTextAlign设置文本对齐方式
setTextSize设置字体尺寸
setTextScaleX设置文本缩放倍数,1.0f为原始
setTypeface设置字体,Typeface包含了字体的类型,粗细,还有倾斜、颜色等
setUnderlineText设置下划线
setStyle设置画笔样式 ,常用的有Paint.Style.FILL(实心)、Paint.Style.STROKE(空心)、Paint.Style.FILL_AND_STROKE(填充再描边)
setStrokeWidth在画笔的样式为STROKE的时候,图形的轮廓宽度

上面也是一部分属性,我怕你没有耐心看完,所以就不写更多了,上面说完了笔,下面该说纸了

Canvas

这个你自己可以理解为纸,在Android中这个叫画布,它又有哪些属性呢?也通过一个表格来说明一下

属性说明
drawARGB画布颜色,第一个是透明度,后面是常规的RGB色值
drawColor画布颜色,可以用Android自带的,也可以自定义
drawRGB画布颜色,相比drawARGB少了一个透明度而已
drawArc扇形
drawCircle圆形
drawOval椭圆形
drawLine线
drawPoint
drawRect矩形
drawRoundRect圆角矩形
drawVertices顶点
drawPath路径
drawBitmap位图
drawPicture图片

OK,相信你看这个表已经看得不耐烦,(PS:其实我写的也烦了,悄悄地说)迫不及待的想要实践了,下面来实践一下
首先创建一个项目,我取名为PaintDemo,创建好之后,新建一个CustomView.java的文件,然后继承View,实现两个构造方法。如下所示
在这里插入图片描述
然后我们在activity_main.xml使用这个Custom,自定义View使用时需要完整的包名路径,如下所示
在这里插入图片描述
现在你运行可以运行一下,不管是真机还是模拟器都可以,先确保你的项目没有问题,这样出现问题的时候可以少排查一个因素,这是实际开发总结出来的。不过你运行之后会是一片空白,因为什么都没有。
下面在CustomView写下如下代码

	/*** 在纸上画画 (通俗理解)* @param canvas  纸*/@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);Paint paint = new Paint();//创建画笔对象  笔paint.setColor(Color.BLACK);//设置颜色paint.setStyle(Paint.Style.STROKE);//画笔样式为空心,也可以理解为描边paint.setStrokeWidth(4);//描边的宽度paint.setAntiAlias(true);//抗锯齿(去掉锯齿)/*** 画圆* 参数一:圆心的X轴坐标* 参数二:圆心的Y轴坐标* 参数三:圆的半径* 参数四:画笔对象*/canvas.drawCircle(150,150,100,paint);//完成}

我相信注释得已经很清楚了,这个时候你运行一下,就会看到一个黑色的空心圆
在这里插入图片描述
然后再修改一下代码,画一个实心圆
在这里插入图片描述
再运行一下
在这里插入图片描述
**canvas.drawCircle(150,150,100,paint);**表示圆心在横坐标和纵坐标都为150的位置,以半径为100画一个圆,可以把这一行代码复制四次,然后改变半径的大小,为了看到效果,还是画空心圆
在这里插入图片描述
然后运行一下,就可以看到
在这里插入图片描述
是不是觉得有点意思了。平时像这种图案你会自己去画吗?还是找UI切图呢?
刚才我们只是改变了半径而已,下面试着改变横坐标和纵坐标。
我们试着画两个圆挨着,如果是横向挨着就要使一个圆的圆心横坐标位置等于另一个圆的圆心横坐标加上直径的和,刚才我们看到一个横坐标是150,半径是100,那么结果很明显第二个圆的圆心的位置就是350,这次我们不改变半径大小,只改变横坐标试一下
在这里插入图片描述
运行结果如下图
在这里插入图片描述
接下来运用这个思路来画一个奥运五环吧
在这里插入图片描述
运行效果如下图所示
在这里插入图片描述
除了没有颜色还是比较像的。你想要改颜色就可以自由改变setColor就可以了。下面改动一下代码

	/*** 根据传入的颜色配置不同的画笔* @param color 颜色* @return*/private Paint customPaint(int color){Paint paint = new Paint();//创建画笔对象  笔paint.setColor(color);paint.setStyle(Paint.Style.STROKE);paint.setStrokeWidth(8);paint.setAntiAlias(true);return paint;}

然后我们在onDraw中调用

 	/*** 在纸上画画 (通俗理解)* @param canvas  纸*/@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);/*** 画圆* 参数一:圆心的X轴坐标* 参数二:圆心的Y轴坐标* 参数三:圆的半径* 参数四:画笔对象*/canvas.drawCircle(150,150,100,customPaint(Color.BLUE));//完成canvas.drawCircle(370,150,100,customPaint(Color.BLACK));canvas.drawCircle(590,150,100,customPaint(Color.RED));canvas.drawCircle(260,250,100,customPaint(Color.YELLOW));canvas.drawCircle(480,250,100,customPaint(Color.GREEN));}

运行效果如下:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/253312.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

PS小知识(三)——画圆滑线及虚线

一:画一个圆滑线 1、利用“套索工具”沿着地物画一个圈;或者利用“磁性套索工具”画圈(这个的特点是可以大致按照不同的颜色自动追踪)。 2、右击进行“描边” 3、进行下面的“平滑”操作 二:画一个圆滑且各段等长的…

html画布里面画圆,html5 canvas 画布画圆

什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。javascript 画布是一个矩形区域,您能够控制其每一像素。css canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。html 浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome 以及 Sa…

Bresenham 画圆算法原理

文章目录 前言Bresenham 画圆算法原理两个近似构造判别式圆与网格点的关系关系由来关系含义 p i p_i pi​ 递推画圆程序伪码 圆与网格点的关系图示 前言 首先简要介绍一下生成圆的方法: 直接利用圆的方程生成圆利用圆的对称性生成圆 方法一由于会涉及到浮点运算等…

C++ deque类成员函数介绍

目录 🤔deque模板介绍: 🤔deque特点: 🤔deque内存结构图解: 🤔deque各操作地址指向: 🤔 deque的成员函数: deque构造函数: 🔍代…

ajax异步请求刷新layui表格

ajax异步请求刷新Layui表格数据 今天遇到一个小问题,向后端传一个bean插入到数据库后,在前端页面同步显示。刚开始直接用from表单把数据传给后台进行插入操作,但是这样前端不能及时接收到后端完成插入操作的信息(其实是我不知道怎…

form 表单提交时用ajax异步请求导致ajax请求结果无法接收问题

1、背景描述,有个公司内部用的小系统,不想大动干戈用太多前端框架,就用HTML5写了个登陆页面,刚开始想着用form表单提交登陆账户信息。后来因为前后端分离,并且统一用ajax调用后台服务交互数据,因此在form表…

AJAX异步请求(Asynchronous Javascript And Xml)

文章目录 1、传统请求及缺点(1)传统的请求(2)传统请求存在的问题 2、AJAX概述3、XMLHttpRequest对象4、AJAX GET请求5、AJAX GET请求缓存问题6、AJAX POST请求(1)案例一:使用AJAX POST请求实现用…

AJAX 异步请求处理

AJAX Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。 AJAX 不是新的编程语言,而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。 AJA…

如何判断一个请求是否是Ajax异步请求

前言 今天在看项目过程中,发现了一段代码。是用来判断一个请求是否是ajax请求,出于好奇,我研究了一番。 代码预览 /*** 是否是Ajax异步请求* * param request*/public static boolean isAjaxRequest(HttpServletRequest request){String ac…

jquery实现ajax异步请求

前端代码&#xff1a; <html> <head> <meta charset"UTF-8"> <title>异步请求</title> <script type"text/javascript" src"jquery-3.3.1.js"></script> <script type"text/javascript"…

基于深度学习的高精度山羊检测识别系统(PyTorch+Pyside6+YOLOv5模型)

摘要&#xff1a;基于深度学习的高精度山羊检测识别系统可用于日常生活中或野外来检测与定位山羊目标&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的山羊目标检测识别&#xff0c;另外支持结果可视化与图片或视频检测结果的导出。本系统采用YOLOv5目标检测模型…

HTML发送异步请求,使用原生JS发送ajax异步请求

Ajax Ajax: Asynchronous javaScript and xml (异步的JavaScript和xml技术)。当我们向服务器发起请求的时候,服务器不会像浏览器响应整个页面,而是只有局部刷新。它是一个异步请求。 请求: 同步请求:只有当一次请求完全结束以后才能够发起另一次请求。 异步请求:不需要其他请…

AJAX 异步请求详细教程

文章目录 AJAX 异步请求简介Jquery 版 Ajax$.ajax() -- Jquery提供的 ajax 函数注册验证用户名是否可用$.get() 与 $.post()Ajax 返回数据类型 JSONjson 简介JSON 对象JSON 数组对象数组混合格式小结 JSON 应用JSON 对象的使用JSON 数组的使用响应的 json 数组数组对象混合格式…

ajax异步请求及案例

ajax异步请求及案例 1、ajax的介绍 前端页面想和后端页面进行数据交互就可以使用ajax。让 javascript 发送异步的 http 请求&#xff0c;与后台服务器通信进行数据的获取&#xff0c;实现局部刷新。在html页面使用ajax需要在web服务器环境下运行, 一般向自己的web服务器发送a…

AJAX 异步请求数据

AJAX 的全称是Asynchronous JavaScript and XML&#xff0c;其中&#xff0c;Asynchronous 是异步的意思&#xff0c;它有别于传统web开发中采用的同步的方式。 JQuery AJAX 应用详见&#xff1a;jQuery ajax AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接…

异步请求-AJAX

什么是同步交互 首先用户向HTTP服务器提交一个处理请求。接着服务器端接收到请求后&#xff0c;按照预先编写好的程序中的业务逻辑进行处理&#xff0c;比如和数据库服务器进行数据信息交换。最后&#xff0c;服务器对请求进行响应&#xff0c;将结果返回给客户端&#xff0c;返…

Ajax

#Ajax 概念&#xff1a; Asynchronous Javascript And XML”&#xff08;异步 JavaScript 和 XML&#xff09;&#xff0c;是指一种创建交互式网页应用的网页开发技术。 1. 异步和同步&#xff1a;客户端和服务器端相互通信的基础上 * 客户端必须等待服务器端的响应。在等待的期…

elementUI中<el-select>下拉框选项过多的页面优化方案——多列选择

效果展示(多列可以配置) 一、icon下拉框的多列选择&#xff1a; 二、常规、通用下拉框的多列选择&#xff1a; 【注】第二种常规、通用下拉框的多列选择&#xff0c;是在第一种的前端代码上删除几行代码就行&#xff08;把icon显示标签删去&#xff09;&#xff0c;所以下面着重…

python+django高校人事管理系统vue

本高校人事管理系统以Django作为框架&#xff0c;Python语言&#xff0c;B/S模式以及MySql作为后台运行的数据库。本系统主要包括以下功能模块&#xff1a;用户、院长、职称申报、工资信息、绩效信息、奖惩信息、招聘、科系分类等模块。 本文着重阐述了高校人事管理系统的分析、…

chatgpt赋能python:Python中提取纯数字的方法

Python中提取纯数字的方法 在数据清洗和数据分析中&#xff0c;经常需要将文本中的数字提取出来&#xff0c;用于后续的计算或统计分析。Python作为一种流行的数据处理语言&#xff0c;提供了多种方法来完成这个任务。 方法一&#xff1a;使用正则表达式 正则表达式是一种强…