Android学习教程之2D绘图基础及绘制太极图

前言

Android是通过graphics类来显示2D图形的。其中graphics中包括了Canvas、Paint、Color、Bitmap等类。graphics具有绘制点、线、颜色、2D几何图形、图像处理等功能。其中Color和Bitmap是很常用的类,本文主要要讲的是Canvas和Paint。顾名思义就是画布和画笔。

Canvas类

Canvas即画布,我们需要做的就是使用之前设置好的Paint来绘制图形。系统通过 Canvas 为我们提供了一些基础的绘图 API :  

1、canvas.drawPoint(float x, float y, @NonNull Paint paint);

作用:绘制点。

参数:绘制点的 x 坐标,y 坐标,画笔参数

2、canvas.drawLine(float startX, float startY, float stopX, float stopY, @NonNull Paint paint);

作用:绘制线。

参数:起点的 x 坐标,起点 y 坐标,终点 x 坐标,终点 y 坐标,画笔

3、canvas.drawRect(@NonNull RectF rect, @NonNull Paint paint);

作用:绘制矩形。

参数:矩形参数,画笔参数

矩形参数构造方法:如下代码,分别为矩形的上下左右的坐标

public RectF(float left, float top, float right, float bottom) {}

4、canvas.drawVertices();

作用:绘制多边形。

参数:

5、canvas.drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, @NonNull Paint paint);

作用:绘制弧线。

参数:左端,上端,右端,底部,开始的角度,扫过的角度,圆弧的两段是否与圆心连线,画笔参数

6、canvas.drawCircle(float cx, float cy, float radius, @NonNull Paint paint);

作用:绘制圆。

参数:圆心 x 坐标,圆心 y 坐标,半径,画笔参数

7、canvas.drawText();

作用:绘制文字

参数:文字左下角 x 坐标,文字左下角 y 坐标,

8、canvas.drawOval(float left, float top, float right, float bottom, @NonNull Paint paint);

作用:绘制椭圆

参数:左端,上端,右端,下端,画笔参数

9、canvas.drawRoundRect(float left, float top, float right, float bottom, float rx, float ry,@NonNull Paint paint);

作用:绘制圆角矩形

参数:左端,上端,右端,下端,x轴上的圆角半径,y 轴上的圆角半径,画笔参数

系统画笔工具所提供的 API :

1、mPaint.setAntiAlias();

设置反锯齿

参数:true,false

2、mPaint.setColor();

设置画笔颜色

参数:颜色值

3、mPaint.setARGB();

设置画笔的 A,R,G,B

参数:A,R,G,B

4、mPaint.setAlpha();

设置画笔的透明度

参数:取值范围在 0 - 255 之间

5、mPaint.setTextSize();

设置画笔文字的大小

参数:必须大于 0

6、mPaint.setStyle();

设置画笔的风格(填充和描边)

参数:Paint.Style.FILL(填充),Paint.Style.STROKE(描边),Paint.Style.FILL_AND_STROKE(填充和描边)

7、mPaint.setStrokeWidth();

设置画笔描边时的宽度

参数:浮点型

Paint类

和日常绘图一样,要绘制图形,首先得选择合适的画笔。那么同理android中绘图首先得调整画笔,按照自己的需要设置画笔的相关属性,系统给我提供的常用API如下:

  •   setColor(); //设置画笔的颜色
  •   setAntiAlias(); //设置画笔的锯齿效果
  •   setARGB(); //设置画笔的A、R、G、B值
  •   setAlpha(); //设置画笔的Alpha值
  •   setTextSize(); //设置字体的尺寸
  •   setStyle(); //设置画笔的风格(空心或实心)
  •   setStrokeWidth(); //设置空心边框的宽度
  •   getColor(); //获取画笔的颜色

接下来我将通过绘制太极图来学习Android绘图机制。

先看看太极图:

现在就要开始一步一步的将他画出来, 我们可以借鉴图层的概念。首先绘制最底部的图层,为了方便我们将其左,右两边分别设置白色和黑色:

          

图中(x,y)是圆心坐标。这里我设置的x=getWidth() / 2;y=getHeight() / 2;半径r=getHeight() / 2;

现在我们就来看看代码,在定义View的OnDraw(Canvas canvas)方法中:

//绘制最外层大圆
 mPaint.setColor(Color.BLACK);//设置画笔颜色为黑色
 mPaint.setStyle(Paint.Style.FILL_AND_STROKE);//设置画笔style实心
 RectF rect= new RectF(getWidth() / 2 - getHeight() / 2,
 0, getWidth() / 2 + getHeight() / 2, getHeight());//圆弧的外接矩形
 canvas.drawArc(rect, 270, 180, false, mPaint);
 mPaint.setColor(Color.WHITE);//设置画笔颜色为白色
 canvas.drawArc(rect, 90, 180, false, mPaint);

