Question

我正在针对MacOS使用Xcode 9.2编写Swift程序，目的是显示具有三个点的简单折线图。

该程序的目标是使用苹果的核心图形创建折线图。它是具有三个点的水平线图，一个点在中心，每个端点。如果鼠标指针位于中心点上方，我希望显示一些文字，例如“ xyz”，而当鼠标移开时，文字将消失。端点将具有包含数字的标签，但现在我们将其称为“最小”和“最大”。

到目前为止，使用XCode的游乐场，我已经设法使用以下代码来显示非常笨拙的折线图：

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，此折线图更加简洁，这正是我想要的，但是我希望折线是水平的而不是对角线。

预先感谢您的帮助。

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()
    }
}

或者，您可以将路径属性为UIBezierPath的CAShapeLayer子层添加到UIView。

使用Swift绘制简单的折线图

1 个答案: