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

FreeCultureBoy macOS Node.js