Android UI效果之绘图篇(二)

一、Canvas
Canvas中的方法很多,这里我们只挑常用的进行讲解说明
Canvas可以绘制的对象有:

弧线(arcs) canvas. 填充颜色(argb和color) Bitmap 圆(circle和oval) 点(point) 线(line) 矩形(Rect) 图片(Picture) 圆角矩形 (RoundRect) 文本(text) 顶点(Vertices) 路径(path)

绘制弧形

/** * 绘制弧形 * @param oval 绘制区域 * @param startAngle 开始绘制的角度 * @param sweepAngle 结束绘制的角度 * @param useCenter 是否使用中心 * @param paint 画笔 */ public void drawArc(RectF oval, float startAngle, float sweepAngle,boolean useCenter, Paint paint)

其中前三个参数都比较好理解,关键是第三个参数useCenter,看张图你就明白了

可以发现当useCenter=true时,弧形的区域是开始角度的点和结束角度的点和中心点连接起来的区域;而useCenter=false时,弧形区域是开始角度的点和结束角度的点直接连接起来的区域。

绘制路径

mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeWidth(3); Path path = new Path(); path.moveTo(5, 10); path.lineTo(120, 30); path.lineTo(44, 66); path.lineTo(77, 231); canvas.drawPath(path, mPaint);

绘制路径比较简单,依次添加相应的坐标点即可,注意设置画笔的抗锯齿和Style即可。
- 绘制文字路径

mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeWidth(3); Path path = new Path(); path.moveTo(50, 50); path.lineTo(200, 250); path.lineTo(300, 450); path.lineTo(300, 650); mPaint.setTextSize(46); canvas.drawTextOnPath("Hi_xiaoyu_bolg_in_android", path, 0, 0, mPaint);

这个和绘制路径一样,注意设置大小,画笔粗细即可。

/** * 画圆 * @param cx 圆心X坐标 * @param cy 圆心Y坐标 * @param radius 圆的半径 * @param paint */ public void drawCircle(float cx, float cy, float radius, Paint paint) { } // 画圆 canvas.drawCircle(50, 50, 50, mPaint); RectF r = new RectF(150, 0, 270, 110); // 画矩形 canvas.drawRect(r, mPaint); RectF oval = new RectF(0, 120, 50, 270); // 画椭圆 canvas.drawOval(oval, mPaint); RectF rect = new RectF(100, 120, 170, 200); // 画圆角矩形 canvas.drawRoundRect(rect, 30, 20, mPaint); // 画线 canvas.drawLine(200, 120, 300, 300, mPaint);

其他的drawXxx方法这里就不再赘述,大家可以一一去尝试。
这里再来看下canvas中几个比较重要的方法:

canvas.save(); canvas.restore(); canvas.translate(dx, dy); canvas.rotate(degrees); canvas.saveLayer(bounds, paint, saveFlags);

save():把当前的绘制的图像保存起来,让后续的操作相当于是在一个新的图层上的操作。
restore():将sava()之前的图层和save之后的图层进行合并操作
translate():画布平移
rotate():画布旋转
大家可能会有疑问,既然我们可以利用坐标系来定位画布中的所有坐标点,为什么还要画布平移和画布旋转的api呢?现在假设有这样一个需求,需要绘制一个仪表盘,而绘制仪表盘的刻度我们可以利用三角函数sin cos 来计算出相应的偏移角度,当然这对于数学学霸来说很easy,一般人而言就需要把三角函数的公式翻个遍了,所以谷歌工程师,为我们实现平移和旋转的api,遇到类似于仪表盘的效果是,只需要旋转当前画布就能实现相应的效果,为我们节省了计算量和工作量。

paint.setColor(0xff00ccff); paint.setAntiAlias(true); paint.setStyle(Style.STROKE); canvas.translate(canvas.getWidth() / 2, 200); // 将位置移动画纸的坐标点,不用每次都从坐标原点计算 canvas.drawCircle(0, 0, 100, paint); Paint tmpPaint = new Paint(paint); tmpPaint.setStrokeWidth(1); float y = 100; int count = 60; // 总刻度数 for (int i = 0; i < count; i++) { if (i % 5 == 0) { canvas.drawLine(0f, y, 0, y + 12f, paint); canvas.drawText(String.valueOf(i / 5 + 1), -4f, y + 25f, tmpPaint); } else { canvas.drawLine(0f, y, 0f, y + 5f, tmpPaint); } canvas.rotate(360 / count, 0f, 0f); // 旋转画纸 } // 绘制指针 paint.setStrokeWidth(2); canvas.drawLine(0, 10, 0, -65, paint); paint.setStrokeWidth(4); canvas.drawLine(0, 10, 20, -35, paint);

