macOS ObjC下如何在NSView的drawRect绘制内容上叠加指定图片

最优方案选型结论 #

两种实现方式都可满足需求，普通场景优先使用NSImage原生方案，代码简洁且自动适配AppKit坐标系规则，底层Core Graphics方案仅在需要自定义底层渲染逻辑时使用；如果叠加图片不需要和底层绘制内容联动刷新，直接添加NSImageView子视图的方案性能最优。

NSImage实现步骤（推荐） #

• 第一步：在NSView子类中声明可自定义配置的属性，不要在drawRect中加载图片避免性能损耗

// Objective-C 示例
@interface CustomDrawView : NSView
@property (nonatomic, strong) NSImage *overlayImage;
@property (nonatomic, assign) NSPoint overlayPosition; // 叠加层位置，可根据View是否翻转自动适配
@property (nonatomic, assign) NSSize overlaySize; // 叠加层自定义尺寸
@end

// 外部设置图片路径时提前加载
- (void)setOverlayImagePath:(NSString *)path {
    self.overlayImage = [[NSImage alloc] initWithContentsOfFile:path];
    [self setNeedsDisplay:YES]; // 触发重绘
}

• 第二步：在drawRect:方法原有绘制逻辑的末尾添加图片绘制代码，保证叠加层在上层

- (void)drawRect:(NSRect)dirtyRect {
    // 原有基础绘制逻辑写在最前面
    [super drawRect:dirtyRect];
    // 原有绘制代码xxx

    // 叠加层绘制
    if (self.overlayImage && !NSEqualSizes(self.overlaySize, NSZeroSize)) {
        NSRect drawFrame = NSMakeRect(self.overlayPosition.x, self.overlayPosition.y, self.overlaySize.width, self.overlaySize.height);
        // 自动适配View坐标系翻转，使用SourceOver混合模式正常叠加
        [self.overlayImage drawInRect:drawFrame
                             fromRect:NSZeroRect
                            operation:NSCompositingOperationSourceOver
                             fraction:1.0
                       respectFlipped:YES
                                hints:nil];
    }
}

Core Graphics实现方案（仅底层自定义渲染场景使用） #

如果需要对图片做裁切、自定义混合模式、批量渲染等底层操作，可以选择Core Graphics实现，需要手动处理坐标系适配：

- (void)drawRect:(NSRect)dirtyRect {
    // 原有基础绘制逻辑xxx

    if (self.overlayImage && !NSEqualSizes(self.overlaySize, NSZeroSize)) {
        NSRect drawFrame = NSMakeRect(self.overlayPosition.x, self.overlayPosition.y, self.overlaySize.width, self.overlaySize.height);
        NSGraphicsContext *currentContext = [NSGraphicsContext currentContext];
        CGContextRef cgContext = currentContext.CGContext;
        CGImageRef cgImage = [self.overlayImage CGImageForProposedRect:nil context:currentContext hints:nil];
        
        CGContextSaveGState(cgContext);
        // 手动适配View翻转坐标系
        if (self.isFlipped) {
            CGContextTranslateCTM(cgContext, 0, NSMaxY(drawFrame));
            CGContextScaleCTM(cgContext, 1, -1);
            drawFrame.origin.y = 0;
        }
        CGContextDrawImage(cgContext, drawFrame, cgImage);
        CGContextRestoreGState(cgContext);
    }
}

额外性能优化建议 #

• 如果叠加图片不需要随底层绘制内容实时变化，直接添加NSImageView作为子视图即可，系统会单独缓存图层，不需要每次触发整个View的重绘，性能最优。
• 图片加载、解码逻辑不要放在drawRect中执行，drawRect调用频率高，重复加载会严重影响渲染性能。

内容的提问来源于stack exchange，提问作者GeraldTheGerm