Chapter 3: Window, Canvas, and Drawing

We have explored the basics of graphical application development and seen how starting with a new design in a modern language can lead to easier development. From this point on, we will be looking in more detail at how the Fyne toolkit aims to provide an easy-to-use API for building cross-platform applications for all developers.

In this chapter, we will investigate the structure of a Fyne application, how it draws objects, and how they can be scaled and manipulated—as well as animated—in a container.

In this chapter, we will cover the following topics:

• How Fyne applications are structured and how to start making your first app
• Exploring the canvas package and the types of objects that can be drawn
• How scalable elements create a clean user interface
• Working with bitmaps and pixel rendering
• Animation of elements and properties

By the end of this chapter, you will know how these features combine...

Technical requirements

In this chapter, we will be writing our first Fyne code, including building a complete application. To do this, you will need to have the Go compiler installed, as well as a code editor application. You can download Go from the home page at https://golang.org/dl/. The choice of code editor is normally a matter of user preference, but Microsoft's Visual Studio Code and JetBrain's GoLand applications are both highly recommended.

As Fyne uses some operating system APIs internally, you will also need to have a C compiler installed. Developers on Linux will probably already have one; macOS users can simply install Xcode from the Mac App Store. Windows-based developers will need to install a compiler, such as MSYS2, TDM-GCC, or Cygwin—more details can be found in Appendix A – Developer Tool Installation.

The full source code for this chapter can be found in the book's GitHub repository at https://github.com/PacktPublishing/Building...

Anatomy of a Fyne application

As we saw in Chapter 2, The Future According to Fyne, the toolkit took the opportunity to start from scratch, throwing away the old and sometimes confusing constraints of previous toolkits. As a result, the APIs need to define everything involved in building a graphical application. In this section, we will explore the main concepts in running a Fyne-based application and producing visible components on screen, starting with the application itself.

Application

The application, defined in the fyne.App interface, models the capabilities of a Fyne-based application. Each app using Fyne will typically create and run a single fyne.App instance from within their main() function. Because of the way that graphical applications work, they must be started from the main function and not through a goroutine or other background thread.

To create an app instance, we make use of the app package within Fyne, which can be imported using fyne.io/fyne/v2/app. This...

Understanding CanvasObject and the canvas package

The CanvasObject definition is just a Go interface that describes an element that can be positioned, sized, and added to a Fyne canvas. The type does not contain any information about how to draw—this information is provided by concrete types within the canvas package. These types define well-understood graphical primitives, such as Text and Line.

Before learning how to use these elements, we shall see how they look in the Fyne demo app.

Canvas demo

Before we look at how to write code that will display shapes in our window, we should look at a demo of these features in action. Using the built-in Fyne demo application, we can see what the canvas package supports. If you have not already done so, you can install and run the demo application using the following commands:

$ go get fyne.io/fyne/v2/cmd/fyne_demo
$ ~/go/bin/fyne_demo

While running the demo, tap on the Canvas item on the left navigation panel. You should...

Scalable drawing primitives

As you probably realized from the previous example, all the items that we have rendered so far are vector graphics. This means that they are described by lines, curves, and high-level parameters instead of a collection of pixels. Because of this, these components are called scalable (like in scalable vector graphics (SVG) files), meaning that they can be drawn at any scale. The Fyne toolkit is a scalable toolkit, which means that a Fyne application can be drawn at any scale and render at a high quality.

Let's look at the text component in more detail, for example. We define a simple text component as before:

w.SetContent(canvas.NewText("Text", color.Black))

We can then place that line of code into the standard main() function that we wrote in the first section of this chapter, Anatomy of a Fyne application, and then run it. The output will be as expected—drawing text at the normal size—but if we override the preferred...

Pixel output – rendering images

For the reasons outlined in the previous section, it is recommended that you use scalable graphics (normally SVG files) for icons and other image-based components of user interfaces. It will sometimes be necessary to work with bitmap graphics (those defined by a collection of pixels rather than graphical features). If you are loading and managing images, or if you want to display detailed graphical elements using every pixel available, then this section contains important information about how to proceed.

Images

Image content in Fyne defines graphical content that will normally stretch or shrink to the space that is allocated to it. Loading a bitmap image (which has dimensions that are defined by the number of pixels) into a scalable output may not provide the expected outcome. The rendered output of a size defined in pixels will vary depending on the scale of the output device or user preferences. For this reason, Fyne does not normally...

Implementing a simple game

In the first example application of this book, we will see how the canvas elements come together by building the graphical elements of a snake game (for a history of this game, see the Wikipedia entry at https://en.wikipedia.org/wiki/Snake_(video_game_genre). The main element of this game is a snake character that the user will control as it moves around the screen. We will build the snake from a row of rectangles and add animation elements to bring it to life. Let's start by drawing the initial screen.

Drawing a snake on screen

To start the work of displaying the game canvas, we will see create a simple snake that consists of a row of 10 green squares. Let's begin:

1. Firstly, we will create a setup function that will build the game screen. We will call this function setupGame and create an empty list that we will populate. The return from this method is a container with no layout so that we can later use a manual layout for the visual...