Adjust CGPath size - ios

Question

Introduction
I have a CGPath I create from a SVG file using PocketSVG API. It all works fine.
The Problem
The problem is that the shape stretches for some reason, please take a look on this picture (the blue color is just to make is more visible to you, please ignore it, it should be ClearColor):
The Target
What do I want to achieve? I want to achieve a shape that goes all over the screen's width (I don't care about the height, it should modify itself according to the width), and sticks to the bottom of the screen, please take a look on this picture as well (please ignore the circular button):
The Code
The important part ;)
I have a subclass of UIView that draws this shape from the SVG file, it called CategoriesBarView. Then, on my MainViewController (a subclass of UIViewController) I'm creating an object of CategoriesBarView and setting it programmatically as a subview.
CategoriesBarView:
class CategoriesBarView: UIView {
override func layoutSubviews() {
let myPath = PocketSVG.pathFromSVGFileNamed("CategoriesBar").takeUnretainedValue()
var transform = CGAffineTransformMakeScale(self.frame.size.width / 750.0, self.frame.size.height / 1334.0)
let transformedPath = CGPathCreateCopyByTransformingPath(myPath, &transform)
let myShapeLayer = CAShapeLayer()
myShapeLayer.path = transformedPath
let blur = UIBlurEffect(style: .Light)
let effectView = UIVisualEffectView(effect: blur)
effectView.frame.size = self.frame.size
effectView.frame.origin = CGPointMake(0, 0)
effectView.layer.mask = myShapeLayer
self.addSubview(effectView)
}
}
MainViewController:
override func viewDidLoad() {
super.viewDidLoad()
let testHeight = UIScreen.mainScreen().bounds.size.height / 6 // 1/6 of the screen’s height, that is the height in the target picture approximately, doesn’t it?
let categoriesBarView = CategoriesBarView(frame: CGRect(x: 0, y: UIScreen.mainScreen().bounds.size.height - testHeight , width: UIScreen.mainScreen().bounds.size.width, height: testHeight))
categoriesBarView.backgroundColor = UIColor.blueColor() // AS I said, it should be ClearColor
self.view.addSubview(categoriesBarView)
}
Does anyone of you know what is the problem here and why the shape is stretching like that? I'll really appreciate if someone could help me here.
Thank you very much :)

Answer 1

Consider following code which draws a Square of 100x100 dimension. What i have done here is taken 100x100 as a base dimension(Because its easy to calculate respective ratio or scale dimension), as you can see i have defined scaleWidth and scaleHeight variable which represents your current scale for path. Scale is 1.0 at the moment which means it draws a square of 100x100, if you change it to 0.5 and 0.75 respectively it will draw a rectangle of 50X75 pixels. Refer Images which clearly depicts difference between scale width and height as 1.0 and 0.5 and 0.75 respectively.
CGFloat scaleWidth = 0.50f;
CGFloat scaleHeight = 0.75f;
//// Square Drawing
UIBezierPath* bezierSquarePath = [UIBezierPath bezierPath];
// ***Starting point of path ***
[bezierSquarePath moveToPoint: CGPointMake(1, 1)];
// *** move to x and y position to draw lines, calculate respective x & y position using scaleWidth & scaleHeight ***
[bezierSquarePath addLineToPoint: CGPointMake(100*scaleWidth, 1)];
[bezierSquarePath addLineToPoint: CGPointMake(100*scaleWidth, 100*scaleHeight)];
[bezierSquarePath addLineToPoint: CGPointMake(1, 100*scaleHeight)];
// *** end your path ***
[bezierSquarePath closePath];
[UIColor.blackColor setStroke];
bezierSquarePath.lineWidth = 1;
[bezierSquarePath stroke];
Image 1 : Represents 100x100 square using scaleWidth = 1.0 and scaleHeight = 1.0
Image 2 : Represents 50x75 square using scaleWidth = 0.50 and scaleHeight = 0.75
Note: In given images all the drawing is done in UIView's - (void)drawRect:(CGRect)rect method as only UIView is capable to draw. I have placed a UIView which is highlighted with GrayColor in images.
I believe it gives you a perspective about scaling a path to solve your problem as you can not use the same code but you can generate one using it.
Helpful Tool : If you are not expert in Graphics coding you can recommend to use PaintCode software which generates Objective-C code with UI. Thought there might be other softwares you can opt for.
Happy coding :)