Android绘图机制(二)--2D绘图基础

原创 2016年08月29日 19:56:36

## 前言

每次在讲正事前总要啰嗦几句,其实我也不想,只是文章没得一个开头,看起来就有点不爽,所以大家见谅,不喜欢的可以直接跳过。Android的绘图功能还是十分强大的,只要你有一个敢于创新的心,就没有什么画不出来的,接下来我将,从画图时所使用的工具开始介绍,希望能够帮助到大家,我自己也能够更好的巩固这方面的知识。

绘图工具(一)–画布(canvas)

canvas类相当于一个画布,我们通常把它理解成系统提供给我们的一块内存区(但实际上它只是一套画图的API),并且提供了一套在这个区域操作的一系列方法,着些方法全是用来画图API

以下是canvas常用画图的方法:

  • drawRect(RectF rect, Paint paint) //绘制区域,参数一为RectF一个区域

  • drawPath(Path path, Paint paint) //绘制一个路径,参数一为Path路径对象

  • drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint) //贴图,参数一就是我们常规的Bitmap对象,参数二是源区域(这里是bitmap),参数三是目标区域(应该在canvas的位置和大小),参数四是Paint画刷对象,因为用到了缩放和拉伸的可能,当原始Rect不等于目标Rect时性能将会有大幅损失。

  • drawLine(float startX, float startY, float stopX, float stopY, Paintpaint) //画线,参数一起始点的x轴位置,参数二起始点的y轴位置,参数三终点的x轴水平位置,参数四y轴垂直位置,最后一个参数为Paint 画刷对象。

  • drawPoint(float x, float y, Paint paint) //画点,参数一水平x轴,参数二垂直y轴,第三个参数为Paint对象。

  • drawText(String text, float x, floa ty, Paint paint) //渲染文本,Canvas类除了上面的还可以描绘文字,参数一是String类型的文本,参数二x轴,参数三y轴,参数四是Paint对象。

  • drawOval(RectF oval, Paint paint)//画椭圆,参数一是扫描区域,参数二为paint对象;

  • drawCircle(float cx, float cy, float radius,Paint paint)// 绘制圆,参数一是中心点的x轴,参数二是中心点的y轴,参数三是半径,参数四是paint对象;

  • drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)//画弧,参数一是RectF对象,一个矩形区域椭圆形的界限用于定义在形状、大小、电弧,参数二是起始角(度)在电弧的开始,参数三扫描角(度)开始顺时针测量的,参数四是如果这是真的话,包括椭圆中心的电弧,并关闭它,如果它是假这将是一个弧线,参数五是Paint对象;

除此以外还有一些方法特别有用:

  • Canvas.save() 将之前所有已经绘制的图像保存起来,让后续的操作好像在一个新的图层中操作一样

  • Canvas.restore() 该方法可以理解为PS中的合并图层操作,作用是将save()之前后的图像进行合并

  • Canvas.translate(x,y) 该方法的意思是将坐标系的原点移动到(x,y) 处,之后所有的操作都将以(x,y)为原点进行

  • Canvas.rotate() 将坐标系选装一定的角度

绘图工具(二)–画笔(Paint)

系统通过Canvas对象来提供绘图方法,但是还缺少一个绘图的笔来完成整个绘图的操作。可以看到Canvas的很多方法的最后都需要传入一个Paint对象,由此可见Paint画笔的重要性,Paint对象在画图中主要起到对线条颜色,效果,风格的控制上。接下来是一些常用的Paint的属性和对应功能。

  • setAntiAlias(); 设置画笔的锯齿效果

  • setColor(); 设置画笔的颜色

  • setARGB(); 设置画笔的A , R , G , B值

  • setAlpha(); 设置画笔的Alpha值(透明度 取值0~255之间,越小透明度越高)

  • setTextSize(); 设置字体的尺寸(有时在绘图中也需要绘画字体)

  • setStyle(); 设置画笔的风格(空心或者实心)

  • setStrokeWidth(); 设置画笔的宽度

绘图工具(三)–路径(Path)

path类用于记录一些路径,可以当作是看不见的线,也可以用作记录手指接触屏幕滑动的路径,绘制复杂图形轮廓等等,在绘图和动画中,path类都发挥着重要的作用。

