Gtk.DrawingArea

Gtk.DrawingArea — A widget for custom user interface elements

Object Hierarchy:

    GObject
    ╰── GInitiallyUnowned
        ╰── Gtk.Widget
            ╰── Gtk.DrawingArea

Functions:

• new () -> Gtk.Widget

Description:

The Gtk.DrawingArea widget is used for creating custom user interface elements. It’s essentially a blank widget; you can draw on it. After creating a drawing area, the application may want to connect to:

• Mouse and button press signals to respond to input from the user. (Use Gtk.Widget::add_events() to enable events you wish to receive.) when the widget is instantiated on a particular display.

  (Create GDK resources in response to this signal.) actions when the widget changes size.

  contents of the widget.

The following code portion demonstrates using a drawing area to display a circle in the normal widget foreground color.

Note that GDK automatically clears the exposed area to the background color before sending the expose event, and that drawing is implicitly clipped to the exposed area.

Simple Gtk.DrawingArea usage

def expose(area, context):
    context.scale(area.get_allocated_width(), area.get_allocated_height())    
    context.set_source_rgb(0.5, 0.5, 0.7)
    context.fill() 
    context.paint()

drawingarea = Gtk.DrawingArea()
drawingarea.connect("draw", expose)
self.add(drawingarea)

Draw signals are normally delivered when a drawing area first comes onscreen, or when it’s covered by another window and then uncovered.

You can also force an expose event by adding to the damage region of the drawing area’s window; Gtk.Widget::queue_draw_area() and gdk_window_invalidate_rect() are equally good ways to do this.

You’ll then get a draw signal for the invalid region.

The available routines for drawing are documented on the [GDK Drawing Primitives][gdk3-Cairo-Interaction] page and the cairo documentation.

To receive mouse events on a drawing area, you will need to enable them with Gtk.Widget::add_events(). To receive keyboard events, you will need to set the can-focus property on the drawing area, and you should probably draw some user-visible indication that the drawing area is focused. Use Gtk.Widget::has_focus() in your expose event handler to decide whether to draw the focus indicator. See Gtk.render_focus() for one way to draw focus.

Function Details:

new()

new () -> Gtk.Widget

Creates a new drawing area.

• Returns: a new Gtk.DrawingArea

Example:

#!/usr/bin/env python3

import gi
gi.require_version('Gtk', '3.0')
from gi.repository import Gtk, Gdk, GdkPixbuf
import cairo

class DrawingAreaFrame(Gtk.Frame):
    def __init__(self, css=None, border_width=0):
        super().__init__()
        self.set_border_width(border_width)
        self.set_size_request(100, 100)
        self.vexpand = True
        self.hexpand = True
        self.surface = None

        self.area = Gtk.DrawingArea()
        self.add(self.area)

        self.area.connect("draw", self.on_draw)
        self.area.connect('configure-event', self.on_configure)   

    def init_surface(self, area):
        # Destroy previous buffer
        if self.surface is not None:
            self.surface.finish()
            self.surface = None

        # Create a new buffer
        self.surface = cairo.ImageSurface(cairo.FORMAT_ARGB32, area.get_allocated_width(), area.get_allocated_height())

    def redraw(self): 
        self.init_surface(self.area)
        context = cairo.Context(self.surface)
        context.scale(self.surface.get_width(), self.surface.get_height())
        self.do_drawing(context)
        self.surface.flush()

    def on_configure(self, area, event, data=None): 
        self.redraw()
        return False

    def on_draw(self, area, context):
        if self.surface is not None:
            context.set_source_surface(self.surface, 0.0, 0.0)            
            context.paint()
        else:
            print('Invalid surface')
        return False

    def draw_radial_gradient_rect(self, ctx):
        x0, y0 = 0.3, 0.3
        x1, y1 = 0.5, 0.5
        r0 = 0
        r1 = 1        
        pattern = cairo.RadialGradient(x0, y0, r0, x1, y1, r1) 
        pattern.add_color_stop_rgba(0, 1,1,0.5, 1)   
        pattern.add_color_stop_rgba(1, 0.2,0.4,0.1, 1)   
        ctx.rectangle(0, 0, 1, 1)       
        ctx.set_source(pattern)
        ctx.fill()         

    def do_drawing(self, ctx):
        self.draw_radial_gradient_rect(ctx)        

class Window(Gtk.Window):
    def __init__(self):
        Gtk.Window.__init__(self)
        self.set_title("Test Draw Radial Gradient")
        self.set_default_size(800, 600)
        self.connect("destroy", Gtk.main_quit)    

        frame = DrawingAreaFrame()        
        self.add(frame)

window = Window()
window.show_all()
Gtk.main()