Skip to content

Tag: Graphics

WebChart, Easy as Pie

Among the many new features introduced by the Web Framework 2.0, one of my favourites is the new WebChart class. Based on Chart.js, this class offers a total of eight chart types you can create and use really easily in your projects; including the Line, Bar, Pie or Doughnut chart types among others.

Comments closed

Top-Rounded Rectangle

On the forum a user asked if there was a way to create a rectangle with only the top left and top right corners being rounded. Xojo’s built-in RoundRectangle control draws with all four corners rounded, so that was not an option.

One solution is to use a GraphicsPath to draw exactly what you want. With a GraphicsPath you can use the AddArc() method to add rounded corners and then draw the lines for the rest of the rectangle.

Comments closed

Quick Tip: Centering a Picture on any Graphic Context

Sure you can create a Subclass of any Picture, Canvas or class and write code to center another Picture in its respective Graphics contexts. But taking the class extension approach means that you can reuse the same code for any of these (or any additional class) offering a Graphic context, so you can pass along the Picture you want to center and re-scale (if needed) in its area.

Comments closed

Starting Graphics with GraphicsPath

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. Simply put, you only need to join the points!

Comments closed

Guest Post: Using the Graphics Class to Create PDF Documents

Monkeybread Software started with the DynaPDF plugin for Xojo about twelve years ago. As DynaPDF is a C++ library, the wrapping plugin mimics the original C API and offers it for Xojo. Over the years a lot more convenient methods have been added to make the plugin more Xojo-like. For example, newer methods can process pictures directly, take colors as Xojo color values and allow drawing of styled text directly.

Since the early days there has been the feature request to use the graphics class in Xojo to draw to a PDF document. We recently came back to this old feature request and decided to try a new way to implement it and our new code seems to work just fine. With some help from Xojo engineers, we even got the alignment right.

Comments closed

Updating Code That Used The Graphics Property

Prior to Xojo 2018r3 Window and Canvas both had a Graphics property that you could access and draw to. This was deprecated in 2011 because it had significant performance issues on all platforms. The preferred way to draw your graphics since 2011 has been to use the Window.Paint or Canvas.Paint event handlers and the supplied parameter g As Graphics.

Starting with Xojo 2018r3, this Graphics property was removed from Window and Canvas so if you had code that was still relying on it, that code will no longer compile. Here are some tips on how you can migrate your code to use the Paint event handlers and tell the Canvas to update with a call to Invalidate.

Comments closed

Drawing Objects in a Canvas with the Paint Event

The Canvas control is a great way to draw pretty much anything to a window. With a Canvas, do all your drawing in its Paint event handler for the best quality and performance.

I’ve had many people ask for an example for how to create a Canvas that allows you to:

  • Draw pictures within it (as objects)
  • Move these objects
  • Remove them
  • Add labels to them
  • Programmatically select one

This example demonstrates how to do all these things. It has a large Canvas on the window with several buttons that let you add and manage the objects on the Canvas.

Comments closed

Create Your Own ImageWell Based on Canvas

Whether you are using Xojo to create your very first application or if you are coming from other languages, like C# or VisualBasic, customized UI controls are probably one of those things you have in your to-do list. For multiplatform Desktop apps, you will find that the Canvas class offers everything you need. In order to show you how easy it can be, follow this tutorial to recreate the ImageWell UI class control, provided by default in the Xojo framework. Our customized ImageWell will be able to proportionally display any JPEG file dropped by the user on the control, centering it on the available surface.

Comments closed

ContainerControl: Making a Multiplatform Search Field

The ContainerControl is one of the most versatile control classes included in the Xojo framework both for Desktop and Web apps. In fact, it paves the way to complex UI controls creation with the same simplicity you are used to while designing your window layouts. Even better, once you create your complex UI controls using the ContainerControl, you will be able to add them to your Window layouts as if they were regular controls. Plus, you will enjoy the fruits of better OOP encapsulation and the fact that you can create and use the controls dynamically at run time. Want to see this in action? Follow this tutorial and video to create the basis of a multiplatform search field based on the ContainerControl class.

Comments closed