macOS NSImage显示颠倒问题

最近在做NSTextView中显示自定义NSTextAttachment的时候，发现显示自定义Attachment中的图片总是颠倒的，如下图。

image.png

查阅资料后发现是坐标系导致的，APPKit中那些[ isFlipped]方法返回YES的控件大多都会出现这种问题。

如果你去继承一个TextView重写以下方法

- (BOOL)isFlipped{
   return NO;
}

会发现图片颠倒问题解决了，但是TextView的排版从左下角开始了，也就是打字是从左下角开始出现，而非平时的左上角一行一行往下添加。所以重写这个坐标系的方法是不可行的。

解决的方法有两种

1.直接调用方法设置是否颠倒

- (instancetype)initWithEmotion:(Emotion *)emotion
                  emotionBounds:(CGRect)emotionBounds
{
    self = [super init];
    if (self) {
        _emotion = emotion;
        
        self.bounds = emotionBounds;
        
        NSImage *image = _emotion.emotionImage.copy;
        
        [image setFlipped:YES];
        //10.6以后就废弃的方法 目前在10.13.2 (17C88)上测试仍然生效
        //不推荐使用
        
        self.image = image;
        
    }
    return self;
}

使用该方法简单粗暴，一句解决。但是因为这个方法已经废弃，说不准什么时候就会失效，所以不是很推荐

2.利用NSAffineTransform旋转、反转图片

我一开始以为这个坐标系导致的颠倒问题只是旋转了180，但是经过尝试旋转180度以后才发现这个颠倒其实是竖直方向的镜像，所以如果用旋转的方法只是旋转没用，还需要再来一次水平方向的反转。或者直接进行竖直方向的反转。

- (instancetype)initWithEmotion:(Emotion *)emotion
                  emotionBounds:(CGRect)emotionBounds
{
    self = [super init];
    if (self) {
        _emotion = emotion;
        
        self.bounds = emotionBounds;
        
        self.image = [self turnUpsideDownAndMirrorSourceImage:_emotion.emotionImage];
        
    }
    return self;
}

- (NSImage *)turnUpsideDownAndMirrorSourceImage:(NSImage *)sourceImage
{
    NSSize srcSize = [sourceImage size];
    float srcw = srcSize.width;
    float srch= srcSize.height;
    
    if((!sourceImage) || srcw == 0 || srch == 0)
    {
        return nil;
    }
    
    NSRect rotateRect = NSMakeRect(0, 0, srcw, srch);
    
    NSImage *rotatedImage = [[NSImage alloc] initWithSize:srcSize];
    
    [rotatedImage lockFocus];
    
    NSAffineTransform *transform = [NSAffineTransform transform];
    
    //方法一：180度旋转
    //其实直接用下面的方法就可以了，但是查资料的过程发现旋转的资料也比较少，顺便就一起放出来了，有需要可以根据情况修改旋转角度
    float rotateDeg = 180;
    
    [transform translateXBy:(0.5 * srcw) yBy: ( 0.5 * srch)];  //将坐标系原点移至图片中心点
    [transform rotateByDegrees:rotateDeg];//以图片中心为原点，旋转传入的度数 
    [transform translateXBy:(-0.5 * srcw) yBy: (- 0.5 * srch)]; //将坐标系回复原状
    
    //水平镜像反转
    [transform scaleXBy:-1.0 yBy:1.0];
    
    [transform translateXBy:-srcw yBy:0];

    //方法二：竖直镜像反转
//    [transform scaleXBy:1.0 yBy:-1.0];
//    
//    [transform translateXBy:0 yBy:-srch];
    
    [transform concat];
    
    [sourceImage drawInRect:rotateRect fromRect:NSZeroRect operation:NSCompositeCopy fraction:1.0];
    
    [rotatedImage unlockFocus];

    return rotatedImage;
    
}

image.png

mac资料查阅不易，如果对你有帮助请点个赞啦~