Question

我正在将UIView子类化，并试图在屏幕上来回“拖动” CGRect。基本上，我想每次拖动手指都移动（重绘）矩形。到目前为止，我有以下代码：

var rectangle: CGRect {
    get {
        return CGRect(x: 200,
                    y: 200,
                    width: frame.width / 6,
                    height: 15)
    }

    set {}
}

override func draw(_ rect: CGRect) {
    let gesture = UIPanGestureRecognizer(target: self, action: #selector(dragRectangle(recognizer:)))
    addGestureRecognizer(gesture)
    drawRectangle(rect)
}

func drawRectangle(_ rect: CGRect) {
    let path = UIBezierPath(rect: rectangle)
    UIColor.black.set()
    path.fill()
}

@objc func dragRectangle(recognizer: UIPanGestureRecognizer) {
    let translation = recognizer.translation(in: self)
    rectangle = CGRect(x: rectangle.midX + translation.x, y: rectangle.midY + translation.y, width: rectangle.width, height: rectangle.height)
    setNeedsDisplay()
    recognizer.setTranslation(CGPoint.zero, in: self)
}

这是我第一次使用UIPanGestureRecognizer，所以我不确定其中涉及的所有细节。我在drawRectangle中设置了断点，并确认正在调用该断点。但是，无论我尝试将其拖动多少次，屏幕上的矩形都不会移动。怎么了？

Answer 1

这是您轻松实现的方式。只需复制粘贴并运行它即可。

//
//  RootController.swift
//  SampleApp
//
//  Created by Chanaka Caldera on 24/6/19.
//  Copyright © 2019 homeapps. All rights reserved.
//

import UIKit

class RootController: UIViewController {

    private var draggableView: UIView!
    private var pangesture: UIPanGestureRecognizer!

    override func viewDidLoad() {
        super.viewDidLoad()

        setdragview()

    }
}

extension RootController {
    fileprivate func setdragview() {
        draggableView = UIView()
        draggableView.translatesAutoresizingMaskIntoConstraints = false
        draggableView.backgroundColor = .lightGray
        view.addSubview(draggableView)

        let draggableviewConstraints = [draggableView.leftAnchor.constraint(equalTo: view.leftAnchor,constant: 10),
                                        draggableView.topAnchor.constraint(equalTo: view.topAnchor, constant: 64),
                                        draggableView.widthAnchor.constraint(equalToConstant: 100),
                                        draggableView.heightAnchor.constraint(equalToConstant: 40)]

        NSLayoutConstraint.activate(draggableviewConstraints)

        pangesture = UIPanGestureRecognizer()
        draggableView.isUserInteractionEnabled = true
        draggableView.addGestureRecognizer(pangesture)
        pangesture.addTarget(self, action: #selector(draggableFunction(_:)))

    }
}

extension RootController {
    @objc fileprivate func draggableFunction(_ sender: UIPanGestureRecognizer) {
        view.bringSubviewToFront(draggableView)
        let translation = sender.translation(in: self.view)
        draggableView.center = CGPoint(x: draggableView.center.x + translation.x, y: draggableView.center.y + translation.y)
        sender.setTranslation(CGPoint.zero, in: self.view)
        print("drag works : \(translation.x)")
    }
}

这是演示，

希望这会有所帮助。欢呼！

Answer 2

尝试这样（通过代码检查注释）：

@IBDesignable
class Rectangle: UIView {

    @IBInspectable var color: UIColor = .clear {
        didSet { backgroundColor = color }
    }
    // draw your view using the background color
    override func draw(_ rect: CGRect) {
        backgroundColor?.set()
        UIBezierPath(rect: rect).fill()
    }
    // add the gesture recognizer to your view
    override func didMoveToSuperview() {
        addGestureRecognizer(UIPanGestureRecognizer(target: self, action: #selector(pan)))
    }
    // your gesture selector
    @objc func pan(_ gesture: UIPanGestureRecognizer) {
        //  update your view frame origin
        frame.origin += gesture.translation(in: self)  
        // reset the gesture translation
        gesture.setTranslation(.zero, in: self)
    }
}

extension CGPoint {
    static func +=(lhs: inout CGPoint, rhs: CGPoint) {
        lhs.x += rhs.x
        lhs.y += rhs.y
    }
}

要在平移时在视图上绘制矩形，可以执行以下操作：

import UIKit

class ViewController: UIViewController {
    var rectangles: [Rectangle] = []
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addGestureRecognizer(UIPanGestureRecognizer(target: self, action: #selector(pan)))
    }
    @objc func pan(_ gesture: UIPanGestureRecognizer) {
        switch gesture.state {
        case .began:
            let rectangle = Rectangle(frame: .init(origin: gesture.location(in: view), size: .init(width: 0, height: 0)))
            rectangle.fillColor = .red
            rectangle.strokeColor = .white
            rectangle.lineWidth = 3
            view.addSubview(rectangle)
            rectangles.append(rectangle)
        case .changed:
            let distance = gesture.translation(in: view)
            let index = rectangles.index(before: rectangles.endIndex)
            let frame = rectangles[index].frame
            rectangles[index].frame = .init(origin: frame.origin, size: .init(width: frame.width + distance.x, height: frame.height + distance.y))
            rectangles[index].setNeedsDisplay()
            gesture.setTranslation(.zero, in: view)
        case .ended:
            break
        default:
            break
        }
    }
}

Sample Project

Answer 3

我弄清楚了为什么矩形不动的大多数问题。事实证明，我误解了Swift中变量获取器和设置器的工作方式。不过，我更改了这段代码：

var rectangle: CGRect {
    get {
        return CGRect(x: 200,
                    y: 200,
                    width: frame.width / 6,
                    height: 15)
    }

    set {}
}

成为lazy变量：

lazy var rectangle: CGRect = {
    return CGRect(x: 200,
                         y: 200,
                         width: self.frame.width / 6,
                         height: 15)
}()

首先需要get和set的原因是因为我在变量计算中使用了frame，只有在视图本身被完全实例化后才可用。我还对该代码进行了一些调整：

rectangle = CGRect(x: rectangle.midX + translation.x, y: rectangle.midY + translation.y, width: rectangle.width, height: rectangle.height)

并使用minX代替midX：

rectangle = CGRect(x: rectangle.minX + translation.x, y: rectangle.minY + translation.y, width: rectangle.width, height: rectangle.height)

这是因为CGRect的x和y参数分别为minX和minY。

这是一个很好的进展（至少矩形移动了）。但是，我无法弄清楚为什么矩形在释放鼠标后才切换位置，从而导致断断续续的运动。

使用UIPanGestureRecognizer拖动CGRect

3 个答案: