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 1.0 0.0 0.0
    rectangle 20 20 100 100
    fill
    setSourceRGB 0.0 1.0 0.0
    rectangle 70 70 100 100
    fill
    setSourceRGB 0.0 0.0 1.0
    rectangle 120 120 100 100
    fill
     
           
destroyEventHandler :: IO ()
destroyEventHandler =
  do mainQuit

  
main :: IO ()
main = do
    initGUI
    window <- windowNew
    paintArea <- drawingAreaNew
    set window [windowDefaultWidth := 250,
                windowDefaultHeight := 250,
                windowWindowPosition := WinPosCenter,
                windowTitle := "DrawingArea Demo",
                containerChild := paintArea]
    widgetModifyBg paintArea StateNormal (Color 65535 65535 65535)
    on paintArea draw $ drawEventHandler
    on window objectDestroy destroyEventHandler
    widgetShow paintArea
    widgetShow window
    mainGUI