Android的Paint和Canvas的使用总结

本文主要是介绍Android的Paint和Canvas的使用总结，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言：

在自定义控件时，我们有时可能会用到Paint和Canvas这两个类，

Paint相当于我们在画画时的画笔，Canvs相当于我们在画画时的画布，

下面来简单讲一下这两个类常见的一些用法

Paint的使用总结：

setAlpha(int a):

设置画笔的透明度，这样画笔所画的位置就会呈一定的透明度

setAntiAlias(boolean aa)：

设置 true 则表示其绘制的边缘会做平滑处理，比如，我们一个椭圆，

那么将这个椭圆放大之后，其边缘就不会出现锯齿的形状，相对来说，

过度更自然一些。若设置为false，则放大后，可以较为清晰地看到其

边缘会出现锯齿的形状。

setColor(int color)：

设置画笔颜色

setStrokeWidth(float width)：

设置画笔的大小

setStyle(Paint.Style style)：

设置画笔所画的图形是空心还是实心

setTextSize(float textSize)：

设置画笔所画的字体大小

Canvas的使用总结：

绘制图形

drawLine():表示绘制一条直线

/**
 * 画直线
 * float startX：表示直线起始坐标的x坐标值
 * float startY：表示直线起始坐标的y坐标值
 * float stopX: 表示直线结束坐标的x坐标值
 * float stopY：表示直线结束坐标的y坐标值
 * Paint paint：表示我们所用的画笔
 */
canvas.drawLine(0,getHeight()/2,getWidth(),getHeight()/2,paint);

drawArc():表示绘制一个弧形

/**
 * 画弧形
 * float left：表示弧形呈360度显示时，对应的最左边那个端点所对应的 x 坐标
 * float top：表示弧形呈360度显示时，对应的最上边那个端点所对应的 y 坐标
 * float right：表示弧形呈360度显示时，对应的最右边那个端点所对应的 x 坐标
 * float bottom：表示弧形呈360度显示时，对应的最下边那个端点所对应的 y 坐标
 * float startAngle：
 * 表示与水平方向呈多少角度开始绘制弧形，顺时针的角度记为正
 * float sweepAngle：
 * 表示绘制弧形时所对应的扇形角度，数值为正，则表示从顺时针方向开始绘制
 * boolean useCenter：
 * true表示扇形需要中间那一部分三角形，
 * false表示显示的是：从扇形中出去中间那个三角形之后的一小部分的弧形
 * Paint paint：表示我们所用的画笔
 */
canvas.drawArc(200,200,500,500,0,-120,true,paint);

drawCircle():表示绘制一个圆

/**
 * float cx:表示圆心的x坐标
 * float cy:表示圆心的y坐标
 * float radius:表示圆的半径
 * Paint paint:表示我们所用的画笔
 */
canvas.drawCircle(50,50,50,paint);

drawOval():表示绘制一个椭圆

/**
 * float left：表示椭圆最左边那个端点所对应的x坐标
 * float top：表示椭圆最上边那个端点所对应的y坐标
 * float right：表示椭圆最右边那个端点所对应的x坐标
 * float bottom：表示椭圆最下边那个端点所对应的y坐标
 * Paint paint：表示我们所用的画笔
 */
canvas.drawOval(100,100,300,500,paint);

drawRect():表示绘制矩形

/**
 * float left:表示矩形左边这条线所对应的 x 坐标
 * float top:表示矩形上边这条线所对应的 y 坐标
 * float right:表示矩形右边这条线所对应的 x 坐标
 * float bottom:表示矩形底边这条线所对应的 y 坐标(单位都是px)
 * Paint paint:表示我们所用的画笔
 */
canvas.drawRect(50,50,150,150,paint);

drawBitmap():表示绘制一张位图的副本

/**
 * Bitmap bitmap:表示我们想要绘制的位图是什么样
 * float left:表示位图绘制的最左边与本身控件左边的距离
 * float top:表示位图绘制的最上边与本身控件上边的距离
 * Paint paint:表示我们所用的画笔
 */
//这里载图时，省略了压缩的过程，可自行去优化图片的加载
//Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.raw.default_head);
//canvas.drawBitmap(bitmap,100,100,paint);

drawText():表示绘制文本

