canvas教程

前奏:自定义View(一)onDraw()中一些常用的属性和方法总结

字号+ 作者:H5之家 来源:H5之家 2017-08-31 11:08 我要评论( )

相信大多数Android攻城狮都写过自定义控件,今天总结了一些在onDraw()方法中经常使用到的一些方法,一是加深记忆,二是方便以后查询。因为打算写几篇自定义控件

相信大多数Android攻城狮都写过自定义控件,今天总结了一些在onDraw()方法中经常使用到的一些方法,一是加深记忆,二是方便以后查询。因为打算写几篇自定义控件方面的博文,就从最基础的入手吧。各位看官,如果文章中有错误的地方,还请指正!在此谢过!

画笔(Paint): set(Paint) 将一个画笔的属性赋给当前画笔 setStyle(Style) Paint.Style.FILL 内部填充 Paint.Style.STROKE 内部为空 设置画笔Style setColor(int) 画笔颜色 setAlpha(int) 画笔透明度 0-255(注意要先设置颜色再设置透明度,否则透明度不起作用,具体啥原因我也母鸡啦) setStrokeWidth(float) 画笔宽度 即所画线的粗细 setTextSize() 画笔字体大小 用于绘制文本时 setAntiAlias(boolean) 是否消除锯齿 true为消除 false为不消除 reset() 重置画笔所有属性 setARGB() 同setColor() 参数为ARGB四个参数 内部调用了setColor()方法 setShader(Shader) 设置画笔颜色渐变 可以用paint的shader渲染,它有5个子类 BitmapShader 位图 LinearGradient 线性渐变 RadialGradient 光束渐变 SweepGradient 梯度渐变 ComposeShader 混合渐变 measureText(String) 用于测量所画文本的宽度 画布(Canvas): Rect和RectF

RectF类:

注解解释为 矩形的4个坐标。矩形由它的四个边的坐标表示(左、上、右、下)。通俗来讲就是放置控件的一片矩形区域。 RectF有四个构造函数: RectF()无参 RectF(float left,float top,float right,float bottom) 内部参数即 左上、右下 两个点的位置 RectF(RectF r) 根据指定的RectF对象来构造一个RectF对象 RectF(Rect r) 根据给定的Rect对象来构造一个RectF对象

Rect类:

注解解释和RectF基本一致,Rect的参数为int类型,而RectF的参数类型为float类型,所以,RectF的精度更高一些。 但是他们都是通过四个坐标参数来确定一个矩形的区域。 Rect有三个构造函数: Rect() 无参 Rect(float left,float top,float right,float bottom) 内部参数 即 左上、右下 两个点的位置 Rect(Rect r) 根据指定的RectF对象来构造一个RectF对象

画布方法:

canvas.save() 保存当前画布 canvas.translate(float, float) 将坐标轴原点移动到当前点 canvas.rotate(float) 旋转画布 (负数为顺时针旋转 正数为逆时针) 画文本 canvas.drawText(String, int, int, float, float, Paine) 参数(所画文本内容, 文本的起始位置, 文本结束位置, 文本X轴位置, 文本Y轴位置, 画笔) canvas.drawText(String, float, float, Paint) 此方法不会截取文本 参数(1:所画文本 2:文本X轴位置 3:文本Y轴位置 4:画笔) canvas.drawText(CharSequence, int, int, float, float, Paint) 此方法除了第一个参数与第一种方法不同外没有区别,其内部调用了第一种方法或者native方法 canvas.drawText(char[], int, int, float, float, Paint) 此方法和第三个方法意义差不多,不再赘述 画扇形或者弧 canvas.drawArc(RectF, float, float, boolean, Paint) 参数(绘制的矩形区域, 起始角度, 扇形或弧度的角度, 是否闭合, 画笔) 是否闭合为true时画的为扇形 false为一段弧 还需要注意的是画弧的时候如果画笔的setStyle()为Paint.Style.FILL画出来的将会是一个线段和一个弧拼接的形状,因为画笔将其内部填充满了。 所以画弧的时候setStyle一定要是Paint.Style.STROKE。 画圆 canvas.drawCircle(float, float, float, Paint) 参数(圆心X坐标, 圆心Y坐标, 圆的半径, 画笔) 画圆只有这一个方法 画椭圆 canvas.drawOval(float left, float top, float right, float bottom, @NonNull Paint paint) 参数(左, 上, 右, 下, 画笔) 系统会默认画一个填充满这个矩形区域的椭圆 canvas.drawOval(@NonNull RectF oval, @NonNull Paint paint) 同上边方法,内部调用了上边方法,参数分别在oval中得到 画线 canvas.drawLine(float startX, float startY, float stopX, float stopY, @NonNull Paint paint) 参数(起点X坐标, 起点Y坐标, 终点X坐标, 终点Y坐标, 画笔) 画图形

