Как создать/отобразить UIImage из 3D-преобразованного UIImageView?
После применения 3D-преобразования к UIImageView.layer мне нужно сохранить результирующий "вид" как новый UIImage... Сначала казалось простой задачей:-), но пока не повезло, и поиск hasn ' t поднял любые подсказки:-( Так что я надеюсь, что кто-то будет достаточно любезен, чтобы указать мне в правильном направлении.
Простой проект iPhone доступен здесь.
Спасибо.
- (void)transformImage {
float degrees = 12.0;
float zDistance = 250;
CATransform3D transform3D = CATransform3DIdentity;
transform3D.m34 = 1.0 / zDistance; // the m34 cell of the matrix controls perspective, and zDistance affects the "sharpness" of the transform
transform3D = CATransform3DRotate(transform3D, DEGREES_TO_RADIANS(degrees), 1, 0, 0); // perspective transform on y-axis
imageView.layer.transform = transform3D;
}
/* FAIL : capturing layer contents doesn't get the transformed image -- just the original
CGImageRef newImageRef = (CGImageRef)imageView.layer.contents;
UIImage *image = [UIImage imageWithCGImage:newImageRef];
*/
/* FAIL : docs for renderInContext states that it does not render 3D transforms
UIGraphicsBeginImageContext(imageView.image.size);
[imageView.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
*/
//
// header
//
#import <QuartzCore/QuartzCore.h>
#define DEGREES_TO_RADIANS(x) x * M_PI / 180
UIImageView *imageView;
@property (nonatomic, retain) IBOutlet UIImageView *imageView;
//
// code
//
@synthesize imageView;
- (void)transformImage {
float degrees = 12.0;
float zDistance = 250;
CATransform3D transform3D = CATransform3DIdentity;
transform3D.m34 = 1.0 / zDistance; // the m34 cell of the matrix controls perspective, and zDistance affects the "sharpness" of the transform
transform3D = CATransform3DRotate(transform3D, DEGREES_TO_RADIANS(degrees), 1, 0, 0); // perspective transform on y-axis
imageView.layer.transform = transform3D;
}
- (UIImage *)captureView:(UIImageView *)view {
UIGraphicsBeginImageContext(view.frame.size);
[view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
- (void)imageSavedToPhotosAlbum:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo {
NSString *title = @"Save to Photo Album";
NSString *message = (error ? [error description] : @"Success!");
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:title message:message delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
[alert show];
[alert release];
}
- (IBAction)saveButtonClicked:(id)sender {
UIImage *newImage = [self captureView:imageView];
UIImageWriteToSavedPhotosAlbum(newImage, self, @selector(imageSavedToPhotosAlbum: didFinishSavingWithError: contextInfo:), nil);
}
Ответы
Ответ 1
В итоге я создал пиксель пикселя рендеринга на пиксель на процессоре, используя инверсию преобразования вида.
В основном, он делает исходный UIImageView в UIImage. Затем каждый пиксель в UIImage умножается на матрицу обратного преобразования для генерации преобразованного UIImage.
RenderUIImageView.h
#import <UIKit/UIKit.h>
#import <QuartzCore/CATransform3D.h>
#import <QuartzCore/CALayer.h>
@interface RenderUIImageView : UIImageView
- (UIImage *)generateImage;
@end
RenderUIImageView.m
#import "RenderUIImageView.h"
@interface RenderUIImageView()
@property (assign) CATransform3D transform;
@property (assign) CGRect rect;
@property (assign) float denominatorx;
@property (assign) float denominatory;
@property (assign) float denominatorw;
@property (assign) float factor;
@end
@implementation RenderUIImageView
- (UIImage *)generateImage
{
_transform = self.layer.transform;
_denominatorx = _transform.m12 * _transform.m21 - _transform.m11 * _transform.m22 + _transform.m14 * _transform.m22 * _transform.m41 - _transform.m12 * _transform.m24 * _transform.m41 - _transform.m14 * _transform.m21 * _transform.m42 +
_transform.m11 * _transform.m24 * _transform.m42;
_denominatory = -_transform.m12 *_transform.m21 + _transform.m11 *_transform.m22 - _transform.m14 *_transform.m22 *_transform.m41 + _transform.m12 *_transform.m24 *_transform.m41 + _transform.m14 *_transform.m21 *_transform.m42 -
_transform.m11* _transform.m24 *_transform.m42;
_denominatorw = _transform.m12 *_transform.m21 - _transform.m11 *_transform.m22 + _transform.m14 *_transform.m22 *_transform.m41 - _transform.m12 *_transform.m24 *_transform.m41 - _transform.m14 *_transform.m21 *_transform.m42 +
_transform.m11 *_transform.m24 *_transform.m42;
_rect = self.bounds;
if (UIGraphicsBeginImageContextWithOptions != NULL) {
UIGraphicsBeginImageContextWithOptions(_rect.size, NO, 0.0);
} else {
UIGraphicsBeginImageContext(_rect.size);
}
if ([[UIScreen mainScreen] respondsToSelector:@selector(displayLinkWithTarget:selector:)] &&
([UIScreen mainScreen].scale == 2.0)) {
_factor = 2.0f;
} else {
_factor = 1.0f;
}
UIImageView *img = [[UIImageView alloc] initWithFrame:_rect];
img.image = self.image;
[img.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *source = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
CGContextRef ctx;
CGImageRef imageRef = [source CGImage];
NSUInteger width = CGImageGetWidth(imageRef);
NSUInteger height = CGImageGetHeight(imageRef);
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
unsigned char *inputData = malloc(height * width * 4);
unsigned char *outputData = malloc(height * width * 4);
NSUInteger bytesPerPixel = 4;
NSUInteger bytesPerRow = bytesPerPixel * width;
NSUInteger bitsPerComponent = 8;
CGContextRef context = CGBitmapContextCreate(inputData, width, height,
bitsPerComponent, bytesPerRow, colorSpace,
kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
CGColorSpaceRelease(colorSpace);
CGContextDrawImage(context, CGRectMake(0, 0, width, height), imageRef);
CGContextRelease(context);
context = CGBitmapContextCreate(outputData, width, height,
bitsPerComponent, bytesPerRow, colorSpace,
kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
CGColorSpaceRelease(colorSpace);
CGContextDrawImage(context, CGRectMake(0, 0, width, height), imageRef);
CGContextRelease(context);
for (int ii = 0 ; ii < width * height ; ++ii)
{
int x = ii % width;
int y = ii / width;
int indexOutput = 4 * x + 4 * width * y;
CGPoint p = [self modelToScreen:(x*2/_factor - _rect.size.width)/2.0 :(y*2/_factor - _rect.size.height)/2.0];
p.x *= _factor;
p.y *= _factor;
int indexInput = 4*(int)p.x + (4*width*(int)p.y);
if (p.x >= width || p.x < 0 || p.y >= height || p.y < 0 || indexInput > width * height *4)
{
outputData[indexOutput] = 0.0;
outputData[indexOutput+1] = 0.0;
outputData[indexOutput+2] = 0.0;
outputData[indexOutput+3] = 0.0;
}
else
{
outputData[indexOutput] = inputData[indexInput];
outputData[indexOutput+1] = inputData[indexInput + 1];
outputData[indexOutput+2] = inputData[indexInput + 2];
outputData[indexOutput+3] = 255.0;
}
}
ctx = CGBitmapContextCreate(outputData,CGImageGetWidth( imageRef ),CGImageGetHeight( imageRef ),8,CGImageGetBytesPerRow( imageRef ),CGImageGetColorSpace( imageRef ), kCGImageAlphaPremultipliedLast );
imageRef = CGBitmapContextCreateImage (ctx);
UIImage* rawImage = [UIImage imageWithCGImage:imageRef];
CGContextRelease(ctx);
free(inputData);
free(outputData);
return rawImage;
}
- (CGPoint) modelToScreen : (float) x: (float) y
{
float xp = (_transform.m22 *_transform.m41 - _transform.m21 *_transform.m42 - _transform.m22* x + _transform.m24 *_transform.m42 *x + _transform.m21* y - _transform.m24* _transform.m41* y) / _denominatorx;
float yp = (-_transform.m11 *_transform.m42 + _transform.m12 * (_transform.m41 - x) + _transform.m14 *_transform.m42 *x + _transform.m11 *y - _transform.m14 *_transform.m41* y) / _denominatory;
float wp = (_transform.m12 *_transform.m21 - _transform.m11 *_transform.m22 + _transform.m14*_transform.m22* x - _transform.m12 *_transform.m24* x - _transform.m14 *_transform.m21* y + _transform.m11 *_transform.m24 *y) / _denominatorw;
CGPoint result = CGPointMake(xp/wp, yp/wp);
return result;
}
@end
Ответ 2
Теоретически вы можете использовать (теперь разрешенный) недокументированный вызов UIGetScreenImage() после быстрого его отображения на экране на черном фоне, но на практике это будет медленным и уродливым, поэтому не используйте его;
Ответ 3
У меня с вами такая же проблема, и я нашел решение!
Я хочу повернуть UIImageView, потому что у меня будет анимация.
И сохраните изображение, я использую этот метод:
void CGContextConcatCTM(CGContextRef c, CGAffineTransform transform)
преобразование param является преобразованием вашего UIImageView!. Так что все, что вы сделали с imageView, будет одинаковым с изображением!.
И я написал метод категории UIImage.
-(UIImage *)imageRotateByTransform:(CGAffineTransform)transform{
// calculate the size of the rotated view containing box for our drawing space
UIView *rotatedViewBox = [[UIView alloc] initWithFrame:CGRectMake(0,0,self.size.width, self.size.height)];
rotatedViewBox.transform = transform;
CGSize rotatedSize = rotatedViewBox.frame.size;
[rotatedViewBox release];
// Create the bitmap context
UIGraphicsBeginImageContext(rotatedSize);
CGContextRef bitmap = UIGraphicsGetCurrentContext();
// Move the origin to the middle of the image so we will rotate and scale around the center.
CGContextTranslateCTM(bitmap, rotatedSize.width/2, rotatedSize.height/2);
//Rotate the image context using tranform
CGContextConcatCTM(bitmap, transform);
// Now, draw the rotated/scaled image into the context
CGContextScaleCTM(bitmap, 1.0, -1.0);
CGContextDrawImage(bitmap, CGRectMake(-self.size.width / 2, -self.size.height / 2, self.size.width, self.size.height), [self CGImage]);
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
Надеюсь, это поможет вам.
Ответ 4
Вы посмотрели на это? UIImage из UIView
Ответ 5
В вашем методе captureView:
попробуйте заменить эту строку:
[view.layer renderInContext:UIGraphicsGetCurrentContext()];
с этим:
[view.layer.superlayer renderInContext:UIGraphicsGetCurrentContext()];
Возможно, вам придется настроить размер, используемый для создания контекста изображения.
Я не вижу ничего в документе API, который говорит renderInContext: игнорирует 3D-преобразования. Тем не менее, преобразования применяются к слою, а не к его содержимому, поэтому вам нужно отобразить суперслоя, чтобы увидеть применяемое преобразование.
Обратите внимание, что вызов drawRect:
в супервизии определенно не будет работать, так как drawRect:
не выводит subviews.
Ответ 6
3D-преобразование на UIImage/CGImageRef
Я улучшил ответ Маркоса Фуэнтеса. Вы должны уметь вычислять отображение каждого пикселя самостоятельно. Не идеально, но он делает трюк...
Он доступен в этом репозитории http://github.com/hfossli/AGGeometryKit/
Интересными файлами являются
https://github.com/hfossli/AGGeometryKit/blob/master/Source/AGTransformPixelMapper.m
https://github.com/hfossli/AGGeometryKit/blob/master/Source/CGImageRef%2BCATransform3D.m
https://github.com/hfossli/AGGeometryKit/blob/master/Source/UIImage%2BCATransform3D.m
3D-преобразование в UIView/UIImageView
fooobar.com/questions/6640/...
Тогда у вас будет полный контроль над каждой точкой в четырехугольниках.:)
Ответ 7
У меня была та же проблема, я смог использовать UIView drawViewHierarchyInRect: afterScreenUpdates: метод от iOS 7.0 -
(Documentation)
Он рисует все дерево, как оно появляется на экране.
UIGraphicsBeginImageContextWithOptions(viewToRender.bounds.size, YES, 0);
[viewToRender drawViewHierarchyInRect:viewToRender.bounds afterScreenUpdates:YES];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
Ответ 8
Решение, которое я обнаружил, по крайней мере, работало в моем случае, было подклассом CALayer
. Когда сообщение renderInContext:
отправляется на уровень, этот слой автоматически пересылает это сообщение всем его подслоям. Таким образом, все, что мне нужно было сделать, это подкласс CALayer
и переопределить метод renderInContext:
и отобразить то, что мне нужно было сделать в предоставленном контексте.
Например, в моем коде у меня был слой, для которого я устанавливал его содержимое на изображение стрелки:
UIImage *image = [UIImage imageNamed:@"arrow.png"];
MYLayer *myLayer = [[CALayer alloc] init];
[myLayer setContents:(__bridge id)[image CGImage]];
[self.mainLayer addSublayer:myLayer];
Теперь, когда я применял 3D-поворот на 180 градусов по оси Y на стрелке и пытался сделать [self.mainLayer renderInContext:context]
, после этого я все еще получал изображение без поворота.
Итак, в моем подклассе MyLayer
я переделал renderInContext:
и использовал уже повернутое изображение для рисования в предоставленном контексте:
- (void)renderInContext:(CGContextRef)ctx
{
NSLog(@"Rendered in context");
UIImage *image = [UIImage imageNamed:@"arrow_rotated.png"];
CGContextDrawImage(ctx, self.bounds, image.CGImage);
}
Это сработало в моем случае, однако я вижу, что если вы делаете много 3D-преобразований, у вас может не получиться образ для всех возможных сценариев. Во многих других случаях, хотя должно быть возможно сделать результат 3D-преобразования с использованием двумерных преобразований в переданном контексте. Например, в моем случае вместо использования другого изображения arrow_rotated.png
я мог бы использовать образ arrow.png
и зеркалировать его и рисовать в контексте.