Group Group Group Group Group Group Group Group Group

How to place image on top of uiview drawing (swift5)

#1

My code below places a behind a drawing area. So as you can see in the image below. Anything I draw goes in front of the lines. I want to make so whatever i draw goes behind the lines. All of my code is attached below. The image is in the assets folder as well.

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

#2

hi @timswift,
It is difficult to debug the code, however the problem you describe suggests that the layer where you are drawing when added to the canvas is added on top, you can specifically use addSublayer with as specific index or using the below parameter.

cheers,

#3

I have found a answer via stack overflow thanks.