代码中rect即圆的外接四边形,其构造函数RectF(float left, float top, float right, float bottom)的四个参数分别对应四边形最左边的x坐标值;左上边的y坐标值;最右边的x坐标值;最下边的y坐标值。可以看出代码中:

 left=getWidth() / 2 - getHeight() / 2;
 top=0;
 right=getWidth() / 2 + getHeight() / 2;
 bottom=getHeight(); 

四个值确定了圆的外接四边形。

canvas.drawArc(rect, 90, 180, false, mPaint);第一个参数即是我们上边确定的区域,第二个参数是开始绘制的角度(90度,x轴方向顺时针旋转),第三个参数扫描的度数,第四个参数设置好的画笔Paint。

接下来我们要着手绘制中间图层,中间图层可以看做是两个上下外切的半圆,上边白色右半圆,下边黑色左半圆:

同理,我们应该也是先确定外接四边形的区域,然后在画圆弧这里就不再详述。

//绘制中间层上边圆
 mPaint.setColor(Color.BLACK);
 rect= new RectF(getWidth()/2-getHeight()/4,0,getWidth() / 2 + getHeight() / 4, getHeight() /2);
 canvas.drawArc(rect, 90, 180, false, mPaint);
 //绘制中间层下边圆
 mPaint.setColor(Color.WHITE);
 rect= new RectF(getWidth()/2-getHeight() / 4, getHeight() / 2, getWidth() / 2 + getHeight() / 4, getHeight());
 canvas.drawArc(rect, 270, 180, false, mPaint);

最后,最上边图层上下两个小圆

//绘制最上层白色小圆
 mPaint.setColor(Color.WHITE);
 canvas.drawCircle(getWidth() / 2, getHeight() / 4, getHeight() / 10, mPaint);
 //绘制最上层黑色小圆
 mPaint.setColor(Color.BLACK);
 mPaint.setStyle(Paint.Style.FILL);
 canvas.drawCircle(getWidth() / 2, getHeight() * 3 / 4, getHeight() / 10, mPaint);

canvas.drawCircle是用来画圆的,第一个参数是圆心x坐标值,第二个参数是y坐标值,第三个坐标是圆的半径,第四个是设置的画笔。

到此就画出了一个太极图。

附上自定义View的代码 :

package com.chuck.mobile.changecountview.widget;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

/**
 * 项目名称:changecountview
 * 类描述:
 * 创建人:Administrator
 * 创建时间:2015/12/11 16:37
 * 修改人:Administrator
 * 修改时间:2015/12/11 16:37
 * 修改备注:
 */
public class CustomeView extends View{
 private Paint mPaint=new Paint();
 private Path path=new Path();
 private float degress=90;
 public CustomeView(Context context) {
 super(context);
 }

 public CustomeView(Context context, AttributeSet attrs) {
 super(context, attrs);
 }

 public CustomeView(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 }

 @Override
 protected void onDraw(Canvas canvas) {
 //绘制最外层大圆
 mPaint.setColor(Color.BLACK);//设置画笔颜色为黑色
 mPaint.setStyle(Paint.Style.FILL_AND_STROKE);//设置画笔style实心
 RectF rect= new RectF(getWidth() / 2 - getHeight() / 2,
 0, getWidth() / 2 + getHeight() / 2, getHeight());//圆弧的外接矩形
 canvas.drawArc(rect, 270, 180, false, mPaint);
 mPaint.setColor(Color.WHITE);//设置画笔颜色为白色
 canvas.drawArc(rect, 90, 180, false, mPaint);
 //绘制中间层上边圆
 mPaint.setColor(Color.BLACK);
 rect= new RectF(getWidth()/2-getHeight()/4,0,getWidth() / 2 + getHeight() / 4, getHeight() /2);
 canvas.drawArc(rect, 90, 180, false, mPaint);
 //绘制中间层下边圆
 mPaint.setColor(Color.WHITE);
 rect= new RectF(getWidth()/2-getHeight() / 4, getHeight() / 2, getWidth() / 2 + getHeight() / 4, getHeight());
 canvas.drawArc(rect, 270, 180, false, mPaint);
 //绘制最上层白色小圆
 mPaint.setColor(Color.WHITE);
 canvas.drawCircle(getWidth() / 2, getHeight() / 4, getHeight() / 10, mPaint);
 //绘制最上层黑色小圆
 mPaint.setColor(Color.BLACK);
 mPaint.setStyle(Paint.Style.FILL);
 canvas.drawCircle(getWidth() / 2, getHeight() * 3 / 4, getHeight() / 10, mPaint);
 }
}

