Creating graphics in Xojo is easy… with GraphicsPath

Who I am
Catherine Le Nevez
@catherinelenevez
Author and references

The advantages are many! For example, the fact that being a class you can create different designs that do not require a graphic context, as well as the precision with which you can create the representations by concatenating the paths ... simply by joining the points!

And is that the methods available in the class will allow you to add in a really simple and less complex way than the Object2D class, both rectangles (with its variant of rounded corners), arcs, curves and quadratic curves (from Bèzier) which provide us with a control point.



You can download the sample project from here.

The interesting thing in this case is that every call to one of these methods will take as starting point the coordinate (point) where the "stroke" ended in the previous way; although you can always use the MoveToPoint method to do just that: move the "pencil" to a certain coordinate without drawing a trace. This would then be the new point taken as the origin when drawing the next line, drawing the curve, etc.

As for the available properties, you have the following:

  • Current Point. You can consult it to find out which coordinate you are in at any given moment and make a decision accordingly.
  • It's empty. It allows us to know if the graph (chart) is empty; that is, it does not contain any elements.
  • IsRectangle. It lets us know if the path is a rectangle.

In progress!

We will start by seeing how easy it is to apply these principles in creating a graph that uses a Bêzier curve, on which we can vary the control point. When we're done, our project will look like this:



1. Design the user interface

Our user interface consists of the following elements:

  • 2 tag (Label)
  • 2 cursors. Use the inspector panel on each of them to activate the "Allow realtime scrolling" property in the Behavior section.
  • 1 Control fabric.

Use the lock settings of the controls on each of the Sliders and on the canvas, as shown in the image. This will allow their size to accommodate as the window size changes.

2. Creation of our graphic area (Canvas subclass)

We're going to make the Canvas a specialized class, and that means creating our own subclass.

Add a new class to the project (Insert> Class) and use the Inspector panel to adjust the following properties:

  • Name: QuadraticCanvas
  • Super: fabric

Then add two Computed Properties. To do this, make sure our class entry is selected in the Project Navigator and access the context menu to select the Add to “CuadraticCanvas”> Calculated property option.

Use the following data in the resulting inspector panel:

  • Name: PC1X
  • Type: Double

Then, select the "Set" method of the calculated property and add the following line of code after the existing one:

invalidate yourself

With this we force the control to be redrawn every time we change the value of the X point in the control coordinate of the Bezier curve.


Repeat to add a second computed property with the following values:

  • Name: PC1Y
  • Type: Double.

Remember to also add the "Invalidate" line of code in the "Set" method of this property.


We will now add the Paint Event Handler to our class. To do this, and with the item still selected in the Project Navigator, access the context menu to select the option Add to «CuadraticCanvas»> Event manager ...

In the resulting panel, select Paint and confirm your selection. This action will add the new event to the class presenting the code editor where you need to insert the following code:

g.AntiAlias ​​= Vero g.DrawingColor = & cffffff g.FillRectangle (0,0, g.Width, g.Height) g.DrawingColor = & c000000 g.DrawLine (g.Width / 2,0, g.Width / 2, g.Height) g.DrawLine (0, g.Height / 2, g.Width, g.Height / 2) g.DrawingColor = & ccc1233 Var gp As New GraphicsPath gp.MoveToPoint (0, g.Altezza / 2) gp.AddQuadraticCurveToPoint (Me.pc1x, Me.pc1y, g.Width, g.Height / 2) g.DrawPath gp

As you can see, this is where we create an instance of the GraphicsPath class (represented by the variable "gp"), and onto which a quadratic curve is added using the coordinates corresponding to the property values ​​"PC1X" as a control point and "PC1Y ".

In order for our shape to be drawn in the graphic context (represented by the variable "g") we use the DrawPath method, passing the variable of our GraphicsPath object as an argument.


3. Connect the dots

Select the "Canvas1" entry in the Project Navigator and use the Inspector panel to change the "Super" field to "CuadraticCanvas".

Then, select the "Slider1" element and add the "ValueChanged" event handler. Enter the following line of code in the resulting code editor:

canvas1.pc1x = me.Value

Repeat the operation with "Slider2", except that in this case the line of code will be:

canvas1.pc1y = me.Value

Now select the entry «Window1» in the Project Navigator and add two events: Open and Resize. Embed the following line of code in both:

SetSlider

Next we will add a new method in the Window1 window. To do this, select it in the Project Navigator and access the context menu to choose the Add to “Window1”> Method option. Use the following signature in the inspector panel:


  • Method name: SetSliders

And enter the following code in the associated code editor:

slider1.MaximumValue = canvas1.Width slider2.MaximumValue = canvas1.Height canvas1.PC1x = Slider1.Value canvas1.PC1y = Slider2.Value

This will be the method in charge of updating both the maximum value of the sliders (with the width of the window), and of updating the drawing of the graph passing the new adjusted values.

Move the curve!

We already have everything we need. It's time to run the application and use the sliders to move the control point. As you do this, you will see how the curve design on the canvas varies.

You already have a starting point! Try using the rest of the methods of the GraphicsPath class or adding more Bezier curves to draw the shapes you need.

add a comment of Creating graphics in Xojo is easy… with GraphicsPath
Comment sent successfully! We will review it in the next few hours.