macOS 开发-NSImageView

NSImageView是用来显示图像数据的视图。

概要

图像视图可以是静态的，也可以是可编辑的。静态图像视图仅显示您指定的图像。可编辑的图像视图对象使用户可以更改显示的图像。还可以配置图像视图以允许复制，粘贴，删除和拖动图像。

注意：仅当用户将图像拖动到图像视图的边界中时，图像视图才调用其action方法，并且该图像视图必须可编辑才能接收拖动的图像。如果要显示图像并响应图像中的单击，请改用NSButton对象。

初始化

NSImageView初始化api：

// 通过指定一个image创建对象
init(image: NSImage)

指定图像

// 图像视图显示的图像
var image: NSImage?

当我们需要显示一张图片的时候， 我们可以通过ImageView来处理：

lazy var imageView: NSImageView = {
    let imageView = NSImageView()
    imageView.frame = NSRect(x: 30, y: 30, width: 100, height: 100)
    imageView.image = NSImage(named: "1.jpeg")
    return imageView
}()
override func viewDidLoad() {
    super.viewDidLoad()
    setupSubviews()
}
private func setupSubviews() {
    view.addSubview(imageView)
}

指定视觉特征

// 图像周围出现的框架样式
var imageFrameStyle: NSImageView.FrameStyle
// 图像视图中单元格图像的对齐方式
var imageAlignment: NSImageAlignment
// 缩放模式用于使单元格的图像适合图像视图的框架
var imageScaling: NSImageScaling
// 指示图像视图是否自动播放动画图像
var animates: Bool

当我们需要显示gif图像时，animates则需要设置为true：

imageView.animates = true
imageView.image = NSImage(named: "1.gif")

响应用户事件

// 指示用户是否可以将新图像拖到图像视图中
var isEditable: Bool
// 指示图像视图是否允许用户剪切，复制和粘贴图像内容
var allowsCutCopyPaste: Bool

需要注意的是， 如果我们设置allowsCutCopyPaste为true时，我们向ImageView粘贴图片时，默认粘贴过去的是图片的系统图标，并不是真正的图片。如果需要显示真正的图片，我们需要从粘贴板中获取已经复制的Image，然后再将Image设置给ImageView：

lazy var imageView: NSImageView = {
    let imageView = NSImageView()
    imageView.frame = NSRect(x: 30, y: 30, width: 100, height: 100)
    imageView.action = #selector(pasteImage(_:))
    imageView.allowsCutCopyPaste = true
    return imageView
}()
@objc private func pasteImage(_ tager: NSImageView) {
    let pasteboard = NSPasteboard.general
    if let data = pasteboard.data(forType: NSPasteboard.PasteboardType.fileURL),
        let str =  String(data: data, encoding: .utf8),
        let url = URL(string: str),
        let image = NSImage(contentsOf: url)
    {
        tager.image = image
    }
}

扩展知识

图片缩放

NSImageView中如果图片比视图的边框小，图片则会被放大以适应边框的大小。但当图片宽高比和视频的宽高比不一致时，图片是不会填满整个View的，这个时候就会空白区域。在iOS里可以修改UIImageView的contentMode来缩放图片，但在Cocoa中是没有该功能，需求我们实现一个改变图片大小的方法来实现图片大小自适应NSImageView：

lazy var imageView: NSImageView = {
    let imageView = NSImageView()
    imageView.frame = NSRect(x: 30, y: 30, width: 100, height: 100)
    var image = NSImage(named: "1.jpeg")
    image = image?.resizeImage(NSSize(width: 100, height: 100))
    imageView.image = image
    return imageView
}()
extension NSImage {
    public func resizeImage(_ size: NSSize) -> NSImage {
        let targetFrame = NSRect(origin: CGPoint(x: 0, y: 0), size: size);
        let targetImage = NSImage(size: size)
        let selfSize = self.size
        let ratioHeight = size.height / selfSize.height
        let ratioWidth = size.width / selfSize.width
        var cropRect = NSZeroRect
        if ratioHeight >= ratioWidth {
            cropRect.size.width = floor (size.width / ratioHeight)
            cropRect.size.height = selfSize.height
        } else {
            cropRect.size.width = selfSize.width
            cropRect.size.height = floor(size.height / ratioWidth)
        }

        cropRect.origin.x = floor((selfSize.width - cropRect.size.width) / 2)
        cropRect.origin.y = floor((selfSize.height - cropRect.size.height) / 2)

        targetImage.lockFocus()
        self.draw(in: targetFrame,
                  from: cropRect,
                  operation: .copy,
                  fraction: 1.0,
                  respectFlipped: true,
                  hints: [
                            NSImageRep.HintKey.interpolation : NSImageInterpolation.low.rawValue
                          ])

        targetImage.unlockFocus()
        return targetImage
    }  
}

小结

ImageView只要是用来显示图片，比如在一些相册、桌面图片应用中使用得非常频繁，也是最常用的组件之一。在这之前，一直在说基础控件，那么在下一节中， 我们将来搞有意思的事情。源码请访问这里：https://github.com/dengyhgit/macOS-Dev-Demo/tree/master/NSImageView， 如对你有帮忙，别忘点亮小⭐⭐。更多内容，请关注我的公众号：

关注公众号