Path类

注解解释 这个类封装了由直线段、二次曲线和三次曲线组成的复合(多轮廓)几何路径,可以使用canvas.drawPath(path, paint)方法将它们画出来 Path就是在内部封装一些绘制操作,画线或者贝塞尔曲线(二阶或三阶) path.moveTo(float x, float y) 将起点设置为 (x, y) path.lineTo(float x, float y) 画线到(x, y)坐标, 如果没有调用moveTo(x, y),则起点将自动设置为(0,0)。 path.quadTo(float x1, float y1, float x2, float y2) 二阶贝塞尔曲线,控制点(x1,y1),终点(x2,y2)。如果没有调用moveTo(x, y),则起点将自动设置为(0,0)。 path.cubicTo(float x1, float y1, float x2, float y2, float x3, float y3) 三阶贝塞尔曲线,控制点1(x1,y1),控制点2(x2,y2),终点(x3,y3)。如果没有调用moveTo(x, y),则起点将自动设置为(0,0)。 path.close() 自动闭合图形。比如你已经画了两条线段,然后再调用此方法时 图形会自动形成一个闭合的区域,即画出了第三条线,形成一个三角形。

画n边形或贝塞尔

canvas.drawPath(path, paint) 画出图形,没什么好说的 画点 canvas.drawPoint(float x, float y, @NonNull Paint paint) 在(x, y)坐标上画点 paint为画笔 canvas.drawPoints(@NonNull float[] pts, @NonNull Paint paint) 画多个点 将数组中的值分成两个一组。即0位和1位为一组,2位和3位一组,依次类推,一组为一个坐标点。在这些坐标上画点 画位图 canvas.drawBitmap(@NonNull Bitmap bitmap, float left, float top, @Nullable Paint paint) 参数(要画的Bitmap对象, 位图左侧位置, 位图顶部位置, 画笔<可为空>) 选取一个点开始画图 canvas.drawBitmap(@NonNull Bitmap bitmap, @Nullable Rect src, @NonNull RectF dst, @Nullable Paint paint) 参数(要画的Bitmap对象, 位图的子集<可为空>, 位图填充区域<位图将被缩放/转换成合适的矩形>, 画笔<可为空>) drawBitmap(@NonNull Bitmap bitmap, @Nullable Rect src, @NonNull Rect dst, @Nullable Paint paint) 同上

如果上边有什么错误的地方希望能够指正,共同进步^_^

转载请注明出处

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 属性、定义及方法(学习笔记)

    属性、定义及方法(学习笔记)

    2017-08-28 14:03

  • HTML canvas fillStyle 属性

    HTML canvas fillStyle 属性

    2017-08-24 14:04

  • 在IE下动态创建canvas使用excanvas时失效解决方法

    在IE下动态创建canvas使用excanvas时失效解决方法

    2017-08-22 15:04

  • touchweb手机网站图片加载方法(canvas加载和延迟加载)

    touchweb手机网站图片加载方法(canvas加载和延迟加载)

    2017-08-22 15:04

网友点评