iPhone歪斜的CALayer

Question

我是一个初学者，我做一些练习与CALayer的熟悉自己...

我只是想知道如何“倾斜”（或倾斜）一CALayer的45°角？

谢谢。

Answer 1

你可以这样做，但你会必须弄乱layer的transform财产，这是一个struct CATransform3D。和你一样，你将不得不做一些矢量数学来做到这一点。有关更多详细信息，请参见this answer中的compute_transform_matrix(...)函数。

你会想要做这样的事情：

CGRect r = layer.bounds; 
layer.transform = compute_transform_matrix(r.origin.x, r.origin.y,     r.size.width,     r.size.height, 
              r.size.height, r.origin.y,     r.size.width + r.size.height, r.origin.y, 
              r.origin.x, r.origin.y + r.size.height, r.size.width,     r.origin.y); 

检查这个我的数学。它应该是正确的。

Answer 2

CALayers有一个财产，affineTransform需要CAAffineTransform。该文档明确指出：

缩放，旋转和平移是 通过仿射变换支持最常用的操作 ，但 偏斜也可能。

（重点煤矿，很明显）

有没有内置的辅助构建歪斜变换，但你可以这样做（未经测试）：

CGAffineTransform CGAffineTransformMakeSkew(CGFloat skewAmount) 
{ 
    CGAffineTransform skewTransform = CGAffineTransformIdentity; 
    skewTransform.b = skewAmount; 
    return skewTransform; 
} 

然后，歪斜等那些垂直的东西与水平线成45度角：

layer.affineTransform = CGAffineTransformMakeSkew(1.0f); 

Answer 3

可以使用矩阵运算来转换CALayers。偏斜变换，如果你想要做一个倾斜变形沿x轴，您可以使用下面的示例由以下矩阵

如此表示。

CALayer* layer = [CALayer layer]; 
layer.frame = CGRectMake(50,50,50,50); 
layer.backgroundColor = [UIColor blueColor].CGColor; 
[self.window.layer addSublayer:layer]; 

float theta = -45.0f; 
CGAffineTransform t = CGAffineTransformIdentity; 
t.b = tan(theta*M_PI/180.0f); 
layer.transform = CATransform3DMakeAffineTransform(t); 

下面的示例将导致如下所示

层

Answer 4

有关于如何转变工作了大量的资源，它需要一点时间来真正了解他们（至少对我来说），这里有一些直接的代码，它确保指出应用了变换的轴。

/*! 
* Positive `skewX` creates a shift to the left. 
* Negative `skewX` creates a shift to the right. 
* 
* `skewX` is NOT pixel based. Test values of 0.0f - 1.0f. 
*/ 
CGAffineTransform CGAffineTransformMakeSkewX(CGFloat skewX) 
{ 
    return CGAffineTransformMakeSkew(skewX, 0.0f); 
} 

/*! 
* Positive `skewY` creates a shift to the bottom. 
* Negative `skewY` creates a shift to the top. 
* 
* `skewY` is NOT pixel based. Test values of 0.0f - 1.0f. 
*/ 
CGAffineTransform CGAffineTransformMakeSkewY(CGFloat skewY) 
{ 
    return CGAffineTransformMakeSkew(0.0f, skewY); 
} 

/*! 
* Positive `skewX` creates a shift to the left. 
* Negative `skewX` creates a shift to the right. 
* 
* Positive `skewY` creates a shift to the bottom. 
* Negative `skewY` creates a shift to the top. 
* 
* The skew values are NOT pixel based. Test values of 0.0f - 1.0f. 
*/ 
CGAffineTransform CGAffineTransformMakeSkew(CGFloat skewX, CGFloat skewY) 
{ 
    return CGAffineTransformMake(1.0f, skewY, skewX, 1.0f, 0.0f, 0.0f); 
}