iOS transform(基础)

主要分3个部分说明。 1.基础及矩阵概念 2.2D仿射 3.3D仿射

1.基础

transform在矩阵变换的层面上改变视图的显示效果,完成旋转,变形,平移等操作。在它被修改的同时,视图的frame也会被真实的改变。

UIView中的transform为CGAffineTransform类型。

struct CGAffineTransform {
  CGFloat a, b, c, d;
  CGFloat tx, ty;
};

CALayer中的transform为CATransform3D类型,而CALayer对应于UIView的transform属性叫做affineTransform

struct CATransform3D
{
  CGFloat m11, m12, m13, m14;
  CGFloat m21, m22, m23, m24;
  CGFloat m31, m32, m33, m34;
  CGFloat m41, m42, m43, m44;
};

2.矩阵概念

矩阵概念:一个m×n矩阵是一个由m行(row)n列(column)元素排列成的矩形阵列。 也就是这个样子

//也是仿射变换基础矩阵,下面tip讲解为什么是这个样子。
A = [a  b  0]
    [c  d  0]
    [tx ty 1]

矩阵可以做加减,乘除。

加减:大小相同(行数列数都相同)的矩阵之间可以相互加减,具体是对每个位置上的元素做加减法。(比较简单不演示了)。 乘除:当且仅当第一个矩阵的列数等于第二个矩阵的行数,才可以做乘除。(例如下面A矩阵2列,B矩阵2行)。

//矩阵乘除例子
矩阵A = 
[1  1]
[2  0]

矩阵B = 
[0  2  3]
[1  1  2]

计算过程:
矩阵C = A * B =    
[(1 * 0 + 1 * 1) (1 * 2 + 1 * 1) (1 * 3 + 1 * 2)] 
[(2 * 0 + 0 * 1) (2 * 2 + 0 * 1) (2 * 3 + 0 * 2)]   
矩阵C =
[1 3 5]
[0 4 6]

矩阵乘除的计算规则: 1.不符合交换律(A和B是矩阵,AB不一定等于BA) 2.当矩阵A的列数等于矩阵B的行数是,才可以计算 3.计算的结果矩阵C的行数等于A的行数,列数等于B的列数(如A是m×n矩阵和B是n×p矩阵,它们的乘积C是一个m×p矩阵 ) 4.结果矩阵C的第 i 行第 j 列的元素Cij 等于矩阵A的第 i 行的元素与矩阵B的第 j 列对应元素乘积之和

3.Tip

1.为什么仿射变换基础矩阵的第三列为(0,0,1)? 当且仅当第一个矩阵的列数等于第二个矩阵的行数,才可以做乘除。并且为了不影响计算结果所以使用(0,0,1)。 2.图层的旋转,平移,放缩是怎么通过矩阵变化的? 当对图层应用变换矩阵,图层矩形内的每一个点都被相应地做变换,从而形成一个新的四边形的形状。

参考 iOS开发经验(6)-Transform

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏书山有路勤为径

Creating a Filter, Edge Detection

Below, you've been given one common type of edge detection filter: a Sobel opera...

661
来自专栏null的专栏

简单易学的机器学习算法——Rosenblatt感知机

一、感知机的概念 image.png 二、感知机模型的训练     1、目标函数    image.png     2、感知机的训练过程 image.png 三...

3649
来自专栏杨熹的专栏

TensorFlow-4: tf.contrib.learn 快速入门

学习资料: https://www.tensorflow.org/get_started/tflearn 相应的中文翻译: http://studyai.s...

3366
来自专栏小樱的经验随笔

Lucas定理学习(进阶中)

(1)Lucas定理:p为素数,则有: ? ? ? (2)证明: n=(ak...a2,a1,a0)p = (ak...a2,a1)p*p + a0 =  [n...

2708
来自专栏Petrichor的专栏

leetcode: 62. Unique Paths

842
来自专栏aCloudDeveloper

LeetCode: 221_Maximal Square | 二维0-1矩阵中计算包含1的最大正方形的面积 | Medium

题目: Given a 2D binary matrix filled with 0's and 1's, find the largest square co...

2277
来自专栏人工智能

OpenCV—Node.js教程系列:用Tensorflow和Caffe“做游戏”

AiTechYun 编辑:Yining 今天我们来看看OpenCV的深度神经网络模块。如果你想要释放神经网络的awesomeness来识别和分类图像中的物体,但...

29010
来自专栏专知

【干货】计算机视觉实战系列02——用Python做图像处理

【导读】在当今互联网蓬勃发展的时代,图像处理技术也随着人们的需求不断进步,专知成员Hui计划推出一系列计算机视觉入门实战讲解,参照Jan Erik Solem编...

81013
来自专栏人人都是极客

第五课:推理结果的可视化

处理推理结果 在上一课时中,已经通过 Inference 获取到了识别结果,存放在三个数组里: float[] boxes = new float[10...

3549
来自专栏数据小魔方

R语言可视化——直方图及其美化技巧!

今天介绍关于直方图的美化技巧! 数据集仍然使用上一节使用到的有关钻石的数据信息。 data(diamonds) set.seed(42) small <- d...

2594

扫码关注云+社区