天天看点

iOS开发UI篇—Quartz2D使用(矩阵操作)

一、关于矩阵操作

1.画一个四边形

通过设置两个端点(长和宽)来完成一个四边形的绘制。

代码:

iOS开发UI篇—Quartz2D使用(矩阵操作)
iOS开发UI篇—Quartz2D使用(矩阵操作)

说明:通过这种方式画矩形有弱点:画出来的矩形永远都是正的。如下图:

iOS开发UI篇—Quartz2D使用(矩阵操作)

2.画一个歪的四边形

如何画一个歪的矩形?(通过矩阵操作来完成,和形变操作相似)

可以通过矩阵操作,把画出来的东西进行形变(旋转,缩放,平移)

方法:cgcontextrotatectm(<#cgcontextref c#>, <#cgfloat angle#>)该接受两个参数(图形上下文,弧度)

注意点:设置矩阵操作必须要在添加图形之前,如果设置在添加图形之后的话,此时它已经画完了,无效。

iOS开发UI篇—Quartz2D使用(矩阵操作)
iOS开发UI篇—Quartz2D使用(矩阵操作)

  效果:

iOS开发UI篇—Quartz2D使用(矩阵操作)

二、关于旋转

1.旋转演示

view之所以能够显示视图,是因为它的上面有layer,将来图形也是渲染到layer上面。

且,旋转的时候是整个layer都旋转了,可以再画一个圆进行验证。

代码1(未旋转):

iOS开发UI篇—Quartz2D使用(矩阵操作)
iOS开发UI篇—Quartz2D使用(矩阵操作)

效果:

iOS开发UI篇—Quartz2D使用(矩阵操作)

代码2(旋转):

iOS开发UI篇—Quartz2D使用(矩阵操作)
iOS开发UI篇—Quartz2D使用(矩阵操作)
iOS开发UI篇—Quartz2D使用(矩阵操作)

2.关于旋转的补充说明

提示:旋转的时候,是整个layer都旋转了。

iOS开发UI篇—Quartz2D使用(矩阵操作)
iOS开发UI篇—Quartz2D使用(矩阵操作)
iOS开发UI篇—Quartz2D使用(矩阵操作)

三、缩放

方法:cgcontextscalectm(<#cgcontextref c#>, <#cgfloat sx#>, <#cgfloat sy#>)

该方法接收三个参数(图形上下文,x方向的缩放比例,y方向上的缩放比例

代码示例:

iOS开发UI篇—Quartz2D使用(矩阵操作)
iOS开发UI篇—Quartz2D使用(矩阵操作)
iOS开发UI篇—Quartz2D使用(矩阵操作)

四、平移

方法: cgcontexttranslatectm(<#cgcontextref c#>, <#cgfloat tx#>, <#cgfloat ty#>)

该方法接收三个参数(图形上下文,x方向的偏移量,y方向上的偏移量)

iOS开发UI篇—Quartz2D使用(矩阵操作)
iOS开发UI篇—Quartz2D使用(矩阵操作)
iOS开发UI篇—Quartz2D使用(矩阵操作)

提示:坐标原点为view的左上角。