以上就是Android开发中的UI效果设计模块的第二部分内容,之后还会继续更新,希望对大家的学习有所帮助。

时间: 2024-10-28 23:21:41

Android UI效果之绘图篇(二)的相关文章

Android UI效果之绘图篇(三)_Android

一. PorterDuffXfermode PorterDuffXfermode类似于数据集合里面的交集并集概念,只是数据里面取的是两个集合,而我们这里取的是两个图形之间的交集并集,我们先来看一张Android API Demo里面一张金典的图 图中的Src和Dst相当于是数学中的两个集合,而在我们的代码中我们可以这样来操作这两个集合 canvas.drawSrc(); paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.XXX));

Android UI效果之绘图篇(一)_Android

最近准备整理一套关于UI效果的文章,算是对这段时间的一个总结,主要讲Android开发中的UI效果设计模块.初步分为一下几个篇幅: Android XML绘图(Shape.Layer.Selector) Android Canvas绘图(canvas.point.porterDuffXfermode.shader) Android 动画详解 Android 自定义控件 今天就当开胃菜,先讲讲最简单的xml绘图,相信这个大家都用的比较熟,这里就当给大家做一个小文档,当那个参数配置忘了,便于查阅 一

Android UI效果之绘图篇(四)_Android

上一篇博文说到了Shader的五个子类 - BitmapShader - LinearGradient - RadialGradient - SweepGradient - ComposeShader 其中BitmapShader和LinearGradient已经做了说明,今天就把剩余的三个Shader补充一下 3. RadialGradient 先看下构造方法 /** @param centerX 中心X坐标 @param centerY 中心Y坐标 @param radius 半径 @par

Android UI效果之绘图篇(一)

最近准备整理一套关于UI效果的文章,算是对这段时间的一个总结,主要讲Android开发中的UI效果设计模块.初步分为一下几个篇幅: Android XML绘图(Shape.Layer.Selector) Android Canvas绘图(canvas.point.porterDuffXfermode.shader) Android 动画详解 Android 自定义控件 今天就当开胃菜,先讲讲最简单的xml绘图,相信这个大家都用的比较熟,这里就当给大家做一个小文档,当那个参数配置忘了,便于查阅 一

Android UI效果之绘图篇(三)

一. PorterDuffXfermode PorterDuffXfermode类似于数据集合里面的交集并集概念,只是数据里面取的是两个集合,而我们这里取的是两个图形之间的交集并集,我们先来看一张Android API Demo里面一张金典的图 图中的Src和Dst相当于是数学中的两个集合,而在我们的代码中我们可以这样来操作这两个集合 canvas.drawSrc(); paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.XXX));

Android UI效果之绘图篇(四)

上一篇博文说到了Shader的五个子类 - BitmapShader - LinearGradient - RadialGradient - SweepGradient - ComposeShader 其中BitmapShader和LinearGradient已经做了说明,今天就把剩余的三个Shader补充一下 3. RadialGradient 先看下构造方法 /** @param centerX 中心X坐标 @param centerY 中心Y坐标 @param radius 半径 @par

Android UI开发第二十七篇——实现左右划出菜单

http://blog.csdn.net/xyz_lmn/article/details/8635967

Android UI开发专题(二) 之绘图基础

在Android UI开发专题(一) 之界面设计中我们介绍了有关Android平台资源使用以及Bitmap相关类的操作,接下来将会以实例的方式给大家演示各种类的用处以及注意点.今天我们继续了解android.graphics包中比较重要的绘图类. 一. android.graphics.Matrix 有关图形的变换.缩放等相关操作常用的方法有: void reset() // 重置一个matrix对象. void set(Matrix src) //复制一个源矩阵,和本类的构造方法 Matrix

Android滑动效果入门篇(二) Gallery

Gallery 是Android官方提供的一个View容器类,继承于AbsSpinner类,用于实现页面滑动效果. 从上面的继承关系可 以看出,AbsSpinner类继承自AdapterView,因此我们可以自定义实现Adapter,来填充Gallery容器的数据. 本示 例通过自己实现一个Adapter,来填充Gallery容器的图片数据,首先看效果: Activity import android.app.Activity; import android.os.Bundle; import