关于Canvas的小笔记

原创 2015年11月17日 16:53:47

前言

这几天一直在看关于view的自定义方面的只是,在onDraw绘制时会经常用到画布Canvas,接下来对画布的知识做一些小总结。

一、剪裁方法clipRect(…)(类似于截屏)

此方法主要是在画布上街区一定区域的面积进行操作。

Rect

讲到截取一定区域的面积就要讲到Rect

canvas.drawRect(new Rect(150, 75, 260, 120), mPaint);

我们经常会看到这样一段代码,就是在画布上添加一个矩阵,而在drawRect中设置的Rect参数分别是矩阵的四个参数,由于是矩阵只需要确定左上角的坐标和右下角的坐标即可。上面代码中四个参数left,top,right,bottom,其实可以理解为(left,top)为左上角的坐标,(right,bottom)为右下角的坐标。

RectF

我们还会见到如RectF这个类,作用其实是和Rect一样的,只不过坐标的参数都会以folat类型来设置

**ps: 我们应该怎么把它放到屏幕的右下角,就是和屏幕的右侧和下侧都挨上 坐标是多少?我的屏幕是 320*480 按道理这个矩形的坐标应该是(210,435,320,480) 这其实 应该是正确的结果 ,但是如果把坐标改成这个 你运行一下 其实 这个矩形就消失在了屏幕上。 刚开始我困惑至极 也不知道怎么回事,后来发现 我们屏幕的 状态栏 和 标题栏

一共占了 50 正确的坐标应该是 (210,385,320,430);
这个时候它就在屏幕的右下角。 这里还是有疑问,就算 状态栏 和 标题栏 占去了 50 但是矩形最下面那条线 的位置应该还是480啊 ! 这是没错的啊 怎么会变成430 了 很好 我也不知道是怎么回事 我怀疑 是坐标原点 下移 坐标原点 在 状态栏和标题栏的底线。 http://blog.csdn.net/pilou5400/archive/2010/11/18/6018422.aspx 大家 可以去看看。**

二、intersect与union

这两个方法比较简单,主要是对画布中两个固定界面进行截取,intersect是取两个矩阵的交集,union是取两个矩阵的全集

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.BLUE);  

        Rect rect = new Rect(0, 0, 500, 500);  

        rect.intersect(250, 250, 750, 750); 

        canvas.clipRect(rect);
        canvas.drawColor(Color.RED);  
    }  
 protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.BLUE);  

        Rect rect = new Rect(0, 0, 500, 500);  

        rect.union(250, 250, 750, 750);  

        canvas.clipRect(rect);
        canvas.drawColor(Color.RED);  
    } 

具体使用方法如上。
关于剪裁的还有很多方法这里不一一介绍,这里主要是想记住大概canvas的一些用法和整体作用。

三、saveXXX和restoreXXX 画布层的概念

这里主要是讲层的概念。画布在使用的过程中参数是一致不断在变化的,当我们向画布中不断添加元素的过程中有时候还是希望位置大小等参数可以回滚。save方法就可以使我们之前的操作状态得以保存,restore则是使画布回到那个状态。

我们在save()后添加了旋转,绘制后释放了画布。你会发现旋转的只有蓝色的矩形,之后绘制的绿色圆形没有旋转。这就说明蓝色的矩形被我们放在了一个新的层上,在那里进行的操作是不会影响到之后的图层的。一旦你释放了画布,之后的操作就在别的层上了,所以我们的绿色圆形没有发生任何变化。

至此结合上一节对Canvas的一些原理阐述我们该对它有个全新的认识,之前我们一直称其为画布,其实更准确地说Canvas是一个容器,如果把Canvas理解成画板,那么我们的“层”就像张张夹在画板上的透明的纸,而这些纸对应到Android则是一个个封装在Canvas中的Bitmap。

@Override
    protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);

        mPaint.setColor(Color.RED);
        canvas.drawRect(50, 50, 250, 250, mPaint);


        // 保存画布
        canvas.save();
        // 旋转画布
        canvas.rotate(30); 

        mPaint.setColor(Color.BLUE);
        canvas.drawRect(100, 100, 200, 200, mPaint);

        // 还原画布
        canvas.restore();

        mPaint.setColor(Color.GREEN);
        canvas.drawCircle(150, 150, 40, mPaint);
    }

四、变换

说起变换,无非就几种:平移、旋转、缩放和错切,而我们的Canvas也继承了变换的精髓,同样提供了这几种相应的方法,像translate(float dx, float dy)方法平移画布用了无数次,这里再次强调,translate方法会改变画布的原点坐标,原点坐标对变换的影响弥足轻重!
scale(float sx, float sy)是对画布进行缩放
rotate(float degrees)和rotate(float degrees, float px, float py)
rotate(float degrees)和重载方法rotate(float degrees, float px, float py)它们的作用是旋转画布。这个在上面已经多次用到了,就不再赘述了。
skew(float sx, float sy)
kew(float sx, float sy)是错切方法,两个参数与scale类似表示横纵向的错切比率。所谓错切就是把图片分割为不同的格子,类似于棋盘。然后移动上面的各个交点的位置,让图片进行变换的效果。

