AndroidUI之Paint画笔高级应用

最新推荐文章于 2021-05-30 21:27:50 发布
最新推荐文章于 2021-05-30 21:27:50 发布
阅读量590 收藏
点赞数 2
分类专栏： Android自定义View 文章标签： Paint使用 Android文本绘制基线 android线性渲染器 android位图渲染器 android组合渲染器
本文为博主原创文章，转载请注明出处。
本文链接：https://blog.csdn.net/jarchie520/article/details/109448960
版权

目录

写在前面

一、Paint基本使用

1.1、概念

1.2、常用API

二、Paint颜色相关

2.1、线性渲染

2.2、环形渲染

2.3、扫描渲染

2.4、位图渲染

2.5、组合渲染

写在前面

来一张我们家颖宝的美照，开启一天的好心情有木有？是不是赏心悦目(☆_☆)/~~

今天呢，咱们继续来看Android的高级UI，本篇主要来说一下Paint画笔的应用，通过下面的介绍，你应该能够实现上面图片中的这种效果，废话不多说了，开始吧！

一、Paint基本使用

1.1、概念

画笔，保存了绘制几何图形、文本和位图的样式和颜色信息

1.2、常用API

关于常用API这里简单列举一些常用的，具体的使用方式我这里也都给出了注释，实际上也就是掌握里面的参数具体是如何使用的，大家可以自己对照着写写感受一下：

        mPaint = new Paint(); //初始化
        mPaint.setColor(Color.RED);// 设置颜色
        mPaint.setARGB(255, 255, 255, 0); // 设置 Paint对象颜色,范围为0~255
        mPaint.setAlpha(200); // 设置alpha不透明度,范围为0~255
        mPaint.setAntiAlias(true); // 抗锯齿
        mPaint.setStyle(Paint.Style.FILL); //描边效果
        mPaint.setStrokeWidth(4);//描边宽度
        mPaint.setStrokeCap(Paint.Cap.ROUND); //圆角效果
        mPaint.setStrokeJoin(Paint.Join.MITER);//拐角风格
        mPaint.setShader(new SweepGradient(200, 200, Color.BLUE, Color.RED)); //设置环形渲染器
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DARKEN)); //设置图层混合模式
        mPaint.setColorFilter(new LightingColorFilter(0x00ffff, 0x000000)); //设置颜色过滤器
        mPaint.setFilterBitmap(true); //设置双线性过滤
        mPaint.setMaskFilter(new BlurMaskFilter(10, BlurMaskFilter.Blur.NORMAL));//设置画笔遮罩滤镜 ,传入度数和样式
        mPaint.setTextScaleX(2);// 设置文本缩放倍数
        mPaint.setTextSize(38);// 设置字体大小
        mPaint.setTextAlign(Paint.Align.LEFT);//对其方式
        mPaint.setUnderlineText(true);// 设置下划线

另外，关于文本操作的有这样几个API是需要掌握的：

String str = "Android高级开发工程师";
Rect rect = new Rect();
mPaint.getTextBounds(str, 0, str.length(), rect); //测量文本大小，将文本大小信息存放在rect中
mPaint.measureText(str); //获取文本的宽
mPaint.getFontMetrics(); //获取字体度量对象

其中，关于字体度量对象有必要单独拎出来说一说，如果你写过自定义View关于文字绘制方面的，你肯定对它不会陌生：


获取文本高度实际上是descent-ascent，即descent和ascent之间的距离。

下面我们重点针对环形渲染器、图层混合模式以及颜色过滤器来做介绍，其他的API就不细说了。

二、Paint颜色相关

首先自定义一个View把它叫做GradientLayout，然后初始化画笔，并且给画笔设置一些属性，然后我们开始使用Shader来做渲染相关的操作。

2.1、线性渲染

来，下面跟着我一起，教你画一道彩虹O(∩_∩)O，在onDraw()方法中添加如下代码：

