天天看點

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的左上角。

繼續閱讀