构造方法:
创建一个含有src的path对象(目前还没有用过)

    public Path(Path src) {
        long valNative = 0;
        if (src != null) {
            valNative = src.mNativePath;
            isSimplePath = src.isSimplePath;
            if (src.rects != null) {
                rects = new Region(src.rects);
            }
        }
        mNativePath = init2(valNative);
    }

接下来列举一些常用的方法

  • moveTo(float x , float y) 移动绘制起点到(x,y)的位置开始绘制

  • lineTo(float x , float y) 连接从起点到(x,y)的直线,默认起点为(0,0)

  • rMoveTo(float dx, float dy) 在上一次绘制的终点的基础上,移动dx,dy的距离得到新的起点。(这里的dx , dy为移动的距离)

  • rLineTo(float dx , float dy)在上一次绘制的基础上,移动dx , dy的连线。和lineTo()的效果一样,只是起点是上一次绘制的终点,坐标表示的是距离。

  • quadTo(float x1 , float y1 , float x2 , float y2) 根据两个点你控制,绘制贝塞尔曲线

  • cubicTo(float x1, float y1, float x2, float y2, float x3, float y3)根据三点控制,绘制贝尔塞曲线

  • arcTo(RectF oval, float startAngle, float sweepAngle)用于绘制圆弧

  • addRect(float left, float top, float right, float bottom, Direction dir)添加矩形

  • addOval(RectF oval, Direction dir) 添加一个闭环圆环路径

  • addCircle(float x, float y, float radius, Direction dir) 添加一个圆形路径

  • addRoundRect(RectF rect, float rx, float ry, Direction dir)添加一个圆角矩形路径

  • offset(float dx, float dy, Path dst) 通过dx,dy移动路径,如图dst为null则修改原路径,即src

  • reset() 清空当前路径中的设置信息

  • rewind() 清空当前path,清空所有的直线曲线,但保留其数据结构,方便重用

注:
Path.Direction 用来指定添加到path中的闭合图形的绘制方向(两个值,分别为顺时和逆时)

  • CW 表示顺时针

  • CCW表示逆时针

FillType表示填充模式:

  • FillType.WINDING 默认值,当两个图形香蕉,正常相交情况显示

  • FillType.EVEN_ODD 取path所在并不相交的区域

  • FillType.INVERSE_WINDING 取path的外部区域

  • FillType.INVERSE_EVEN_ODD 取path外部和相交区域

(INVERSE就是取反的意思)下面是几个填充结果

FillType.WINDING
这里写图片描述

FillType.EVEN_ODD
这里写图片描述

FillType.INVERSE_WINDING
这里写图片描述

INVERSE_EVEN_ODD
这里写图片描述

接下来通过一个实例来巩固一下这个绘制的内容。我们要做的是一个时钟的图形,如下图:

这里写图片描述

首先分析这个图形所需要绘制的元素有:表盘,刻度,指针,数字

首先我们选择绘制表盘,表盘就是一个大圆盘,直接调用canvas.drawCircle()方法绘制一个圆就行了,关键是定圆心和半径,这里直接确定在屏幕中间了

        private Paint paintCircle;
        mWidth = getMeasuredWidth();
        mHeight = getMeasuredHeight();//获取屏幕宽高
        paintCircle = new Paint();//初始化画笔
        paintCircle.setColor(Color.BLACK);//设置颜色
        paintCircle.setAntiAlias(true);
        paintCircle.setStyle(Paint.Style.STROKE);
        paintCircle.setStrokeWidth(5);//设置笔宽
        canvas.drawCircle(mWidth/2 , mHeight/2 , mWidth/2 , paintCircle);//画圆

