自定义View-绘图机制与处理技巧

2024-09-05 16:18
文章标签 技巧 自定义 处理 绘图 机制 view

本文主要是介绍自定义View-绘图机制与处理技巧，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

转载自：http://blog.csdn.net/dakaniu/article/details/78846972
仅作学习之用

1 单位转换
由于各种屏幕密度不同,导致同样像素大小的长度,在不同密度的屏幕上显示的长度不同,如下是各个密度值中的换算公式,
在mdpi 中 1dp = 1px,
在hdpi 中 1dp = 1.5px,
在xhdpi 中 1dp = 2px,
在xxhdpi 中 1dp = 3px,
其直接的换算公式是: ldpi:mdpi:hdpi:xhdpi:xxhpi = 3:4:6:8:12
转换代码如下:

 /*** 根据手机的分辨率从 dp 的单位 转成为 px(像素) */public static int dip2px(Context context, float dpValue) {final float scale = context.getResources().getDisplayMetrics().density;return (int) (dpValue * scale + 0.5f);}/*** 根据手机的分辨率从 px(像素) 的单位 转成为 dp */public static int px2dip(Context context, float pxValue) {final float scale = context.getResources().getDisplayMetrics().density;return (int) (pxValue / scale + 0.5f);}/***  使用系统提供的TypedValue 进行转换*  */public static int dp2px(Context context,float dp){return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,dp,context.getResources().getDisplayMetrics());}public static int px2dp(Context context,float px){return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX,px,context.getResources().getDisplayMetrics());}

2 2D的绘图基础
系统通过提供Canvas对象来提供绘图的方法,比如

 // 画笔的属性以及对应功能 mPaint.setAlpha(8); //设置画笔的AlphamPaint.setStrokeWidth(5); //设置空心边框的宽度mPaint.setShader(new LinearGradient(0, 0, 400, 0, new int[]{Color.BLUE, 0x123321, Color.BLUE}, null, Shader.TileMode.CLAMP))mPaint.setTextSize(20);mPaint.setARGB(10,8,5,4); //设置颜色值,分别对应 透明度,红,绿,蓝的四个通道分量来决定像素点的颜色mPaint.setAntiAlias(true);//设置画笔的锯齿效果mPaint.setColor(Color.YELLOW);//设置画笔的颜色mPaint.setStyle(Paint.Style.STROKE);//设置画笔的风格:空心STROKE 或者实心FILLPath path = new Path(); //定义一条路径 path.moveTo(40,50);//移动到坐标 40 50path.lineTo(100,100);path.lineTo(100,50);path.lineTo(50,200);// 绘图的功能以及属性canvas.drawPath(path,mPaint);canvas.drawPosText("Hello",new float[]{100,100,//第一个字母的坐标 100,200,//第二个字母的坐标 ......100,300,100,400,100,500},mPaint);//在指定的位置绘制文本canvas.drawOval(100,200,400,300,mPaint);//绘制椭圆RectF rect = new RectF(50, 50, 200, 200);//定义一个矩形区域canvas.drawRoundRect(rect,30, //x轴的半径30, //y轴的半径mPaint);canvas.drawPoint(400,500,mPaint);//绘制点canvas.drawLine(200,300,500,600,mPaint);//绘制线canvas.drawArc(rect1, //弧线所使用的矩形区域大小0,  //开始角度90, //扫过的角度false, //是否使用中心mPaint);canvas.drawText("android",200,410,mPaint);//绘制文本canvas.drawRect(100,200,500,460,mPaint);//绘制矩形canvas.drawCircle(100,370,40,mPaint);//绘制圆形

3 XML绘图

3.1 Bitmap
在xml中的drawable/目录下可以创建Bitmap资源,举例,在drawable目录下创建bit_picture.xml并实现如下代码

