同时透视和翻转 UIImageView

发布于 2024-11-17 23:43:30 字数 704 浏览 2 评论 0原文

我正在尝试翻转并旋转 uiimageview 的透视，以获得类似反射的效果。首先我使用 CATransform3D 给出透视图，然后使用 CGAffineTransformMake 进行翻转。然而，我在第二次转换后失去了透视效果。我不知道如何使用 CATransform3D 来透视和翻转两者。 img 是第一张图像，img2 将是它的反射。

CALayer *layer = img.layer;
CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
rotationAndPerspectiveTransform.m34 = 1.0 / -600;
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 30.0f * M_PI / 180.0f, 0.0f, 1.0f, 0.0f);
layer.transform = rotationAndPerspectiveTransform;
img2.transform = CGAffineTransformMake(
                                            1, 0, 0, -1, 0, img2.bounds.size.height
                                            );

原文

I am trying to flip and give perspective rotate an uiimageview, in order to obtain an effect like reflection. first i give perspective using CATransform3D and then flip using CGAffineTransformMake. However i loose the perspective effect after the second trasnformation. and i couldn't figure out how to perspective and flip both using CATransform3D. img is the first image and img2 will be its reflection.

CALayer *layer = img.layer;
CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
rotationAndPerspectiveTransform.m34 = 1.0 / -600;
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 30.0f * M_PI / 180.0f, 0.0f, 1.0f, 0.0f);
layer.transform = rotationAndPerspectiveTransform;
img2.transform = CGAffineTransformMake(
                                            1, 0, 0, -1, 0, img2.bounds.size.height
                                            );

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

沦落红尘 2024-11-24 23:43:30

我能够通过 4 个（可选 5 个）步骤完成此效果：

在笔尖中创建两个 UIImageView。为主图像创建一个 UIImageView，然后为反射图像创建另一个 UIImageView。确保它们的查看内容模式均设置为“宽高比适合”。另外，将反射图像的帧大小设为主图像帧大小的 2 倍（因为透视反射会增加图像的宽度）。

正常加载主图像。现在加载倒影，如下所示：

reflectionView.image = [UIImage
                   imageWithCGImage:mainImageView.image.CGImage
                   刻度：1.0f
                   方向：UIImageOrientationDownMirrored]；

现在创建透视变换，如下所示：

CATransform3D 旋转AndPerspectiveTransform = CATransform3DIdentity;
rotationAndPerspectiveTransform.m24 = 1.0f/-mainImageView.frame.size.width;
[[reflectionView层] setTransform:rotationAndPerspectiveTransform];

最后，将反射移动到位：

reflectionView.center = CGPointMake(self.view.frame.size.width/2, mainImageView.frame.size.height*1.5);

可以选择添加渐变，使反射逐渐消失在图像中。
背景：

reflectionView.layer.masksToBounds = YES;

// 定义渐变
CAGradientLayer *theGradient = [CAGradientLayer 图层];
theGradient.frame=reflectionView;
theGradient.colors = [NSArray arrayWithObjects:
                      (id)[[UIColor clearColor] CGColor],
                      (id)[[UIColor blackColor] CGColor], nil];

// 为反射图像添加渐变
[reflectionView insertSublayer:theGradient atIndex:0];
反射视图= 0.25f；

看起来像这样：
在此处输入图像描述

I was able to accomplish this effect in 4 (optionally 5) steps:

Create two UIImageViews in your nib. Create a UIImageView for your main image, then another for your reflected image. Make sure their view content modes are both set to Aspect Fit. Also, make the frame size of the reflected image 2x that of your main image (because the perspective reflection will add width to the image).

Load up the main image as normal. Now load up the reflection to be upside-down like so:

reflectionView.image = [UIImage
                   imageWithCGImage:mainImageView.image.CGImage
                   scale:1.0f
                   orientation: UIImageOrientationDownMirrored];

Now create the perspective transform like so:

CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
rotationAndPerspectiveTransform.m24 = 1.0f/-mainImageView.frame.size.width;
[[reflectionView layer] setTransform:rotationAndPerspectiveTransform];

Finally, move the reflection into place:

reflectionView.center = CGPointMake(self.view.frame.size.width/2, mainImageView.frame.size.height*1.5);

Optionally, add a gradient to make the reflection fade away into the
background:

reflectionView.layer.masksToBounds = YES;

// define gradient
CAGradientLayer *theGradient = [CAGradientLayer layer];
theGradient.frame = reflectionView;
theGradient.colors = [NSArray arrayWithObjects:
                      (id)[[UIColor clearColor] CGColor],
                      (id)[[UIColor blackColor] CGColor], nil];

// add gradient to reflection image
[reflectionView insertSublayer:theGradient atIndex:0];
reflectionView = 0.25f;

It looks like this:
enter image description here

回复收藏 0 原文

~没有更多了~