ios - 在 iOS 中画一个方框

Question

我正在创建一个单页应用程序，我想包含一个签名框，以便我的客户可以在我的 iPad 上签名。

我用谷歌搜索了它的生活，但无法弄清楚。我是 Swift 新手，并不能 100% 理解它。我有一些来自 YouTube channel 的代码，但这使用了整个屏幕。

import UIKit

class Canvas: UIView {
    override func draw(_ rect: CGRect) {
        //custom drawing
        super.draw(rect)

        guard let context = UIGraphicsGetCurrentContext() else {     return }

        //her are my lines
        // dummy data
        //        let startPoint = CGPoint(x: 0, y: 0)
        //        let endPoint = CGPoint(x: 100, y: 100)
        //
        //        context.move(to: startPoint)
        //        context.addLine(to: endPoint)

        context.setLineCap(.round)

        lines.forEach { (line) in
            for (i, p) in line.enumerated() {
                if i == 0 {
                    context.move(to: p)
                } else {
                    context.addLine(to: p)
                }
            }
        }

        context.strokePath()
    }

    //var line = [CGPoint]()

    var lines = [[CGPoint]]()

    override func touchesBegan(_ touches: Set<UITouch>, with event:     UIEvent?) {
        lines.append([CGPoint]())
    }

    //track finger as we move accross the screen
    override func touchesMoved(_ touches: Set<UITouch>, with event:      UIEvent?) {
        guard let point = touches.first?.location(in: nil) else {return}
        //print(point)

        guard var lastLine = lines.popLast() else {return}
        lastLine.append(point)
        lines.append(lastLine)

        //var lastLine = lines.last
        //lastLine?.append(point)

        //line.append(point)

        setNeedsDisplay()
    }
}

class ViewController: UIViewController {
    let canvas = Canvas()

    override func loadView() {
        self.view = canvas
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        canvas.backgroundColor = .white
    }
}

这是我最新的代码:

//
//  ViewController.swift
//  Draw
//
//  Created by Terry Cooke on 25/05/2019.
//  Copyright © 2019 Terry Cooke. All rights reserved.
//

import UIKit

class Canvas: UIView {
    @IBOutlet weak var canvas: Canvas!

    override func draw(_ rect: CGRect) {
        //custom drawing
        super.draw(rect)

        guard let context = UIGraphicsGetCurrentContext() else {return}

        context.setLineCap(.round)

        lines.forEach { (line) in
            for (i, p) in line.enumerated() {
                if i == 0 {
                    context.move(to: p)
                } else {
                    context.addLine(to: p)
                }
            }
        }

        context.strokePath()
    }

    var lines = [[CGPoint]]()

    override func touchesBegan(_ touches: Set<UITouch>, with event:     UIEvent?) {
        lines.append([CGPoint]())
    }

    //track finger as we move accross the screen
    override func touchesMoved(_ touches: Set<UITouch>, with event:      UIEvent?) {
        guard let point = touches.first?.location(in: nil) else {return}
        //print(point)

        guard var lastLine = lines.popLast() else {return}
        lastLine.append(point)
        lines.append(lastLine)

        setNeedsDisplay()
    }
}

class ViewController: UIViewController {
    //let canvas = Canvas()

    //override func loadView() {
        //self.view = canvas
    //}

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .blue

        //view.addSubview(canvas)

        //canvas.translatesAutoresizingMaskIntoConstraints = false

        //NSLayoutConstraint.activate([
//            canvas.widthAnchor.constraint(equalToConstant: 600),
//            canvas.heightAnchor.constraint(equalToConstant: 250),
//            canvas.centerXAnchor.constraint(equalTo: view.centerXAnchor),
//            canvas.centerYAnchor.constraint(equalTo: view.centerYAnchor)
//            ])
//
        //canvas.backgroundColor = .white
    }

        //canvas.backgroundColor = .white
}

这允许您在整个屏幕上进行绘制，但我会在 View 框或图像中包含它。

Answer 1

如果您只想要一个签名框，请将您的 Canvas 设为 view 的 subview :

摆脱loadView()并执行以下操作:

override func viewDidLoad() {
    super.viewDidLoad()

    view.backgroundColor = .blue

    view.addSubview(canvas)

    canvas.translatesAutoresizingMaskIntoConstraints = false

    NSLayoutConstraint.activate([
        canvas.widthAnchor.constraint(equalToConstant: 600),
        canvas.heightAnchor.constraint(equalToConstant: 250),
        canvas.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        canvas.centerYAnchor.constraint(equalTo: view.centerYAnchor)
    ])

    canvas.backgroundColor = .white
}

您还需要修复触摸点以将其显示在 View 本身中:

更改:

guard let point = touches.first?.location(in: nil) else {return}

到:

guard let point = touches.first?.location(in: self) else {return}

<小时/>

使用 Storyboard布置 Canvas :

您可以直接在 Storyboard 中添加 Canvas View ，而不是使用代码布局 Canvas:

1. 删除 let canvas = Canvas() 以及将其添加为 View 或 subview 的代码。
2. 在 Interface Builder 中，拖出一个 UIView 并将其放置在 UIImageView 上方您想要的位置。添加从 Canvas 边缘到 UIImageView 边缘的约束。
3. 单击 Canvas View ，并在身份检查器中将其类更改为 Canvas。

4. 控制从 Canvas View 拖动到您的代码，并添加名为 canvas 的 @IBOutlet:

   @IBOutlet weak var canvas: Canvas!
   

<小时/>

清除 Canvas

将此函数添加到您的 Canvas 类中:

func clearCanvas() {
    lines = []
    self.setNeedsDisplay()
}

向 ViewController 添加一个 Clear 按钮，并使用 canvas 导出调用 canvas.clearCanvas()删除Canvas:

@IBAction func clear(_ sender: UIButton) {
    canvas.clearCanvas()
}