How to intersect CAShapeLayers in iOS

Question

I have a plus (+) sign that's currently colored in blue but I would like to make it transparent so that the user can see the background. The plus layer is added to a bigger view. Setting the plus layer to clear color doesn't solve the problem.

class AddButtonView: UIView {
    ...

    private func setupPlusLayer() {
        let path = UIBezierPath()
        path.move(to: CGPoint(x: plusButton.frame.midX, y: plusButton.frame.midY-20))
        path.addLine(to: CGPoint(x: plusButton.frame.midX, y: plusButton.frame.midY+20))
        path.move(to: CGPoint(x: plusButton.frame.midX-20, y: plusButton.frame.midY))
        path.addLine(to: CGPoint(x: plusButton.frame.midX+20, y: plusButton.frame.midY))
        path.usesEvenOddFillRule = true

        let shapeLayer = CAShapeLayer()
        shapeLayer.fillRule = .evenOdd
        shapeLayer.path = path.cgPath
        shapeLayer.strokeColor = UIColor.blue.cgColor
        shapeLayer.fillColor = UIColor.blue.cgColor
        shapeLayer.lineWidth = 4

        // Add that `CAShapeLayer` to your view's layer:
        self.layer.addSublayer(shapeLayer)
    }
}

How can I make the plus sign transparent?

What is plus button layer? Maybe it should be self.layer add shapelayer — agibson007, Dec 15 '18 at 16:36

score 1 · Answer 1 · answered Dec 15 '18 at 15:45

1

Try using a .png image with the + made transparent it will work fine and you will not need to draw the plus.

answered Dec 15 '18 at 15:45

Omar Masri

349
1
8

It would be really cool to be able to draw the plus programmatically to save space and make the app resolution-proof. – Cesare Dec 15 '18 at 15:46
it will be cool, but it's a lot of work whiteout without that great outcome in my opinion. – Omar Masri Dec 15 '18 at 15:47

score 1 · Accepted Answer · answered Dec 15 '18 at 23:18

You can achieve that, by:

create circle CAShapeLayer (circleShape);
create inverted mask layer (inverted) with same color as circleShape. For this case you need a CGMutablePath with exactly the same circle path and the plus path. Also, don't forget to set inverted.fillRule = .evenOdd;
than you need a layer with transparent plus sign only (plusShape);
add circleShape as a sublayer to view's layer;
setup mask: circleShape.mask = inverted;
add plusShape as a sublayer to view's layer.

That's it! Now you have transparent plus sing. Example:

How to intersect CAShapeLayers in iOS

2 Answers2