/**
         * 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(40, 100, 540, 600, new int[]{
                Color.parseColor("#FF0000"),
                Color.parseColor("#FF7F00"),
                Color.parseColor("#FFFF00"),
                Color.parseColor("#00FF00"),
                Color.parseColor("#00FFFF"),
                Color.parseColor("#0000FF"),
                Color.parseColor("#8B00FF")}, 
                new float[]{0.f,0.16f,0.32f,0.48f,0.64f,0.8f,1},
                Shader.TileMode.CLAMP);
        mPaint.setShader(mShader);
        canvas.drawRect(50,100,1040,1100, mPaint);

这里面有两个数组，第一个是渐变的颜色数组，第二个是渐变位置数组，这二者是一一对应的关系，TileMode有多种模式，CLAMP是表示如果超出指定区域后超出部分延续设定的渐变效果继续填充，MIRROR是镜像填充，效果如下图所示：

 

2.2、环形渲染

我们修改一下onDraw()方法中的代码，根据上面的API来做一个环形渲染的案例：

/**
         * 环形渲染，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(500, 300, 250, new int[]{Color.parseColor("#8B00FF"), Color.YELLOW, Color.RED}, null, Shader.TileMode.CLAMP);
        mPaint.setShader(mShader);
        canvas.drawCircle(500, 300, 250, mPaint);

效果如下图所示：

2.3、扫描渲染

修改代码：

/**
         * 扫描渲染，SweepGradient(float cx, float cy, @ColorInt int color0,int color1)
         * cx,cy 渐变中心坐标
         * color0,color1：渐变开始结束颜色
         * colors，positions：类似LinearGradient,用于多颜色渐变,positions为null时，根据颜色线性渐变
         */
        mShader = new SweepGradient(500, 300, Color.RED, Color.GREEN);
        mPaint.setShader(mShader);
        canvas.drawCircle(500, 300, 250, mPaint);

结果如下：

2.4、位图渲染

首先我准备了一张我们家颖宝的图片，原图是这个样子的：

在代码中跑一下，先来初始化这个Bitmap：

private Bitmap mBitmap;
rivate void init() {
    mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.yingbao);
}

接下来，我们先加载原图的宽高：