<?xml version="1.0" encoding="utf-8"?>
<bitmapxmlns:android="http://schemas.android.com/apk/res/android"android:src="drawable/drawable_resource"android:antialias=["true" | "false"]android:dither=["true" | "false"]android:filter=["true" | "false"]android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |"fill_vertical" | "center_horizontal" | "fill_horizontal" |"center" | "fill" | "clip_vertical" | "clip_horizontal"]android:mipMap=["true" | "false"]android:tileMode=["disabled" | "clamp" | "repeat" | "mirror"] />

通过以上代码,可以直接将图片转换成Bitmap 直接使用

    //xml调用<ImageViewandroid:layout_width="100dp"android:layout_weight="1"android:layout_height="100dp"android:src="@drawable/bit_picture"/>//java中调用getResources().getDrawable(R.drawable.bit_picture);

3.2 Shape
通过shape可以在xml中绘制各种形状,举例 在res/drawable文件夹下，新建一个文件，命名为：shape_demo.xml 代码如下

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"> // |oval|line|ring<!-- shape = rectangle时使用,表示边角的圆弧半径 半径默认是1dp--><corners android:radius="9dp"android:topLeftRadius="5dp"android:topRightRadius="2dp"android:bottomLeftRadius="3dp"android:bottomRightRadius="4dp"/><!-- 实心填充 --><solid android:color="#00000000" /><!-- 描边：一般大小都是1dp --><strokeandroid:width="1dp"android:color="#ff000000"android:dashGap="15dp"android:dashWidth="40dp"/><!-- 四周留出来的空白,和xml文件中的pad效果一样，对内起作用 --><paddingandroid:bottom="30dp"android:left="20dp"android:right="30dp"android:top="20dp" /><!-- 指定大小 --><size android:height="400dp"android:width="400dp"/><!-- 背景颜色渐变 --><gradientandroid:angle="45"android:endColor="#ff00ff00"android:startColor="#ff0000ff"android:type="linear"android:useLevel="true"android:centerColor="#611111"/>
</shape>
调用方法同3.1

3.3 Layer
Layer主要是用来实现图层效果的,举例 在res/drawable文件夹下，新建一个文件，命名为：layer_demo.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@drawable/arrow_right"/><item android:left="10.0dip"android:top="10.0dip"android:right="20.0dip"android:bottom="30.0dip"android:drawable="@drawable/arrow_right"/>
</layer-list>
调用方法同3.1

3.4 Selector
主要是实现静态绘图中的事件反馈,通过不同的事件设置不同的图像,在res/drawable文件夹下，新建一个文件，命名为：selector_demo.xml
举例1

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><!-- 默认时背景图片--><item android:drawable="@drawable/red"/><!-- 没有焦点时背景图片--><item android:state_window_focused="false"android:drawable="@drawable/dark_yellow"/><!-- 非触摸模式下获得焦点并单击时背景图片--><item android:state_focused="true"android:state_pressed="true"android:drawable="@drawable/bule"/><!-- 触摸模式下获得焦点并单击时背景图片--><item android:state_focused="false"android:state_pressed="true"android:drawable="@drawable/black"/><!-- 选中时背景图片--><item android:state_selected="true"android:drawable="@drawable/dark_bule"/><!-- 获取焦点时背景图片--><item android:state_focused="true"android:drawable="@drawable/deep_yellow"/>
</selector>
// 调用方法同3.1

举例2 在Selector中使用shape来作为它的item

    <item android:state_pressed="true" ><shape android:shape="rectangle"><solid android:color="#224444"></solid><corners android:radius="5dp"/><padding android:right="10dp"android:top="10dp"android:left="10dp"android:bottom="10dp"/></shape></item><item ><shape android:shape="rectangle"><solid android:color="#FFFFFF"/><corners android:radius="5dp"/><padding android:bottom="10dp"android:top="10dp"android:left="10dp"android:right="10dp"/></shape></item>

4 绘图技巧

4.1 Canvas
作为绘图的直接对象, 以下几个方法非常好用