/**
 * String text:
 * float x：表示文本绘制的起始x坐标
 * float y：表示文本绘制的Baseline的y坐标
 * Paint paint：表示我们所用的画笔
 *
 * 注：这里指定的y坐标是Baseline的y坐标，
 * 并不是文本的底边的y坐标，通常Baseline的y坐标位于文本的中间偏下的位置
 * 具体细节可查看博客：
 *
 */
canvas.drawText("Text",getWidth()/2,getHeight()/2,paint);

变换画布：

rotate():表示旋转画布至一定的角度

/**
 * float degrees:表示旋转的角度，顺时针为正，逆时针为负
 * float px:表示指定旋转参考坐标的x坐标
 * float py:表示指定旋转参考坐标的y坐标
 *
 * 注：若不指定px，py这两个参数，
 * 则其默认是以控件的左上角作为参考坐标进行旋转的
 */
canvas.rotate(90,getWidth()/2,getHeight()/2);

translate()：表示将画布进行一定距离的平移

/**
 * float dx: x方向所偏移的距离
 * float dy：y方向所偏移的距离
 */
canvas.translate(getWidth()/2,getHeight()/2);

scale():表示将画布进行一定比例的缩放

/**
 * float sx: x方向缩放的倍数
 * float sy: y方向缩放的倍数
 * float px: 缩放参考点的x坐标
 * float py: 缩放参考点的y坐标
 *
 * 注：若不指定px，py，则其默认的参考点是以左上角(0,0)作为参考点
 *
 */
canvas.scale(2,2,0,0);

skew():表示将画布沿某个方向进行一定角度的倾斜

/**
 * 刚开始，画布是四四方方的，
 *
 * float sx:
 * 也就是说：画布的左边边缘与y轴所成的角度为0
 * 当让画布沿 x 轴进行拉伸时，画布的左边边缘就会与y轴所呈现的角度就会越来越大
 * 那么，这个角度的 tan 值就是我们第一个参数所需填写的值
 *
 * float sy:
 * 同理，画布刚开始上边边缘与 x 轴所成角度为0
 * 当让画布沿 y 轴进行拉伸时，其上边边缘与x轴的角度就越来越大
 * 那么，上边边缘与x轴所成角度的tan值就是第二个参数所需填写的值
 *
 * 总结：
 * 若之前某一点的坐标是(x,y)，则经过canvas.skew(sx,xy)变换之后，
 * 对应变换之后的坐标为(x+(sx)*y,y+(sy)*x)
 *
 */
canvas.skew(2,0);

clip....：裁剪画布

/**
 * 剪切某一块区域
 * 在这里以裁剪一个矩形为例
 */
canvas.clipRect(50,50,350,350);  //限制其之后绘制的有效区域只能在这一部分

保存及恢复画布状态：

/**
 * 保存画布
 * save()：保存当前画布的状态
 * restore()：返回到上一次保存画布状态中去
 * restoreToCount()：返回到某一指定的画布状态中去
 *
 */

save()和restore()使用示例：



/**
 * 在这里，主要是体会save和restore所起的作用：
 *
 * save:表示保存当前画布状态
 *
 * restore:表示回到save时的画布状态，
 *
 * 这样在save和restore之间所发生的变换画布的操作
 * 就不会影响到在执行restore之后所进行的操作，
 * 也就是说，此时restore恢复的画布状态就是save
 * 保存时的画布状态，我们来看一下一个示例：
 */
/**
 * 示例：
 * 用来讲述save和restore的作用
 */
/**
 * 此时画布的默认参考点是（0，0），通过save()将其保存下来了
 */
canvas.drawRect(new Rect(0,0,100,100), paint);
canvas.save();
/**
 * 此时画布的参考点是（100,100）
 * 那么，此时绘制的矩形就处于上一个矩形的右下方的位置
 */
canvas.translate(100,100);
canvas.drawRect(new Rect(0,0,100,100), paint);
/**
 * 这次将画布的状态恢复到save时的画布状态
 * 也就是参考点为（0,0）
 */
canvas.restore();
/**
 * 此时我们再进行绘制时，则是以（0,0）为起始参考点进行绘制，
 * 我们可以通过对比透明度就可以知道其与save之前绘制的矩形重叠了
 * 所以可以看出我们的推论是正确的
 */
canvas.drawRect(new Rect(0,0,100,100), paint);

