Basic Cairo, Mouse Click, Drag and Position

The script shows some techniques in defining a drawing area using Cairo. Mouse click and mouse movement are detected in the widget.

1. Define a drawing area using Cairo.
2. Add 3 mouse event handlers: mouse-press, mouse-release and mouse-movement.
3. Because of the above event handlers, the app can recognize mouse clicking, dragging and moving.
4. Get the dimensions of a drawing area.
5. Redraw graphics upon resizing the window.

Source Code

---

#!/usr/bin/python # Title : GTK3 Cairo # Date : 31/10/2014 from gi.repository import Gtk, Gdk import cairo import math class MouseButtons: LEFT_BUTTON = 1 RIGHT_BUTTON = 3 class mainApp(): def __init__(self): self.win = Gtk.Window() self.win.connect('destroy', Gtk.main_quit) self.win.set_default_size(480,360) self.win.set_position(Gtk.WindowPosition.CENTER) self.win.set_title('GTK3 Cairo') mBox = Gtk.VBox(False,2) # not equal height, space # drawing area self.drawArea = Gtk.DrawingArea() self.drawArea.connect('draw', self.onDraw) # - detect mouse Press / Release / Dragging self.dragging = False self.drawArea.add_events(Gdk.EventMask.BUTTON_PRESS_MASK) self.drawArea.connect("button-press-event", self.onMousePress) self.drawArea.add_events(Gdk.EventMask.BUTTON_RELEASE_MASK) self.drawArea.connect("button-release-event", self.onMouseRelease) # - detect mouse movement self.drawArea.add_events(Gdk.EventMask.POINTER_MOTION_MASK) self.drawArea.connect("motion_notify_event", self.onMouseMove) mBox.pack_start(self.drawArea,True,True,2) # message label self.msg = Gtk.Label("Message") mBox.pack_end(self.msg,False,True,2) self.win.add(mBox) self.win.show_all() def onDraw(self, pDrawArea, pCr): # get the dimensions of the draw area mX = pDrawArea.get_allocated_width()/2 mY = pDrawArea.get_allocated_height()/2 pCr.set_source_rgb(0.7, 0.5, 0.1) pCr.arc(mX,mY,100, 0, 2*math.pi) pCr.fill_preserve() pCr.set_source_rgb(0, 0, 0) pCr.stroke() pCr.arc(mX-40,mY-30,14, 0, 2*math.pi) pCr.arc(mX+40,mY-30,20, 0, 2*math.pi) pCr.fill() pCr.set_line_width(10) pCr.set_line_cap(cairo.LINE_CAP_ROUND) pCr.arc(mX, mY, 68, math.pi/5, math.pi*4/5) pCr.stroke() def onMousePress(self, pWin, pEvent): if pEvent.type == Gdk.EventType.BUTTON_PRESS \ and pEvent.button == MouseButtons.LEFT_BUTTON: mX = int(pEvent.x) mY = int(pEvent.y) mStr = "Click at [X:%d, Y:%d]" % (mX, mY) self.msg.set_text(mStr) self.dragging = True def onMouseRelease(self, pWin, pEvent): mX = int(pEvent.x) mY = int(pEvent.y) self.dragging = False mStr = "Point at [X:%d, Y:%d]" % (mX, mY) self.msg.set_text(mStr) def onMouseMove(self, pWin, pEvent): mX = int(pEvent.x) mY = int(pEvent.y) if self.dragging: mStr = "Dragging at [X:%d, Y:%d]" % (mX, mY) else: mStr = "Point at [X:%d, Y:%d]" % (mX, mY) self.msg.set_text(mStr) mApp = mainApp() Gtk.main()