Use of the DrawingArea and of Cairo

Introductory Example

The DrawingArea is used to display images and drawings.

The use of the DrawingArea in Gtk-3 differs greatly from the use of the same widget in the earlier Gtk-2:

• With Gtk3, the use of the graphics subsystem Cairo is mandatory. With Gtk2, is was the programmer's choice to use either Gdk or Cairo.

• The signal that triggers the drawing was renamed from "exposeEvent" to "draw"

• The signal "configure_event" that was used to notify a change of the widget size is now obsolete, use "size-allocate" instead.

• The draw-callback is not expected to return a logical value! (This differs from all other Gtk-3 interfaces!)

Introductory Example

This example draws three differently coloured quadrangles of equal size. The quadrangles overlap in parts. A partially covered quadrangle was drawn prior to the covering quadrangle.

Archive file with this example: Cairo-Example001.tar.gz. Be sure to read the file README.txt for further instructions.

import "gtk3" Graphics.UI.Gtk
import Graphics.Rendering.Cairo

--  This function is the event handler for the "draw" event
--  of the DrawingArea.
--  When it is called, it draws three differently coloured
--  quadrangles of equal size.
drawEventHandler ::  Render ()
drawEventHandler =
   do
    setSourceRGB 0.5 0.0 0.0
    rectangle 10 10 120 120
    fill
    setSourceRGB 0.0 0.5 0.0
    rectangle 60 60 120 120
    fill
    setSourceRGB 0.0 0.0 0.5
    rectangle 110 110 120 120
    fill
     

--  action to be performed after the window was closed  
destroyEventHandler :: IO ()
destroyEventHandler =
  do mainQuit

  
main :: IO ()
main = do
    initGUI
    --  all needed widgets are created and configured
    window <- windowNew
    paintArea <- drawingAreaNew
    --  the properties of the main window are set
    set window [windowDefaultWidth := 250,
                windowDefaultHeight := 250,
                windowWindowPosition := WinPosCenter,
                windowTitle := "DrawingArea Demo",
                containerChild := paintArea]
    widgetModifyBg paintArea StateNormal (Color 65535 65535 65535)
    --  all needed callback functions are provided
        on paintArea draw $ drawEventHandler
    on window objectDestroy destroyEventHandler
    --  all widgets are made visible
    widgetShow paintArea
    widgetShow window
    --  the event processing is started
    mainGUI