Introduction
This note provides an example of using Cairo Graphics with FLTK. In addition to the screen display, the back ends, e.g. png, eps, pdf, and svg are illustrated. The project is motivated by the need to have attractive screen displays and to have nearly identical versions for inclusion in web pages and paper documents. I use the svg (scalar vector graphics) for web pages. I use pdf (portable document format) in conjunction with pdfLaTeX for slides and paper documents. The png format (portable network graphics) is included for its portability. The eps version (encapsulated PostScript) is included because PostScript is my first graphical love. I was including hand coded Postscript files into LaTeX documents in 1991.
This page was first established in June 2013. As I am now using Cairo more, I saw several improvements that could be made. This version
- is more modular and better separates library code and user code
- is easier to compile — just type make
- allows user graphics code to be placed in a virtual function rather than being included in several places
For simplicity, the graphic used for illustration is purely geometric as opposed to something requiring data. Specifically, the graphic is a facsimile of the insignia of the NFL Dallas Cowboys. Output from the svg back end is displayed at the top of the page (unless you are using IE).
FLTK has a class Fl_Cairo_Window, http://www.fltk.org/doc-1.3/classFl__Cairo__Window.html . Its use is demonstrated in the program cairo_test.cxx in the test subdirectory of FLTK distribution. The demonstration here does not use Fl_Cairo_Window but derives from an Fl_Box to create a Cairo drawing area. To my knowledge, this approach is not demonstrated in an example included with the FLTK distribution.
Prerequsites
I assume a basic knowledge of using the FLTK library. The Cairo library must be installed. It was already present on my Linux system, but on some systems downloading and installation may be required. For downloading, information about using the Cairo API, and examples, visit http://cairographics.org/. Both Cairo elements and the native FLTK graphics elements resemble those of PostScript. Familiarity with one facilitates learning the others.
The Files
The files for the demonstration are in CairoBox.zip. The content of this archive is a directory containing a Makefile and a subdirectory src containing CairoBox.cpp, CairoBox.h, and driver.cpp. driver.cpp has the buttons for file output and the image canvas. It also defines CairoBox::graphic, the function where the user puts his graphic code for all outputs. This presently contains code for the stars image.
Compile and Run
Unpack the archive and change to the directory that is created. The code should compile on Linux, OSX, or Windows with Msys/mingw, but I have tested it only on Linux. To compile the code type
make
Run it with
./driver
Resize the window and note that the graphic stays sharp at any size.
Acknowledgements and Disclaimer
I could not have written this demonstration without help from the FLTK discussion group, https://groups.google.com/forum/#!forum/fltkgeneral. In particular, Ian MacArthur provided me with a working example demonstrating the concepts and made suggestions that improved this presentation. I am very appreciative of this help.
This program was written primarily for my own learning. I am not an expert in FLTK or Cairo. Feel free to use this code in any way, but at your own risk.
Revised: June 10, 2015