如何在Swift 3中的两个视图之间画一条线?

时间:2017-06-16 16:07:07

标签: swift xcode macos

我需要帮助在Swift 3(Xcode 8)中的两个Outline视图之间绘制一条简单的线。 我的情况:

Main ViewController
|--- Main View
     |--- Outline View
     |--- Outline View

所以我需要帮助来获取两个大纲视图的坐标并用它们画一条线(线本身并不困难,更多的是获得坐标)。目标是绘制一条线(以编程方式) 连接 两个大纲视图(f.ex.从一个边缘到另一个边缘,或从顶部,...)

我已经尝试过:

class Line: NSView{
    var origin = CGPoint()
    var destination = CGPoint()

    required init?(coder aDecoder: NSCoder){
        super.init(coder: aDecoder)
    }

    init(fromPoint: CGPoint, toPoint: CGPoint){
        self.origin = fromPoint
        self.destination = toPoint

        super.init(frame: CGRect(origin: fromPoint, size: CGSize(width: destination.x - origin.x, height: destination.y - origin.y)))
    }

    override func draw(_ dirtyRect: NSRect){
        let myPath = NSBezierPath()

        myPath.move(to: CGPoint(x: origin.x, y: origin.y))
        myPath.line(to: CGPoint(x: destination.x - origin.x, y: destination.y - origin.y))
        myPath.stroke()
    }
}

class ViewController: NSViewController{
    override func viewDidLoad(){
        super.viewDidLoad()

       let line = Line(fromPoint: self.view.convert(CGPoint.zero, to: self.view.viewWithTag(1)), toPoint: self.view.convert(CGPoint.zero, to: self.view.viewWithTag(2)))
        view.addSubview(line)
    }
}

但那没有做任何事情。

感谢您的帮助!

谢谢

2 个答案:

答案 0 :(得分:1)

我现在解决了我的问题(或多或少)如下:

class Line: NSView{
    var fromPoint = CGPoint()
    var toPoint = CGPoint()

    func setPoints(fromPoint: CGPoint, toPoint: CGPoint){
        self.fromPoint = fromPoint
        self.toPoint = toPoint
    }

    override func draw(_ dirtyRect: NSRect) {
        let path = NSBezierPath()

        NSColor.green.setFill()
        path.move(to: fromPoint)
        path.line(to: toPoint)
        path.stroke()
    }
}


class ViewController: NSViewController{
     override function viewDidLoad(){
          super.viewDidLoad()

          let subview3 = Line(frame: self.view.bounds)
          subview3.setPoints(fromPoint: subview1.convert(CGPoint(x: subview1.bounds.maxX, y: subview1.bounds.maxY), to: self.view), toPoint: subview2.convert(CGPoint(x: subview2.bounds.minX, y: subview2.bounds.minY), to: self.view))
          self.view.addSubview(subview3)
     }
}

我需要知道如何在运行时执行此操作。我是否总是要创建一个新视图以绘制路径?

一个完整的例子:

//
//  ViewController.swift
//  DrawConnectViews
//
//  Created by T M on 17.06.17.
//  Copyright © 2017 TM. All rights reserved.
//

import Cocoa

class ViewController: NSViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let subview1 = CustomViewWithColor(frame: NSRect(origin: CGPoint(x: 10.0, y: 10.0), size: CGSize(width: 200.0, height: 200.0)))
        let subview2 = CustomViewWithColor(frame: NSRect(origin: CGPoint(x: 360.0, y: 360.0), size: CGSize(width: 200.0, height: 200.0)))

        // create a subview programatically:
        let subview3 = Line(frame: self.view.bounds)
        subview3.setPoints(fromPoint: subview1.convert(CGPoint(x: subview1.bounds.maxX, y: subview1.bounds.maxY), to: self.view), toPoint: subview2.convert(CGPoint(x: subview2.bounds.minX, y: subview2.bounds.minY), to: self.view))
        self.view.addSubview(subview3)

        subview1.setColor(color: NSColor.red)
        subview2.setColor(color: NSColor.blue)
        self.view.addSubview(subview1)
        self.view.addSubview(subview2)
    }

    override var representedObject: Any? {
        didSet {
        // Update the view, if already loaded.
        }
    }



}

class CustomViewWithColor: NSView{
    var color = NSColor()

    func setColor(color: NSColor){
        self.color = color
    }

    override func draw(_ dirtyRect: NSRect) {
        let path = NSBezierPath(rect: self.bounds)
        self.color.setFill()
        path.fill()



    }
}


class Line: NSView{
    var fromPoint = CGPoint()
    var toPoint = CGPoint()

    func setPoints(fromPoint: CGPoint, toPoint: CGPoint){
        self.fromPoint = fromPoint
        self.toPoint = toPoint
    }

    override func draw(_ dirtyRect: NSRect) {
        let path = NSBezierPath()

        NSColor.green.setFill()
        path.move(to: fromPoint)
        path.line(to: toPoint)
        path.stroke()
    }
}

产生以下内容: Output of program

答案 1 :(得分:0)

很多人会认为这是矫枉过正,但我​​要做的是添加一个子视图,其背景是线条颜色,其高度约束到所需的线条粗细,其前缘和后缘被约束到超级视图前缘和后缘。这样可以确保边框始终调整超视图的大小,这就是为什么要将边框添加为图层或自定义视图的draw(in:)以将边框绘制为路径不起作用。