restore()和restoreToCount()的区别：

/**
 * restore()和restoreToCount()的区别：
 * restore()：
 * 表示恢复到上一次save时的画布状态
 * restoreToCount()：
 * 表示恢复到某一次save时的状态，那么问题来了，
 * 某一次save，这个某一次怎么确定呢？
 * 细心观察的同学可以看到：每次save()时，
 * 其都是有返回值的，这个返回值，可用作restoreToCount()
 * 的参数，这样，就可以返回指定的save状态了
 *
 * 注：
 * 若是调用了restoreToCount()指定了某一个save，
 * 比如在如下示例中是firstSave，那么位于firstSave
 * 栈顶之上的画布状态都会被销毁，此时若试图通过
 * restoreToCount(secondSave)去恢复到secondSave时
 * 画布的状态就会报非法参数异常。
 */
/**
 * 示例：
 * 通过示例向大家解释restore()和restoreToCount()的区别
 */
canvas.drawRect(new Rect(0,0,100,100), paint);
int firstSave = canvas.save();
canvas.translate(100,100);
canvas.drawRect(new Rect(0,0,100,100), paint);
int secondSave = canvas.save();
canvas.translate(100,100);//表示在原来已移动的基础上，再进行一次移动
canvas.drawRect(new Rect(0,0,100,100), paint);
/**
 * 这里返回的是上一次save保存画布时的状态，
 * 也就是secondSave时状态，此时画布的参考点
 * 是以()作为参考点的，所以我们绘制矩形的最上角
 * 坐标为(100,100)，这个位置的矩形是绿色的
 */
canvas.restore();
paint.setColor(GREEN);
canvas.drawRect(new Rect(0,0,100,100), paint);
/**
 * 指定返回到某一次save时的画布状态，
 * 在这里我们指定其为firstSave，
 * 此时画布的状态就是以(0,0)作为参考点的，
 * 所以之后，我们绘制矩形，就可以看到黄色的
 * 矩形紧紧贴在左上角
 */
canvas.restoreToCount(firstSave);
paint.setColor(YELLOW);
canvas.drawRect(new Rect(0,0,100,100), paint);

restore()和restoreToCount()的区别：

/**
 * restore()和restoreToCount()的区别：
 * restore()：
 * 表示恢复到上一次save时的画布状态
 * restoreToCount()：
 * 表示恢复到某一次save时的状态，那么问题来了，
 * 某一次save，这个某一次怎么确定呢？
 * 细心观察的同学可以看到：每次save()时，
 * 其都是有返回值的，这个返回值，可用作restoreToCount()
 * 的参数，这样，就可以返回指定的save状态了
 *
 * 注：
 * 若是调用了restoreToCount()指定了某一个save，
 * 比如在如下示例中是firstSave，那么位于firstSave
 * 栈顶之上的画布状态都会被销毁，此时若试图通过
 * restoreToCount(secondSave)去恢复到secondSave时
 * 画布的状态就会报非法参数异常。
 */
/**
 * 示例：
 * 通过示例向大家解释restore()和restoreToCount()的区别
 */
canvas.drawRect(new Rect(0,0,100,100), paint);
int firstSave = canvas.save();
canvas.translate(100,100);
canvas.drawRect(new Rect(0,0,100,100), paint);
int secondSave = canvas.save();
canvas.translate(100,100);//表示在原来已移动的基础上，再进行一次移动
canvas.drawRect(new Rect(0,0,100,100), paint);
/**
 * 这里返回的是上一次save保存画布时的状态，
 * 也就是secondSave时状态，此时画布的参考点
 * 是以()作为参考点的，所以我们绘制矩形的最上角
 * 坐标为(100,100)，这个位置的矩形是绿色的
 */
canvas.restore();
paint.setColor(GREEN);
canvas.drawRect(new Rect(0,0,100,100), paint);
/**
 * 指定返回到某一次save时的画布状态，
 * 在这里我们指定其为firstSave，
 * 此时画布的状态就是以(0,0)作为参考点的，
 * 所以之后，我们绘制矩形，就可以看到黄色的
 * 矩形紧紧贴在左上角
 */
canvas.restoreToCount(firstSave);
paint.setColor(YELLOW);
canvas.drawRect(new Rect(0,0,100,100), paint);