/**
         * 位图渲染，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.CLAMP, Shader.TileMode.MIRROR);
        mPaint.setShader(mShader);
        canvas.drawRect(0, 0, mBitmap.getWidth(), mBitmap.getHeight(), mPaint);

结果如下图所示：

接着我们来改变一下绘制矩形的宽和高：

mShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
mPaint.setShader(mShader);
canvas.drawRect(0, 0, 500, 500, mPaint);

然后结果如下图所示：根据上面的注释也能够知道这是咋回事了，CLMP模式下是对于超出图片所能渲染的宽高之后的部分将会以最后一个像素进行拉伸，所以我们在X轴和Y轴上都进行了这种模式的设置，于是乎就有了下面的这种效果：

相应的剩下两种模式就是REPEAT就是重复模式，MIRROR是镜像模式，我们最后再修改一下代码，看一下是不是这个样子的：

mShader = new BitmapShader(mBitmap, Shader.TileMode.REPEAT, Shader.TileMode.MIRROR);
mPaint.setShader(mShader);
//canvas.drawRect(0, 0, 1080, 870, mPaint);
canvas.drawCircle(540, 435, 435, mPaint);

结果也是很好玩的：

 

2.5、组合渲染

组合渲染是将两种渲染模式进行混合使用，其中 PorterDuff.Mode是两种shader的叠加模式，这个类是一个枚举类，这里面一共定义了18种混合规则，每一种都有它自己特定的算法，后面我们会选择性的说一下它的具体使用，这里就不多说了，直接来看代码：

/**
         * 组合渲染，
         * 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, 1080, 1080, 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(540, 540, 540, mPaint);

来看一下实际的执行效果，还是挺好看的：

OK，关于Paint的内容就先说到这里，不想一次性说那么多，说多了老夫也记不住，就这么着吧，循序渐进日积月累，总会有点成效的！

各位大佬，再会！我先撤了！

一叶难遮天
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android 高级UI 画笔Paint的基本用法
安卓兼职framework和app工程师的博客
12-26 440
1.setStyle(Paint.Style style) 设置画笔样式，取值有 Paint.Style.FILL :填充内部 Paint.Style.FILL_AND_STROKE ：填充内部和描边 Paint.Style.STROKE ：仅描边 代码实例： public class PaintViewBasic extends View { private Paint mPaint; ...
Android UI设计系列之自定义DrawView组件实现数字签名效果（5）
01-20
把用户在屏幕上的手指移动轨迹显示在屏幕上，接着把在屏幕上显示的轨迹View转换成一张图片，最后把图片保存到本地或者上传到服务器… ... private Paint paint; /** * 签名画布 */ private Can
Android高级渲染,画笔渲染通过paint.setShader
01-21
1. 基础了解：    Android高级渲染,图层渲染  渲染：Shader     BitmapShader        图形渲染     LinearGradient   线性渲染     RadialGradient    环形渲染     SweepGradient   梯度渲染(扫描渲染)     ComposeShader   组合渲染     paint.setShader(bitmapShader);  效果展示,设置画笔渲染，画笔在图层上渲染，图片未摆满控件，摆放模式 1.xml布局：  2. MyView 控件代码：           * 图片平铺模式：    
android 画笔
weixin_34081595的博客
08-04 119
引用：http://www.cnblogs.com/-OYK/archive/2011/10/25/2223624.html 要绘图，首先得调整画笔，待画笔调整好之后，再将图像绘制到画布上，这样才可以显示在手机屏幕上。Android 中的画笔是 Paint类，Paint 中包含了很多方法对其属性进行设置，主要方法如下：    setAntiAlias: 设置画笔的锯齿效果。    setColo...
Android高级UI学习笔记（1.1）Paint画笔高级应用--常用api
江桓的博客
06-25 196
高级UI学习笔记（1）–画笔工具Paint 画笔工具常用api mPaint = new Paint(); //初始化 mPaint.setColor(Color.RED);// 设置颜色 mPaint.setARGB(255, 255, 255, 0); // 设置 Paint对象颜色,范围为0~255 mPaint.setAlpha(200...
Android 高级绘图
热门推荐
Vange的专栏
11-10 1万+
高级画布绘图        我们已经介绍了Canvas，在那里，已经学习了如何创建自己的View。在第7章中也使用了Canvas来为MapView标注覆盖。        画布(Canvas)是图形编程中一个很普通的概念，通常由三个基本的绘图组件组成：        Canvas  提供了绘图方法，可以向底层的位图绘制基本图形。        Paint  也称为"刷子"，P
Android Touch Circle 测试附源代码.rar
07-10
Android Touch Circle Activity触屏操作测试附源代码示例，触摸圆点： 　//此方法重画时调用 　@Override 　protected void onDraw(Canvas canvas) { 　 //canvas可以看做画板 　 super.onDraw(canvas); 　 //创建...
Android制作的简易图库相册查看程序.rar
07-10
Android制作的简易图库相册查看程序，每加载一张图片就会有一个Loading，根据当前百分比计算当前菜单的位置，大小，向右移之后，紧邻当前菜单的左侧菜单项要变大，下面要计算。 　Sample8_5_Activity father;//声明...
Android中的坐标轴的自定义控件的实现
05-25
自定义view，在其构造方法中获取设置的style，并创建不同的画笔； 2.在其onSizeChanged方法中设置view的宽高； 3.在onDraw方法中，通过Canvas和Paint，绘制x轴，绘制y轴，绘制文字，绘制折 线，绘制折线穿过的点...
RainyView-Android 自定义View之下雨动画 效果.zip
09-24
效果开始前先做个热身( ˘•灬•˘ )自己实现比较容易，但是到了要出博客整理思路，总结要点的时候就挠头，不知云所以，所以最简单的还是 Read the fucking source code如果对安卓UI有兴趣的朋友可以加我好友互相...
android 画图画笔
06-13
android 画图画笔
android实现的屏幕画笔
11-09
自己用android实现的一个屏幕画笔的简单功能，功能和PC机上用的屏幕画笔一样
Android Paint画笔使用Demo源码.rar
07-04
Android Paint画笔使用Demo源码.rar
Android 自定义Paint画笔 canvas绘图例子.rar
07-10
Android 自定义Paint画笔 canvas绘图例子，本例子中所用到的方法继承自android.view.View，是一个自定义View的范例，同时可学习画笔的定义： 　　Paint paint;//画笔 　　public MyView(Context context) {//构造器 　　 super(context); 　　 paint = new Paint();//初始化画笔 　　 paint.setColor(Color.WHITE);//设置画笔的颜色 　　 paint.setTextSize(20);//设置字体的大小 　　 paint.setAntiAlias(true);//打开抗锯齿 　　} 　　protected void onDraw(Canvas canvas) {//重写的绘制方法 　　 super.onDraw(canvas); 　　 canvas.drawColor(Color.GRAY);//绘制背景颜色 　　 canvas.drawRect(10, 10, 110, 110, paint);//绘制一个矩形 　　 canvas.drawText("此界面为自定义的View", 60, 170, paint); 　　} 　　另外的代码引用自MyView： 　　public void onCreate(Bundle savedInstanceState) {//重写的onCreate方法 　　 super.onCreate(savedInstanceState); 　　 myView = new MyView(this);//初始化自定义View 　　 this.setContentView(myView);//设置当前的用户界面 　　}
Android在画布绘制图形,Android 自定义 View 高级 - Canvas 绘制图形
weixin_42362931的博客
05-25 460
一.Canvas简介Canvas我们可以称之为画布，能够在上面绘制各种东西，是安卓平台2D图形绘制的基础，非常强大。二.Canvas的常用操作操作类型相关API备注绘制颜色drawColor, drawRGB, drawARGB使用单一颜色填充整个画布绘制基本形状drawPoint, drawPoints, drawLine, drawLines, drawRect, drawRoundRect,...
关于Android中的画笔画画
童年纸飞机的博客
02-04 350
bitmap， canvas， paint 区别， 联系， 使用关系 Canvas 对于这个类，不熟悉， 但绝对见过！而且十分令人印象深刻的是在Android 源码中， 一个举世闻名的类–View： public class View implements Drawable.Callback, KeyEvent.Callback, AccessibilityEventSource { 此处省略一万多行代码。。。。 /*直至一处举世闻名的方法*/ /** * Implemen.
android 画笔 以及画布,Android学习笔记画笔和画布
weixin_42386504的博客
05-26 211
概念画笔类:Paint用于指定颜色、透明度、笔触磅数、图形样式。画布类:Canvas用于指定背景颜色，尺寸画笔的容器。绘图的基本步骤继承View类，重写OnDraw()——>在Activity中引用案例绘制一个矩形activity_main.xmlandroid:id="@+id/framelayout"xmlns:tools="http://schemas.android.com/tool...
android 绘图软件,安卓最强大的绘图软件 妙笔生花最新评测
weixin_34094282的博客
05-30 1741
妙笔生花——绘画体验(一)看过使用教程之后，就能进入到真正的功能页面了。功能页面的首页只有一个按钮，点击页面下端的这个按钮之后，就能跳出功能强大的工具选择页面。【妙笔生花】——工具选择页OK，接下来，小编会使用妙笔生花来做一幅大作，椒友们就随着小编作画的过程，来好好的认识一下妙笔生花的强大吧。首先，点击工具右上角的图层图标，进入图层页。然后再点击，进入画笔选择页，挑选自己绘画用的画笔。不同的画笔，...
Paint画笔高级应用(仅做学习笔记,以后做扩展的时候详细写)
谢伟光的博客
11-09 382
先熟悉paint的属性: setARGB(255,255,255,0) 通过ARGB设置颜色 alpha = 200//设置不透明度,范围0-255 isAntiAlias=true//抗锯齿 style=Paint.Style.FILL//描边效果 strokeWidth=4f//描边宽度 strokeCap= Paint.Cap.ROUND//画笔结尾的时候形状这里设置圆形 ...
android studio 高级ui组件
最新发布
06-28
Android Studio高级UI组件是指在Android Studio中使用的一些高级用户界面组件，例如RecyclerView、CardView、TabLayout、NavigationView等。这些组件可以帮助开发者更快速、更方便地构建复杂的用户界面，提高应用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值