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， 如对你有帮忙，别忘点亮小⭐⭐。更多内容，请关注我的公众号：
