CAShapeLayer strokeColor from image pattern UIColor to CGColor upside down

Question

I'm using CABasicAnimation to draw all UIBezierPaths i have in an Array using CAShapeLayer

CAShapeLayer *shapeLayer = [CAShapeLayer layer];    
shapeLayer.path = [path CGPath];
shapeLayer.strokeColor = path.color.CGColor;

My path.color is a UIColor from image pattern. When it is converted to CGColor the image pattern is upside down. I know that is because iOS and core graphics use different starting points for drawing.

I have tried

shapeLayer.transform = CATransform3DMakeRotation(M_PI, 0.0, 0.0, 1.0);

and

shapeLayer.geometryFlipped = YES;

But none of them worked.

How do I flip the strokeColor image pattern 180 degree to match with the origin UIColor?

Answer 1

As you have correctly suspected, the coordinate system differs. In this case, the origin is at the bottom left at (0, 0).

So what you could do to compensate that is to either flip the image yourself using an image editor or do it in code like so:

UIImage *flippedPatternImage = [UIImage imageWithCGImage:patternImage.CGImage scale:1.0f orientation:UIImageOrientationLeftMirrored];

UIColor *colorWithImagePattern = [UIColor colorWithPatternImage:flippedPatternImage];

And finally assign it to the strokeColor:

shapeLayer.strokeColor = path.color.CGColor;