完成了表盘后就开始画刻度线,这个也不难就是一条线段,只要确定了两端点的坐标就可以轻松搞定,关键问题是斜着的线段如何获取坐标呢,这里利用到了旋转坐标系,看如下代码:

        paintDegree = new Paint();
        paintCircle.setStrokeWidth(3);
        for(int i = 0 ; i < 24 ; i++){
            if(i == 0 || i == 6 || i == 12 || i == 18){//正的时刻直接画出
                paintDegree.setStrokeWidth(5);
                paintDegree.setTextSize(30);
                canvas.drawLine(mWidth/2, mHeight/2 - mWidth/2,mWidth/2,mHeight/2 - mWidth/2 +60,paintDegree );
                String degree = String.valueOf(i);
                canvas.drawText(degree,mWidth/2 - paintDegree.measureText(degree)/2, mHeight/2 - mWidth/2 + 90,paintDegree);
            }else{//斜着的时刻绘制
                paintDegree.setStrokeWidth(3);
                paintDegree.setTextSize(15);
                canvas.drawLine(mWidth/2, mHeight/2 - mWidth/2,mWidth/2,mHeight/2 - mWidth/2 +60,paintDegree);
                String degree = String.valueOf(i);
                canvas.drawText(degree,mWidth/2 - paintDegree.measureText(degree)/2, mHeight/2 - mWidth/2 + 90,paintDegree);
            }
            canvas.rotate(15 ,mWidth/2 , mHeight/2);//旋转坐标系
        }

最后绘制时针,计时从原点开始的两条线段

        paintHour = new Paint();
        paintHour.setStrokeWidth(20);
        Paint paintMinute = new Paint();
        paintMinute.setStrokeWidth(10);
        canvas.save();//保存画布
        canvas.translate(mWidth/2 , mHeight/2);
        canvas.drawLine(0,0,100,100,paintHour);
        canvas.drawLine(0,0,100,200,paintMinute);
        canvas.restore();//组合画布

到此为止就完成了整个绘画的过程,当然其中没有用到path,不过不要紧,在后续的动画讲解中,path会有很多作用的,还有前面有一篇介绍SurfaceView使用的文章中,就有使用path来记录手指在屏幕滑动的轨迹。绘图机制中的绘制就到此结束了,当然还有3D的绘图,我自己还在学习当中~希望这篇文章能够帮助到大家~我们一起加油~

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Android群英传读书笔记-2D绘图基础

系统通过 Canvas 为我们提供了一些基础的绘图 API :   canvas.drawPoint(float x, float y, @NonNull Paint paint); 作用:绘制点...
  • zone_
  • zone_
  • 2017-04-22 16:23
  • 268

Android_2D绘图的学习Paint,Canvas(二)

前言上一节,学会了Paint,Canvas的基本用法后,这一节,学习Paint的高级用法。还没看过上一节的请点击这里:Android_2D绘图的学习Paint,Canvas(一)。

cocos2d-x3.x的最新渲染绘图机制

从Cocos2d-x3.0开始,Cocos2d-x引入了新的渲染流程,它不像2.x版本直接在每一个node中的draw函数中直接调用OpenGL代码进行图形渲染,而是通过各种RenderCommand...

iOS开发之quartz 2d绘图基础

一、Quartz2D的简介 1⃣️Quart2D是CoreGraphic的一部分,基于C的API -图形的上下文(Graphics Context) 数据类型,封装了Quartz绘制...

2D绘图基础

系统通过提供的Canvas对象来提供绘图方法。提供可很多API,如:drawPoint、drawLine、drawRect、drawVertices、drawArc、drawCircle等。 关于P...

1 、Quartz 2D绘图基础

Quartz 2D绘图 Quartz 2D绘图的核心API是CGContextRef,该API专门用于绘制各种图形。 关注微信公众号:ioscoding ,分享优质iOS编程技术。by:shu...

【DirectX 2D游戏编程基础】directx 精灵绘图的应用,锚点与变换

其实,这个博客只介绍一个函数,就是D3DXMatrixTransformation2D,矩阵变换函数,在使用这个函数之前,我们需要先定义一个矩阵变量D3DXMATRIX g_matWorld; 这是D...

iOS Quart2D绘图之UIGraphicsGetCurrentContext基础

某天,你正在上班ing……这个时候老大过来了,“小王啊,这个按钮太丑了,客户要求变成五角星形状的,UI没空给你切图,你给我完成这个需求啊”,说完便头也不回的走了,留下你一个人在冷风中摇曳,心里一万只草...

iOS-Quartz2D绘图的基础用法总结

在UIView的drawRect:方法中具体使用Quartz2D 1获取当前上下文 CGContextRef ctx = UIGraphicsGetCurrentContext();  2拼接图形(界...

iOS绘图_Quartz 2D基础

1.Quartz 2D简介Quartz 2D是iOS中的绘图框架,他是基于Core Graphics框架的,是一个强大的二维图像绘制引擎。我们平时用到的UIKit组件都是由Core Graphics进...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)