如何在uiview绘图(swift5)上放置图片

时间:2019-05-26 18:05:27

标签: swift uiview draw uibezierpath cgpoint

我下面的代码在绘图区域后放置一个。因此,如您在下图中所看到的。我画的任何东西都排在前面。我想做,所以我画的东西都落后了。我的所有代码都附在下面。该图像也位于Assets文件夹中。

class ViewController: UIViewController {
    var editBtn = UIButton()
    var canVasView = UIView()
    var path = UIBezierPath()
    var startPoint = CGPoint()
    var touchPoint = CGPoint()

    func addArrowImageToButton(button: UIButton, arrowImage:UIImage = #imageLiteral(resourceName: "graph.png") ) {
        let btnSize:CGFloat = 32
        let imageView = UIImageView(image: arrowImage)
        let btnFrame = button.frame

        button.bringSubviewToFront(imageView)
    }

    override func viewDidAppear(_ animated: Bool) {
        self.addArrowImageToButton(button: editBtn)
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        setup()
        draw()
        view.addSubview(editBtn)
        view.addSubview(canVasView)

        editBtn.backgroundColor = UIColor.orange
        canVasView.backgroundColor = UIColor.purple

        editBtn.translatesAutoresizingMaskIntoConstraints = false
        canVasView.translatesAutoresizingMaskIntoConstraints = false

        let myLayer = CALayer()
        let myImage = UIImage(named: "graph.png")?.cgImage
        myLayer.frame = CGRect(x: 40, y: -80, width: 300, height: 300)
        myLayer.contents = myImage
        canVasView.layer.addSublayer(myLayer)

        self.view.addSubview(canVasView)

        NSLayoutConstraint.activate ([
            canVasView.trailingAnchor.constraint(equalTo: view.centerXAnchor, constant :175),
            canVasView.topAnchor.constraint(equalTo: view.centerYAnchor, constant : 100),
            canVasView.widthAnchor.constraint(equalToConstant: 350),
            canVasView.heightAnchor.constraint(equalToConstant: 180),

            editBtn.trailingAnchor.constraint(equalTo: view.centerXAnchor, constant :175),
            editBtn.topAnchor.constraint(equalTo: view.centerYAnchor, constant : 0),
            editBtn.widthAnchor.constraint(equalToConstant: 350),
            editBtn.heightAnchor.constraint(equalToConstant: 180),
        ])

        editBtn.addTarget(self, action: #selector(didTapEditButton), for: .touchUpInside)
    }

    @objc func didTapEditButton() {
        path.removeAllPoints()
        canVasView.layer.sublayers = nil
        canVasView.setNeedsDisplay()

        self.addArrowImageToButton(button: editBtn)
    }

    func setup(){
        editBtn.layer.cornerRadius = 20
        canVasView.clipsToBounds = true
        canVasView.isMultipleTouchEnabled = false
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        let touch = touches.first
        if let point = touch?.location(in: canVasView){
            startPoint = point
        }
    }

    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        let touch = touches.first
        if let point = touch?.location(in: canVasView){
            touchPoint = point
        }

        path.move(to: startPoint)
        path.addLine(to: touchPoint)
        startPoint = touchPoint
        draw()
    }

    func draw() {
        let strokeLayer = CAShapeLayer()
        strokeLayer.fillColor = nil
        strokeLayer.lineWidth = 5
        strokeLayer.strokeColor = UIColor.blue.cgColor
        strokeLayer.path = path.cgPath
        canVasView.layer.addSublayer(strokeLayer)
        canVasView.setNeedsDisplay()
    }
}

enter image description here

1 个答案:

答案 0 :(得分:0)

要在线条图像后面绘制,您需要在其后面添加笔触层。 为此,请在viewDidLoad之外声明myLayer,然后将绘图函数更改为:

func draw() {
    let strokeLayer = CAShapeLayer()
    strokeLayer.fillColor = nil
    strokeLayer.lineWidth = 5
    strokeLayer.strokeColor = UIColor.blue.cgColor
    strokeLayer.path = path.cgPath
    canVasView.layer.insertSublayer(strokeLayer, below: myLayer) //draw behind myLayer
    canVasView.setNeedsDisplay()
}