使用Swift绘制简单的折线图

Question

我正在使用Xcode 9.2编写一份Swift程序，目的是展示一个有三个点的简单折线图。该程序的目标是使用苹果的核心绘图功能创建一个水平折线图，其中有三个点，一个在中心，另外两个在两端。如果鼠标指针在中心点上方，我希望能显示一些文本，例如“xyz”，当鼠标移开时，文本将消失。两端点将包含数字标签，但现在我们称其为“min”和“max”。目前在使用 XCode 的 playground 中，我已经成功地展示了一个非常笨重的折线图，使用如下代码：

class MyView : NSView {
   override func draw(_ rect: NSRect) {
       NSColor.green.setFill()
       var path = NSBezierPath(rect: self.bounds)
       path.fill()

  let leftDot = NSRect(x: 0, y: 0, width: 10, height: 20)
  path = NSBezierPath(ovalIn: leftDot)
  NSColor.black.setFill()
  path.fill()

  let rightDot = NSRect(x: 90, y: 0, width: 10, height: 20)
  path = NSBezierPath(ovalIn: rightDot)
  NSColor.black.setFill()
  path.fill()

  let centerDot = NSRect(x: 50, y: 0, width: 10, height: 20)
  path = NSBezierPath(ovalIn: centerDot)
  NSColor.black.setFill()
  path.fill()

  }
}

let viewRect = NSRect(x: 0, y: 0, width: 100, height: 10)
let myEmptyView = MyView(frame: viewRect)

该代码生成的折线图看起来比较笨重，如下所示：

下面的图表来自Excel，这个折线图更加清晰，也是我想要的，但我希望折线是水平的而不是斜的。

非常感谢您的帮助。

- TurboPascal

---

你不是在画一条线，而是在填充一个矩形。 - rmaddy

我对Swift和MacOS编程很陌生，所以我通过填充一个矩形来接触它。你怎么画一条直线？ - TurboPascal

Answer 1

为了画出类似于您提供的示例图像的水平线，我采用了您的示例代码并进行了修改。这将产生以下结果：

代码将如下所示：

override func draw(_ rect: NSRect) {
    NSColor(red: 103/255, green: 146/255, blue: 195/255, alpha: 1).set()
    let line = NSBezierPath()
    line.move(to: NSMakePoint(10, 5))
    line.line(to: NSMakePoint(90, 5))
    line.lineWidth = 2
    line.stroke()

    NSColor(red: 163/255, green: 189/255, blue: 218/255, alpha: 1).setFill()

    let origins = [NSPoint(x: 10, y: 1),
                   NSPoint(x: 50, y: 1),
                   NSPoint(x: 90, y: 1)]

    let size = NSSize(width: 8, height: 8)

    for origin in origins {
        let quad = NSBezierPath(roundedRect: NSRect(origin: origin, size: size), xRadius: 2, yRadius: 2)
        quad.fill()
        quad.stroke()
    }
}

iOS更新

由于评论区的请求，这里提供iOS版本：

override func draw(_ rect: CGRect) {
    UIColor(red: 103/255, green: 146/255, blue: 195/255, alpha: 1).set()
    let line = UIBezierPath()
    line.move(to: CGPoint(x: 10, y:5))
    line.addLine(to: CGPoint(x: 90, y:5))
    line.lineWidth = 2
    line.stroke()

    UIColor(red: 163/255, green: 189/255, blue: 218/255, alpha: 1).setFill()

    let origins = [CGPoint(x: 10, y: 1),
                   CGPoint(x: 50, y: 1),
                   CGPoint(x: 90, y: 1)]

    let size = CGSize(width: 8, height: 8)

    for origin in origins {
        let quad = UIBezierPath.init(roundedRect: CGRect(origin: origin, size: size), cornerRadius: 2)
        quad.fill()
        quad.stroke()
    }
}

另外，您可以将一个path属性为UIBezierPath的CAShapeLayer子层添加到UIView中。

- Stephan Schlecht

---

你如何在iPhone应用程序中实现这一点（因为NSView是针对MacOS的）？ - Greg