Canvas.save() // 将之前的所有已绘制的图像保存起来,后续操作就像在另一个图层上一样
Canvas.restore();//将save之后的绘图与sava之前的绘图合并起来
Canvas.translate();//平移坐标系
Canvas.rotate();//旋转坐标系
举例, 画一个仪表盘

 public CanvasView(Context context, @Nullable AttributeSet attrs) {super(context, attrs);mPaint = new Paint();mPaint.setStyle(Paint.Style.STROKE);mPaint.setAntiAlias(true);mPaint.setStrokeWidth(10);mWidth = 600;mHeight = 800;}@Overrideprotected void onDraw(Canvas canvas) {canvas.drawCircle(mWidth/2,mHeight/2,mWidth/2,mPaint);// 以mWidth/2,mHeight/2为圆心,以mWidth/2为半径,用mPaint画一个圆Log.i("niuniu ", " init  drawCircle ");mPaint.setStrokeWidth(8);for(int i = 0;i<24;i++){String value = String.valueOf(i);if(i==0 || i==6 || i == 12 ||i==18){mPaint.setStrokeWidth(6);mPaint.setTextSize(35);canvas.drawLine(mWidth/2,mHeight/2-mWidth/2,mWidth/2,mHeight/2-mWidth/2+60,mPaint);canvas.drawText(value,mWidth/2-mPaint.measureText(value)/2,mHeight/2-mWidth/2+110,mPaint);}else {mPaint.setStrokeWidth(4);mPaint.setTextSize(20);canvas.drawLine(mWidth/2,mHeight/2-mWidth/2,mWidth/2,mHeight/2-mWidth/2+30,mPaint);canvas.drawText(value,mWidth/2-mPaint.measureText(value)/2,mHeight/2-mWidth/2+60,mPaint);}canvas.rotate(15,mWidth/2,mHeight/2); //以mWidth/2,mHeight/2为圆心,将坐标系旋转15°}Paint paint1 = new Paint();paint1.setStrokeWidth(10);Paint paint2 = new Paint();paint2.setStrokeWidth(8);canvas.save(); // 保存画笔以及上面的圆环canvas.translate(mWidth/2,mHeight/2);//平移到圆心 已圆心为坐标起点 0,0canvas.drawLine(0,0,100,80,paint1);canvas.drawLine(0,0,100,120,paint2);canvas.restore(); // 将所画的的指针与sava之前的圆环合并起来super.onDraw(canvas);}

4.2 Layer图层
图层是基于栈的结构进行管理的.android通过saveLayer(),saveLayerAlpha()将一个图层入栈,利用restore(),restoreToCount()将图层出栈,入栈时,后面的操作都会发生在这个图层上,出栈时,会把图像绘制在上层的cavas上.
举例

        mPaint.setStyle(Paint.Style.FILL);mPaint.setColor(Color.BLUE);canvas.drawColor(Color.WHITE);canvas.drawCircle(150,150,100,mPaint);canvas.saveLayerAlpha(0,0,400,400,127,Canvas.ALL_SAVE_FLAG);//入栈,将后面所画的红色圆都发生在该图层上mPaint.setColor(Color.RED);canvas.drawCircle(200,200,100,mPaint);canvas.restore();//出栈,将前面所有的图像都绘制在该canvas上

这篇关于自定义View-绘图机制与处理技巧的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1139449。

相关文章

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya（不是本人，claude AI）在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容： 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用
阅读更多...
JVM 的类初始化机制

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时，有没有考虑过 JVM 是如何把静态的字节码（byte code）转化为运行时对象的呢，这个问题看似简单，但清楚的同学相信也不会太多，这篇文章首先介绍 JVM 类初始化的机制，然后给出几个易出错的实例来分析，帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段，分别是：loading 、Linking、initialization
阅读更多...
AI绘图怎么变现？想做点副业的小白必看！

AI绘图怎么变现？想做点副业的小白必看！

在科技飞速发展的今天，AI绘图作为一种新兴技术，不仅改变了艺术创作的方式，也为创作者提供了多种变现途径。本文将详细探讨几种常见的AI绘图变现方式，帮助创作者更好地利用这一技术实现经济收益。 更多实操教程和AI绘画工具，可以扫描下方，免费获取 定制服务：个性化的创意商机 个性化定制 AI绘图技术能够根据用户需求生成个性化的头像、壁纸、插画等作品。例如，姓氏头像在电商平台上非常受欢迎，
阅读更多...
无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题：墙体两侧特征混淆误匹配，导致建图和定位偏差，表现为过门跳变、外月台走歪等 ·解决思路：预期的根治方案IGICP需要较长时间完成上线，先使用切分地图的工程化方案，即墙体两侧切分为不同地图，在某一侧只使用该侧地图进行定位 方案思路 切分原理：切分地图基于关键帧位置，而非点云。 理论基础：光照是直线的，一帧点云必定只能照射到墙的一侧，无法同时照到两侧实践考虑：关
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
购买磨轮平衡机时应该注意什么问题和技巧

购买磨轮平衡机时应该注意什么问题和技巧

在购买磨轮平衡机时，您应该注意以下几个关键点： 平衡精度 平衡精度是衡量平衡机性能的核心指标，直接影响到不平衡量的检测与校准的准确性，从而决定磨轮的振动和噪声水平。高精度的平衡机能显著减少振动和噪声，提高磨削加工的精度。 转速范围 宽广的转速范围意味着平衡机能够处理更多种类的磨轮，适应不同的工作条件和规格要求。 振动监测能力 振动监测能力是评估平衡机性能的重要因素。通过传感器实时监
阅读更多...
科研绘图系列：R语言扩展物种堆积图（Extended Stacked Barplot）

科研绘图系列：R语言扩展物种堆积图（Extended Stacked Barplot）

介绍 R语言的扩展物种堆积图是一种数据可视化工具，它不仅展示了物种的堆积结果，还整合了不同样本分组之间的差异性分析结果。这种图形表示方法能够直观地比较不同物种在各个分组中的显著性差异，为研究者提供了一种有效的数据解读方式。 加载R包 knitr::opts_chunk$set(warning = F, message = F)library(tidyverse)library(phyl
阅读更多...
【生成模型系列（初级）】嵌入（Embedding）方程——自然语言处理的数学灵魂【通俗理解】

【生成模型系列（初级）】嵌入（Embedding）方程——自然语言处理的数学灵魂【通俗理解】

【通俗理解】嵌入（Embedding）方程——自然语言处理的数学灵魂 关键词提炼 #嵌入方程 #自然语言处理 #词向量 #机器学习 #神经网络 #向量空间模型 #Siri #Google翻译 #AlexNet 第一节：嵌入方程的类比与核心概念【尽可能通俗】 嵌入方程可以被看作是自然语言处理中的“翻译机”，它将文本中的单词或短语转换成计算机能够理解的数学形式，即向量。 正如翻译机将一种语言
阅读更多...
Java ArrayList扩容机制 （源码解读）

Java ArrayList扩容机制 （源码解读）

结论：初始长度为10，若所需长度小于1.5倍原长度，则按照1.5倍扩容。若不够用则按照所需长度扩容。 一. 明确类内部重要变量含义         1：数组默认长度         2:这是一个共享的空数组实例，用于明确创建长度为0时的ArrayList ，比如通过 new ArrayList<>(0)，ArrayList 内部的数组 elementData 会指向这个 EMPTY_EL
阅读更多...
滚雪球学Java(87)：Java事务处理：JDBC的ACID属性与实战技巧！真有两下子！

滚雪球学Java(87)：Java事务处理：JDBC的ACID属性与实战技巧！真有两下子！

咦咦咦，各位小可爱，我是你们的好伙伴——bug菌，今天又来给大家普及Java SE啦，别躲起来啊，听我讲干货还不快点赞，赞多了我就有动力讲得更嗨啦！所以呀，养成先点赞后阅读的好习惯，别被干货淹没了哦~ 🏆本文收录于「滚雪球学Java」专栏，专业攻坚指数级提升，助你一臂之力，带你早日登顶🚀，欢迎大家关注&&收藏！持续更新中，up！up！up！！ 环境说明：Windows 10
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2