这里介绍Matrix

Matrix是一个3*3的矩阵,其值对应如下:
下面给出具体坐标对应变形的属性
|scaleX, skewX, translateX|
|skewY, scaleY, translateY|
|0 ,0 , scale |
Matrix提供了一些方法来控制图片变换:
setTranslate(float dx,float dy):控制Matrix进行位移。
setSkew(float kx,float ky):控制Matrix进行倾斜,kx、ky为X、Y方向上的比例。
setSkew(float kx,float ky,float px,float py):控制Matrix以px、py为轴心进行倾斜,kx、ky为X、Y方向上的倾斜比例。
setRotate(float degrees):控制Matrix进行depress角度的旋转,轴心为(0,0)。
setRotate(float degrees,float px,float py):控制Matrix进行depress角度的旋转,轴心为(px,py)。
setScale(float sx,float sy):设置Matrix进行缩放,sx、sy为X、Y方向上的缩放比例。
setScale(float sx,float sy,float px,float py):设置Matrix以(px,py)为轴心进行缩放,sx、sy为X、Y方向上的缩放比例。
注意:以上的set方法,均有对应的post和pre方法,Matrix调用一系列set,pre,post方法时,可视为将这些方法插入到一个队列.当然,按照队列中从头至尾的顺序调用执行.其中pre表示在队头插入一个方法,post表示在队尾插入一个方法.而set表示把当前队列清空,并且总是位于队列的最中间位置.当执行了一次set后:pre方法总是插入到set前部的队列的最前面,post方法总是插入到set后部的队列的最后面
Demo

本文大部分内容参考自:

http://blog.csdn.net/aigestudio/article/details/41960507

http://blog.csdn.net/aigestudio/article/details/42677973

http://blog.csdn.net/airk000/article/details/38925059

我记录在此,作为学习笔记。

http://www.cnblogs.com/tianzhijiexian/p/4300988.html尊重原作者,感谢作者的无私分享

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

Canvas学习笔记(一)

本文旨在记录自己学习Canvas中遇到的一些觉得有必要记下来的知识点。一.getContext()方法MDN上的定义: canvas.getContext(contextType, contextA...
  • qq_34491055
  • qq_34491055
  • 2017年06月10日 00:41
  • 132

canvas学习笔记(一) ----canvas入门

canvas是html5最强大的元素之一,在图形,动画和游戏开发中有许多应用。 好了,废话不多说,直接上代码: html> head> meta charset="U...
  • LuciferMS
  • LuciferMS
  • 2018年01月14日 12:56
  • 15

自己刚学html的时候记得笔记,别嫌丑,我就是这么学过来的

盒子的阴影 box-shadow:0px 0px 0px #000000;分别是宽高阴影密度颜色 box-sizing:border-box;padding包括里面             co...
  • qq_30100043
  • qq_30100043
  • 2016年11月25日 11:11
  • 603

CANVAS移动、缩放、旋转画入的图片

自己做的一个CANVAS移动、缩放、旋转画入的图片demo: CANVAS touch测试 *{ margin:0px; padding:0px; -webkit-tap-...
  • qq_16494241
  • qq_16494241
  • 2016年08月16日 14:49
  • 7123

HTML5 Canvas中实现绘制一个像素宽的细线

演示HTML5 Canvas中如何正确的画出一个像素宽的直线。
  • jia20003
  • jia20003
  • 2013年07月25日 23:10
  • 16346

【js学习笔记-114】----<canvas>矩形、颜色、透明度、渐变及图案

矩形、颜色、透明度、渐变及图案(感觉没怎么懂!!先放这吧,回产头再研究) 矩形 CanvasRenderingContext2D对象定义了4个用于绘制矩形的方法 都接受两个参数,其中一个指定矩形的一个...
  • pigpigpig4587
  • pigpigpig4587
  • 2014年04月02日 17:43
  • 11804

使用canvas画图,图形模糊怎么办

在说解决办法之前,例行惯例,简要的说明一下Html5中的Canvas。Canvas是Html5制图中常用的元素,但其本身并没有绘制能力,它仅仅是图形的容器,要制图还必须依靠脚本。按照Canvas中提供...
  • LeyYang
  • LeyYang
  • 2016年08月18日 22:15
  • 7036

Canvas抗锯齿方法两种

转:抗锯齿方法两种(其一:paint.setAntiAlias(ture);paint.setBitmapFilter(true)) 在And...
  • win816723459
  • win816723459
  • 2015年03月26日 09:54
  • 4979

canvas lineWidth为1时线条粗细和颜色

今天在使用html5的canvas时碰到了一个问题
  • hansuiqingsong
  • hansuiqingsong
  • 2014年10月13日 21:45
  • 3328

第十讲:html5中canvas实现正方体的动态旋转

在html5的画布上,画出三维图形,并且实现它动态的围着一个
  • LIUMINGM900913
  • LIUMINGM900913
  • 2014年06月11日 20:48
  • 1894
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于Canvas的小笔记
举报原因:
原因补充:

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