canvas教程

对Canvas和Matrix的理解

字号+ 作者:H5之家 来源:H5之家 2017-10-15 10:00 我要评论( )

初识 我们看到的View视图其实最终都是在Canvas这个画板上画出来的,可以想象这个canvas有无限大,只是View组件在绘制时,即父组件调用dispatchDraw(Canvas c)分

初识

我们看到的View视图其实最终都是在Canvas这个画板上画出来的,可以想象这个canvas有无限大,只是View组件在绘制时,即父组件调用dispatchDraw(Canvas c)分发给各个子组件绘制时,根据子组件的大小和位置,分别调用canvas的translate(int dx, int dy)和clipRect(int l, int t, int r, int b)方法来设置canvas的当前原点坐标和绘制的可见范围。所以当我们在view组件通过onDraw(Canvas c)方法绘制时,往往因为超过组件大小范围而看不到绘制的一部分内容。

 

我们通过animation来实现view组件的动画效果时候, 实际上是改变canvas的matrix, matrix矩阵的作用主要是对每个坐标点(x, y)转换为另外的(x', y'),必要的时候canvas还会通过clipRect()方法改变它的绘制可见范围,这样不至于做移动的时候看不到view组件。我们看到view的动画效果时,其实它的大小和布局都没有变化,所以会看到比较搞笑的现象,就是一个button通过translate偏离原来位置后,它的touch事件响应还是在原来位置上,而不是所看到的眼前位置。

 

Canvas的translate(int dx, int dy)方法,其实和通过设置它的matrix的postTranslate(int dx, int dy), preTranslate(int dx, int dy)方法效果是一样的, 而Matrix的pre系列方法和post系列方法在俺看来效果是一样的,因为做过试验打印数据比较过, 唯独set系列的方法和pre, post的不同,它是直接设值,而后者它们是设置matrix的增量。

 

更进一步

终于切切实实弄明白matrix那几个方法的使用了,比如preTranslate, setTranslate, postTranslate这些。以前对它们都是一知半解,以为这几个方法没什么区别,其实还是有很大不同的,最紧要是这几个方法的调用顺序对坐标变换的影响。抽象的说pre方法是向前"生长", post方法是向后"生长",具体拿个例子来说,比如一个matrix调用了下列一系列的方法:

 

matrix.preScale(0.5f, 1); matrix.preTranslate(10, 0); matrix.postScale(0.7f, 1); matrix.postTranslate(15, 0); 则坐标变换经过的4个变换过程依次是:translate(10, 0) -> scale(0.5f, 1) -> scale(0.7f, 1) -> translate(15, 0), 所以对matrix方法的调用顺序是很重要的,不同的顺序往往会产生不同的变换效果。pre方法的调用顺序和post方法的互不影响,即以下的方法调用和前者在真实坐标变换顺序里是一致的, matrix.postScale(0.7f, 1); matrix.preScale(0.5f, 1); matrix.preTranslate(10, 0); matrix.postTranslate(15, 0);

而matrix的set方法则会对先前的pre和post操作进行刷除,而后再设置它的值,比如下列的方法调用:

matrix.preScale(0.5f, 1); matrix.postTranslate(10, 0); matrix.setScale(1, 0.6f); matrix.postScale(0.7f, 1); matrix.preTranslate(15, 0); 其坐标变换顺序是translate(15, 0) -> scale(1, 0.6f) -> scale(0.7f, 1).

Canvas里scale, translate, rotate, concat方法都是pre方法,如果要进行更多的变换可以先从canvas获得matrix, 变换后再设置回canvas.

 

 

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

相关文章
  • android浏览器,使用canvas绘制图像重影的解决办法

    android浏览器,使用canvas绘制图像重影的解决办法

    2017-10-14 15:11

  • Js利用Canvas实现图片压缩功能

    Js利用Canvas实现图片压缩功能

    2017-10-14 12:18

  • 【[js高手之路] html5 canvas动画教程

    【[js高手之路] html5 canvas动画教程

    2017-10-14 11:12

  • 好用的Canvas绘图库介绍(Fabric.js)

    好用的Canvas绘图库介绍(Fabric.js)

    2017-10-14 11:04

网友点评