Will come back again in this lesson we're going to use a combination of the things that we learned in
the past few lessons as well as the things that we learned when we were dealing with touches and gestures
to make a busy path curved.
So let's first have an understanding of what that actually is.
If you do a quick Google search on bezier pads you will end up with results such as these ones which
are essentially curves.
I think such as this one that they have control points that those control points essentially decide
about the curvature of the curve.
If you're familiar with software such as Adobe Photoshop or Adobe Illustrator or any 3D software you
probably have seen these kind of controlled cherub's a lot of times and that's essentially what you're
going to do in this application.
Now before I jump into coding I want to actually show you the final outcome which is a curve like this.
So I have a little control point which is a circle and that circle has a direct line to the beginning
of the curve.
And I can actually control the different portions of the curve or the curvature of the curve using that.
Now in my example I'm only controlling one side of the curve and I leave it to you to find out you know
how you could switch between different corners and for every point or what we call every knot on the
curve you could have different controls.
So that's essentially the goal of the lesson.
And as you can imagine we have to draw the curve.
We have to draw the straight or the direct line and we have to draw the circle.
So with all of that in mind let's get thought that in court.
So I'm going to go in here say I have a busy a curve.
And in here just like the last time I'm going to do everything inside the one you view.
I'm not going to add anything into my actual view controller so I'm actually going to close this one
down and I'm going to have a class which is this Colyandro view just like the last time you live you
and it has a function that you're overriding called draw and that's the part that really matters to
us.
So let's go ahead and start with the right thing different things that we need for here.
The first thing I'm actually going to write is essentially drawing that little circle to do that.
I'm going to go ahead and say let's get ourselves a point let's call this fun or QUANTRILL point or
handle point.
So time that point becomes a C.G. point and I'm like give it an initial value of let's say the initial
one is out of 100 and hundred fifty somewhere around here.
At the very beginning.
So I have those two values taken care of.
Then in my draw I'm going to get a context.
I'm going to say let context to be your graphics card and context you could of course when you fled
but I know that context is going to work within the drawing so I don't need to really do that.
And then I'm going to get myself a an ellipse or essentially a circle based on here.
So I'm going to say context dot filled lips and that's going to be a CGU raked hand that seizure is
going to be.
Let's go ahead and say he's got X light weight and height.
I'm going to say X and Y if he's going to be over this handle point is it's 100 point x 100 point that
y.
And let's give it a man 1 or a static width and height of let's say 20 20 units or 20 and 20 point zero.
And then the next thing that I want to remind you is that these two values are quietly on the left corner
or the top left corner of of the ellipse.
So it helps if you subtract half of it from it.
So they become the center.
So I'm going to say minus 10 and there's an error in here.
Oh Dot why.
Ten point zero.
So this essentially makes sure that my circle instead of being drawn from the top left corner of the
handle point is drawn on top of the handle points with a handle point becomes the center of it.
Now I also have to set the color for this.
I'm When I say context Dart said fill color and I'm going to say give it to you.
I corner dot Orange that was orange wasn't it.
Yes orange dot color.
Not that it really matters but I thought it would be better if you were consistent with the original
design.
So by now we should be able to see at least that little circle.
And the way you can test this just like the last time I can go to my main storyboard have a view and
then drop this you I view may be around here.
I'm going to give it a little bit of a different background color.
And I'm going to say it's class E's draw we'll just like the last time we had done it.
And let's go ahead and run this application.
So now we have that little orange circle showing up somewhere in the screen.
But obviously it's not really doing anything for us because we haven't really managed that part just
yet.
So to do that but I'm going to do is I'm going to go ahead and add a touch move method.
So I'm going to go to my draw of you or my drawing class essentially and I'm going to say touches move
and that's a function of the UI kit.
So it's also within the body of the class.
So it has to be overridden.
So I'm going to say if the touch has moved beyond anything that you might want to do here is one thing
I know I have to do and that is self which is the same drove you not set and needs display.
So I have to tell him that hey something has changed redraw.
That's the most important part right now.
The other thing that they want to do is I want to say well when you're redrawing changed his handle
point to where ever I am so I'm going to say handle point becomes touches dart first dart location in
view and the location I'm looking for is within here within self itself.
Now I might get an error for the option on my other in here.
And that's that's perfectly fine.
So they have to do is I have to say this is definitely an existing location because this touch has landed
within this view simply because I am inside the same draw of view and I'm inside an instance of that.
So let's go ahead and check this one out.
And now if I touch I can actually carry around that object to me.
Now this is an important distinction and sometimes I've seen a students are struggling with it.
You have to understand that this isn't the same stance of of a circle that it was before.
Every time we move we redraw the scene so dysfunction gets a recall.
So everything gets cleared out and at least another group of objects they get drawn back.
So it's a redrawing of the scene is not the same distance anymore.
So you have to be very careful about not supporting anything within the body of the draw.
It is not the same as using an instance of a of a view for instance.
So now you have that taken care of and we have the drawing we have the first circle.
Let's go ahead and draw our.
So far I'm going to say let's pass.
Just like the last time you a busy airport just like the last time.
And I'm going to say Pat Dodd line it or it's let's make it five this time.
I'm also going to have to give it a color so I'm going to say you're white color dot black for instance
dot set a stroke.
So that becomes the color of the pants.
And then I'm going to say pants doth move to point.
Let's move it to somewhere.
C.G. point of I think locations such as I don't have that up anymore but I think somebody like maybe
a hundred and a hundred would do because my handle appointee's at a hundred and hundred fifty so that
stuff somehow working for me.
So I moved it there and then I'm going to go ahead let me get myself a little bit better space in here.
So you know what you're working on.
And then I'm going to go ahead and say pass.
Not that not linear line.
I'd quite careful to eat to the point that I want to add to it is let's say C.G. point of three hundred
and three hundred and a control point is the sky pandal point what we have done is we have drawn a new
bezier path.
But this time it is a curved one and it starts at 100 hundred and it ends at 200 and 300 and it has
this object in the middle of feet as the control point for it.
And of course we have to do a path stroke at the end so path is stroke.
Now let's run this code.
Now I now if I try to move that little circle every time I do it it's going to redraw itself.
It's going to redraw the curve between that point and this point.
But with this control vertex and that is exactly what you wanted.
Well they did have into regional design.
I had a little care at direct one going between the starting point of the curve and the circle.
So actually going to go ahead and add that one as well which is the easiest part of all I would say
let's pass or actually have used power before so let's call it let's let direct part be a few busy parts
just like the last time.
And then I'm going to be able to copy a lot of this stuff so
let's make it one and then DeCarlo let's may create a green maybe so we can see it is here and then
I'm going to say direct parts move it to exactly the same place because we have to start it from that
place and then I'm going to say direct parts add the line but the line we want to do want to add it
to the handle point.
So we want to always go between the starting point and the underlying point which is the handle point
end point which is the handle point.
And of course I have to say that the.
Just so I can make things a little bit easier for myself and perhaps for you I'm actually going to put
these two values at the point of the beginning and the ending into two variables.
So I'm going to say let the starting point to be a CGU point of and the value for it is this.
That is the value for it.
So that's one.
And I'm going to say ending point is going to be.
It's easier to get like this.
Two hundred and three hundred.
So I'm going to start between this starting point.
So they both start at the same starting point and one of them at the quad the one the one that is actually
curve that 20 is going to be ending at the end point with this control point.
And this one ends at the handle point itself.
Let's go ahead and read on this application and if it all works we should be able to see what we have
at the very beginning which is exactly like the.
So that's it may change a bezier a chair shape line and we cover the local Afghans in it.
We redid some of our graphics context.
We did another direct part.
We did a curved path and we also added the touches moved within the body of a of a view which is really
helpful at times.
So let's keep it up to here and we'll move on to our next lesson.