Repeat the operation with the “Slider2” item, except that this time you need to change the line of code slightly: canvas1.pc1y = me.Value
Write this line of code in the associated Code Editor: canvas1.pc1x = me.Value Next, select the “Slider1” item and add the “ValueChanged” Event Handler to it. Joining the PointsĬhoose the “Canvas1” item in the project Navigator and access the Inspector Panel so you can change the “Super” value to “CuadraticCanvas”. In order for our GraphicsPath instance to be drawn in the graphical context (the “g” parameter), we need to use the DrawPath method passing along our “gp” object as argument. Gp.AddQuadraticCurveToPoint(Me.pc1x,Me.pc1y,g.Width,g.Height/2)Īs you can see, here is where we create our GraphicsPath instance (the “gp” variable) so we can use it to add the quadratic curve using as the control point the values of our “PC1X” and “PC1Y” properties. Write the following code snippet: g.AntiAlias = True The last action will add the new event to the class, bringing the associated Code Editor. In the resulting panel, select the Paint entry from the left list and confirm the selection. For that, and with our class item still selected on the Navigator, access the contextual menu and choose the Add to “CuadraticCanvas” > Event Handler option.
Now is time to add the Paint Event Handler to our class. Remember to add the “Invalidate” line of code to the “Set” method on this property too.
Repeat the operation in order to add a second Computer Property, using the following values this time: This will force our canvas to redraw itself every time we change the value of the X point in the coordinate of our Bézier curve. Next, choose the “Set” method on the Computed Property and add this single line of code after the existing one: invalidate For that, make sure you selected the just added class in the Navigator, and access the contextual menu to choose the Add to “CuadraticCanvas” > Computed Property option.Ĭhange the following fields in the associated Inspector Panel: We need the Canvas to be specialized, so that means that we need to subclass the Canvas class and put in all the specific stuff we may need.Īdd a new Class to the project (Insert > Class), and access the Inspector Panel to change the values of the following properties: Creating your own Graphic Canvas (Canvas subclass) This will allow the controls to properly resize when the Window size is changed by the user. Set the Locking properties in the Inspector Panel for the Sliders and the Canvas, as shown in the picture. Use the Inspector Panel on them to activate the “Allow Live Scrolling”, under the Behavior section. The user interface for our example app is quite simple, with a few controls in it: This is the final look of our example application: Let’s see how simply it is to apply these principles during the creation of a graphic making use of a Bézier curve, and the best part is that this example project lets us move that control point, so you can make a better idea about how it goes. This property is really useful to know if we are dealing with a rectangle shape in our GraphicsPath instance. This one allows us to know if the path is empty this is, it doesn’t contain any shape definition in it. Check this value in order to know the current coordinate, so you can make the proper decision about what to do next in your code. Thus, this one would act as the starting (or initial) point for the next method drawing in the path.Īs for the available properties, you can use these: The interesting thing in GraphicsPath is that every call to any of these methods have the starting coordinate the ending point of the previous shape in the path, while you can use the MoveToPoint method in order to, well, move the virtual “cursor” to any point of your election without painting anything in the process. The available methods in the class give you the ability to create any shape you need in an easier way when compared with the Object2D class (and other classes you may use in combination), from simple rectangles (including the “rounded” variation), to arcs, curves or quadratic curves (Bézier curves) where we model them through a control point. Simply put, you only need to join the points! In Xojo there is a new class, GraphicsPath, that you can use to create graphics as a mathematical description of shapes and lines ranging from simple lines to Bézier curves, arcs, rectangles, there are many advantages to using these! For example, as a class on its own, it doesn’t even needs a graphical context (Graphics) in order to describe the shapes you want to use, and the mathematical representation means more control and precision.
0 kommentar(er)
