不了解Matrix的同学看这里:http://ipjmc.iteye.com/blog/1275366
弄明白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).
这是因为setScale重新设置了矩阵的值,之前的两个变换是无效的了,所以最终的显示效果只有三个变换效果。
Canvas里scale, translate, rotate, concat方法都是pre方法,如果要进行更多的变换可以先从canvas获得matrix, 变换后再设置回canvas.
转自:http://longshuai2007.blog.163.com/blog/static/14209441420117521823875/
分享到:
相关推荐
讲解使用canvas.save()和canvas.restore()的demo
比较直观的描述clipRect的使用方法和含义
LED画布矩阵 Matrix 类为 led-canvas 和 led-canvas-text 提供基本的数据结构
4.4_屏幕坐标和canvas坐标的转换|使用鼠标和canvas交互|canvas项目综合实战|Canvas图形、动画、游戏开发
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
html2canvas 网页对图片加水印
为大家介绍一款JS截图插件html2canvas.js,它可以通过纯JS对浏览器端经行截屏,下面就为大家介绍一下html2canvas.js属性和具体使用方法,并为大家提供了一个实例
Canvas和OpenGL结合实现绘图和高速缩放漫游的Demo,弥补了Canvas移动缓慢的弊端
Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、...
canvas
canvas裁剪canvas裁剪canvas裁剪canvas裁剪canvas裁剪canvas裁剪
1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM,因此可能不是 100% 准确到真实表示,因为它不会制作实际的屏幕截图,而是根据页面上可用的信息构建屏幕截图。 2.它只能正确渲染它...
全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让读者对Canvas建立起完整的认识。随后讨论了动画循环、记忆形状、模拟运动、碰撞...
Allegro17.2 3D Canvas的设置和使用,3D效果显示,打开密码Qqun397903703
canvas和其他新增内容.xmind
canvas简单实例详解
这是自己做的一个小Demo,实现平行四边形的图片效果。通过canvas和css来实现的。
canvas是一个可以让我们使用脚本绘图的标签,它提供了一系列完整的属性和方法。我们可以借此来实现图形绘制,图像处理甚至实现简单的动画和游戏制作。 canvas标签只有两个属性:width和height,用来设定画布的宽和高...
AS3 相同的模式来对绘制元素进行抽象,采用OO的模式方便的管理绘制在Canvas上面的每个元素和进行事件绑定和检测触发,解决Canvas开发面对 无状态的Canvas画布无从下手的尴尬;独树一帜的心跳包主动渲染机制(不再...
canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。 基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。 <canvas> 元素是WhatWG Web applications 1.0规范...