然后在布局文件中使用自定义View

<com.chuck.mobile.changecountview.widget.CustomeView
 android:layout_width="match_parent"
 android:layout_height="250dp"
 android:background="@color/gray"/>

如果想让这个太极图转起来,方法有很多,可以使用动画也可以通过旋转画布的方式实现。我自己使用了通过线程在旋转画布的方法。大家掌握了Android 2D绘图技巧就可以绘制自己感兴趣的图案。

总结

以上就是这篇文章的全部内容了,希望本文的内容对各位Android开发者们能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • Android自定义View绘图实现拖影动画

    前几天在"Android绘图之渐隐动画"一文中通过画线实现了渐隐动画,但里面有个问题,画笔较粗(大于1)时线段之间会有裂隙,我又改进了一下.这次效果好多了. 先看效果吧: 然后我们来说说基本的做法:  •根据画笔宽度,计算每一条线段两个顶点对应的四个点,四点连线,包围线段,形成一个路径.  •后一条线段的路径的前两个点,取(等于)前一条线段的后两点,这样就衔接起来了. 把Path的Style修改为FILL,效果是这样的: 可以看到一个个四边形,连成了路径. 好啦,现在说说怎样根据两点计

  • Android UI效果之绘图篇(二)

    一.Canvas Canvas中的方法很多,这里我们只挑常用的进行讲解说明 Canvas可以绘制的对象有: 弧线(arcs) canvas. 填充颜色(argb和color) Bitmap 圆(circle和oval) 点(point) 线(line) 矩形(Rect) 图片(Picture) 圆角矩形 (RoundRect) 文本(text) 顶点(Vertices) 路径(path) 绘制弧形 /** * 绘制弧形 * @param oval 绘制区域 * @param startAngle

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

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

  • android图像绘制(七)ClipRect局部绘图/切割原图绘制总结

    杂语:看了很多程序猿都有写博客的习惯,看来我也得练练,不管写的好不好了,学到点什么体会就写写吧. 内容解说:这几天开始学游戏地图制作,今天小小的总结一下Canvas的clipRect()接口的使用. 1)选取要在画布上绘制(刷新)的区域,如图以(x, y)为起点坐标.宽w.高h的区域 2)选择要绘制的图片,不一定是刚好宽高为(w,h),大图就需要切割了(本例子绘制绿色区域) 3)将图片绘制到画布上,使得绿色区域与白色方块重合 4)最后效果图 代码解说: 复制代码 代码如下: canvas.sav

  • Android编程之OpenGL绘图技巧总结

    本文实例讲述了Android编程之OpenGL绘图技巧.分享给大家供大家参考,具体如下: 很久不用OpenGL ES绘图,怕自己忘记了,于是重新复习一遍,顺便原理性的东西总结如下: 1. Android 3D坐标系统 如图: Android的三维坐标系统中: 坐标原点位于中央, X轴从左向右延伸,原点左边的值为负数,右边为正数: Y轴从下向上延伸,原点下边的值为负数,上边为正数: Z轴屏幕里面向外面延伸,屏幕里面为负数,外面为正数. 2. 开发工具(OpenGL和OpenGL ES)介绍 Ope

  • Android 通过onDraw实现在View中绘图操作的示例

    Android绘图操作,通过继承View实现,在onDraw函数中实现绘图.下面是一个简单的例子: 复制代码 代码如下: public class AndroidTest extends Activity {    /** Called when the activity is first created. */    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(save

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

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

  • Android自定义View绘图实现渐隐动画

    实现了一个有趣的小东西:使用自定义View绘图,一边画线,画出的线条渐渐变淡,直到消失.效果如下图所示: 用属性动画或者渐变填充(Shader)可以做到一笔一笔的变化,但要想一笔渐变(手指不抬起边画边渐隐),没在Android中找到现成的API可用.所以,自己做了一个. 基本的想法是这样的: •在View的onTouchEvent中记录触摸点,生成一条一条的线LineElement,放在一个List中.给每个LineElement配置一个Paint实例. •在onDraw中绘制线段. •变换Li

  • Android绘图常用方法汇总

    Android绘图常用方法有哪些,下面一一为大家列举: 1.有关画笔(Paint)的方法 Paint mPaint= new Paint(); mPaint.setAntiAlias(true); // 消除锯齿 mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度 mPaint.setStrokeCap(Paint.Cap.ROUND); // 定义线段断点形状为圆头 mPaint.setAntiAlias(true); // 消除锯齿 mPaint.

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

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

随机推荐