在MacOS中绘制交互式2D图的最佳方法

Question

我正在Swift中开发一个MacOS应用程序，其中用户根据2D时间线记录关键帧值。我的积分存储为字典，其中的键是时间，值是当时的对应值。

我完全可以将我的点绘制为静态2D线形图，并在该线上绘制圆圈以指示实际记录的数据点没有问题。即使有大量的数据点，绘制线也非常方便，甚至包括在录制过程中“实时”重新计算和绘制线。

然后，我被困住的地方就是获取2D图并将其转变为“交互式”图，用户可以在其中选择一个或多个点，然后将它们拖动到周围，从而更改相应数据中存储的点。

到目前为止，我一直在尝试在NSView中绘制线条，然后代替为每个点作为NSBezierPath绘制圆，而是为每个绘制点绘制圆并包含所有mouseDown的点创建一个自定义NSView实例/ mouseDragged / etc。功能并将其添加为主线视图的子视图。尽管这种“技术上”有效，但它在计算并丢弃所有这些视图时将机器磨碎了，显然，更多的点等于更多的阻力。

我是否缺少以更有效的方式完成此任务的某种方法？我一直在搜索，尽管有一百万个框架和方法可用于绘制大型数据集的2D图，但我还没有找到一个单独的示例来对用户进行“交互”的数据操作。

Answer 1

此演示使用NSPoints的数据数组创建一个交互式图形，该图形允许用鼠标分别移动数据点。它不能解决多点选择问题，因此需要扩大规模以适合您的需求（我测试的得分没有超过20分；希望它不会陷入困境）。通过添加“ main.swift”文件并将现有的AppDelegate替换为下面的相应类，可以从终端或Xcode中的命令行运行该演示。

// May be run in Terminal using:
// swiftc ptinrect.swift -framework Cocoa -o ptinrect && ./ptinrect
// or in Xcode with instructions above.

import Cocoa

let path = NSBezierPath()
var R = [NSRect]()
var selected = [Bool]()
var data = [NSPoint]()

class CustomView: NSView {

override func draw(_ rect: NSRect ) {
 let bkgrnd = NSBezierPath(rect: rect)
 NSColor.lightGray.set()
 bkgrnd.fill()
// circles
 NSColor.black.set()
 for x in stride(from:0, to:R.count, by:1) {
 let circle = NSBezierPath(ovalIn:R[x])
  circle.fill()
 }
// lines
 NSColor.white.set()
 path.lineWidth = 2.0
 path.move(to:data[0])
 for x in stride(from:0, to:data.count, by:1) {
  path.line(to:data[x])
 }
 path.stroke()
}

override func mouseDown(with event: NSEvent) {
  let wndPt: NSPoint = event.locationInWindow
  let pt:NSPoint = self.convert(wndPt, from: nil)
  print(pt)
  print(R.count)
  for x in stride(from:0, to:R.count, by:1) {
   if NSPointInRect(pt,R[x]){
   selected[x] = true
   print("mouse down in rect: \(x)")
   print([selected])
   } else {selected[x] = false}
  }
}

override func mouseUp(with event: NSEvent) {
 let wndPt: NSPoint = event.locationInWindow
 let pt:NSPoint = self.convert(wndPt, from: nil)
  print(pt)
  for x in stride(from:0, to:R.count, by:1) {
   if NSPointInRect(pt,R[x]){
   print("mouse up in rect: \(x)")
   }
  }
 path.removeAllPoints()
 self.needsDisplay = true
}

override func mouseDragged(with event: NSEvent) {
 let wndPt: NSPoint = event.locationInWindow
 let pt:NSPoint = self.convert(wndPt, from: nil)
  for x in stride(from:0, to:R.count, by:1) {
   if (selected[x] == true){
   print("mouse dragged in rect: \(x)")
   data[x] = pt
   R[x].origin.x = pt.x - 5
   R[x].origin.y = pt.y - 5
   }
  }
 path.removeAllPoints()
 self.needsDisplay = true
}

}

class ApplicationDelegate: NSObject, NSApplicationDelegate {
 var window: NSWindow!

func buildPath() {
var count: CGFloat = 0
 for x in stride(from:0, to:20, by:1) {
  let offset = CGFloat(count * 20.0)
  data.append(NSPoint.init())
  data[x] = NSMakePoint( 20 + offset, 20 + offset)
  R.append(NSRect.init())
  // x,y coordinates -5 to center rect on data pt
  R[x] = NSMakeRect(data[x].x - 5,data[x].y - 5,10,10)
  selected.append(Bool.init())
  selected[x] = false
  count += 1
 }
 print([data])
 path.move(to:data[0])
  for x in stride(from:0, to:data.count, by:1) {
  path.line(to:data[x])
 }
}

func buildMenu() {
let mainMenu = NSMenu()
NSApp.mainMenu = mainMenu
// **** App menu **** //
let appMenuItem = NSMenuItem()
mainMenu.addItem(appMenuItem)
let appMenu = NSMenu()
appMenuItem.submenu = appMenu
appMenu.addItem(withTitle: "Quit", action:#selector(NSApplication.terminate), keyEquivalent: "q")
}

func buildWnd() {
let _wndW : CGFloat = 800
let _wndH : CGFloat = 600

window = NSWindow(contentRect: NSMakeRect( 0, 0, _wndW, _wndH ), styleMask: [.titled, .closable, .miniaturizable, .resizable], backing: .buffered, defer: false)
 window.center()
 window.title = "Swift Test Window"
 window.makeKeyAndOrderFront(window)

// **** Custom view **** //
 let view = CustomView( frame:NSMakeRect(20, 60, _wndW - 40, _wndH - 80))
 view.autoresizingMask = [.maxXMargin,.minYMargin, .height, .width]
 window.contentView!.addSubview (view)

// **** Quit btn **** //
 let quitBtn = NSButton (frame:NSMakeRect( _wndW - 50, 10, 40, 40 ))
 quitBtn.bezelStyle = .circular
 quitBtn.autoresizingMask = [.minXMargin,.maxYMargin]
 quitBtn.title = "Q"
 quitBtn.action = #selector(NSApplication.terminate)
 window.contentView!.addSubview(quitBtn)
}

func applicationDidFinishLaunching(_ notification: Notification) {
 buildMenu()
 buildWnd()
 buildPath()
}

func applicationShouldTerminateAfterLastWindowClosed(_ sender: NSApplication) -> Bool {
 return true
}

}
let appDelegate = ApplicationDelegate()

// **** main.swift **** //
let application = NSApplication.shared
application.setActivationPolicy(NSApplication.ActivationPolicy.regular)
application.delegate = appDelegate
application.activate(ignoringOtherApps:true)
application.run()