NSImageView是用來顯示圖像數(shù)據(jù)的視圖。
概要
圖像視圖可以是靜態(tài)的，也可以是可編輯的。靜態(tài)圖像視圖僅顯示您指定的圖像。可編輯的圖像視圖對(duì)象使用戶可以更改顯示的圖像。還可以配置圖像視圖以允許復(fù)制，粘貼，刪除和拖動(dòng)圖像。
注意：僅當(dāng)用戶將圖像拖動(dòng)到圖像視圖的邊界中時(shí)，圖像視圖才調(diào)用其action方法，并且該圖像視圖必須可編輯才能接收拖動(dòng)的圖像。如果要顯示圖像并響應(yīng)圖像中的單擊，請(qǐng)改用
NSButton對(duì)象。
初始化
NSImageView初始化api：
// 通過指定一個(gè)image創(chuàng)建對(duì)象
init(image: NSImage)
指定圖像
// 圖像視圖顯示的圖像
var image: NSImage?
當(dāng)我們需要顯示一張圖片的時(shí)候， 我們可以通過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)
}
指定視覺特征
// 圖像周圍出現(xiàn)的框架樣式
var imageFrameStyle: NSImageView.FrameStyle
// 圖像視圖中單元格圖像的對(duì)齊方式
var imageAlignment: NSImageAlignment
// 縮放模式用于使單元格的圖像適合圖像視圖的框架
var imageScaling: NSImageScaling
// 指示圖像視圖是否自動(dòng)播放動(dòng)畫圖像
var animates: Bool
當(dāng)我們需要顯示gif圖像時(shí)，animates則需要設(shè)置為true：
imageView.animates = true
imageView.image = NSImage(named: "1.gif")
響應(yīng)用戶事件
// 指示用戶是否可以將新圖像拖到圖像視圖中
var isEditable: Bool
// 指示圖像視圖是否允許用戶剪切，復(fù)制和粘貼圖像內(nèi)容
var allowsCutCopyPaste: Bool
需要注意的是， 如果我們?cè)O(shè)置allowsCutCopyPaste為true時(shí)，我們向ImageView粘貼圖片時(shí)，默認(rèn)粘貼過去的是圖片的系統(tǒng)圖標(biāo)，并不是真正的圖片。如果需要顯示真正的圖片，我們需要從粘貼板中獲取已經(jīng)復(fù)制的Image，然后再將Image設(shè)置給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
}
}
擴(kuò)展知識(shí)
圖片縮放
NSImageView中如果圖片比視圖的邊框小，圖片則會(huì)被放大以適應(yīng)邊框的大小。但當(dāng)圖片寬高比和視頻的寬高比不一致時(shí)，圖片是不會(huì)填滿整個(gè)View的，這個(gè)時(shí)候就會(huì)空白區(qū)域。在iOS里可以修改UIImageView的contentMode來縮放圖片，但在Cocoa中是沒有該功能，需求我們實(shí)現(xiàn)一個(gè)改變圖片大小的方法來實(shí)現(xiàn)圖片大小自適應(yīng)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
}
}
小結(jié)
ImageView只要是用來顯示圖片，比如在一些相冊(cè)、桌面圖片應(yīng)用中使用得非常頻繁，也是最常用的組件之一。在這之前，一直在說基礎(chǔ)控件，那么在下一節(jié)中， 我們將來搞有意思的事情。源碼請(qǐng)?jiān)L問這里：https://github.com/dengyhgit/macOS-Dev-Demo/tree/master/NSImageView， 如對(duì)你有幫忙，別忘點(diǎn)亮小??。更多內(nèi)容，請(qǐng)關(guān)注我的公眾號(hào)：
