Simple Image Viewer

The script shows some techniques in drawing an image using Cairo. The image can be resized and repositioned by using mouse scroll and mouse drag.

1. Inherit a new class PageFrame from GTK.DrawingArea.
2. Define pixbuf in PageFrame for holding image for display.
3. Define mouse scroll handler in PageFrame for resizing image.
4. Define mouse drag handler in PageFrame for repositioning image.
5. During resizing, the location of the mouse pointer will be the centre of the transformation.

Source Code

---

#!/usr/bin/python # Title : GTK3 Image 02 # Date : 07/11/2014 # Description : # 1. Read an image file (jpg) and show it in a window # 2. Scale the image correctly # 3. Scroll the wheel of a mouse on the window # can enlarge/reduce the image. The location of # the pointer will be the centre of the # transformation # 4. Drag the image by a mouse can reposition it from gi.repository import Gtk, Gdk from gi.repository.GdkPixbuf import Pixbuf, InterpType class PageFrame(Gtk.DrawingArea): LEFT_BUTTON = 1 RIGHT_BUTTON = 3 def __init__(self): Gtk.DrawingArea.__init__(self) self.nwx = 0 self.nwy = 0 self.magFac = 1.0 self.pagePixbuf = None self.pagePixbufScaled = None self.pageWidth = 0 self.pageHeight = 0 self.add_events(Gdk.EventMask.SCROLL_MASK) self.connect('scroll-event',self.onScroll) # - detect mouse Press / Release / Dragging self.dragging = False self.add_events(Gdk.EventMask.BUTTON_PRESS_MASK) self.connect("button-press-event", self.onMousePress) self.add_events(Gdk.EventMask.BUTTON_RELEASE_MASK) self.connect("button-release-event", self.onMouseRelease) # - detect mouse movement self.add_events(Gdk.EventMask.POINTER_MOTION_MASK) self.connect("motion_notify_event", self.onMouseMove) def loadPage(self, pImgFile): self.pagePixbuf = \ Pixbuf.new_from_file(pImgFile) self.pageWidth = self.pagePixbuf.get_width() self.pageHeight = self.pagePixbuf.get_height() print "Loading " + pImgFile print "[W:%d, H:%d]" % (self.pageWidth,self.pageHeight) self.scalePixbuf() def scalePixbuf(self, pQuality=InterpType.BILINEAR): # pQuality = # InterpType.NEAREST # fastest, lowest quality # InterpType.BILINEAR # best quality/speed balance # InterpType.HYPER # slowest, highest quality # self.pagePixbufScaled = Pixbuf.scale_simple( self.pagePixbuf,self.pageWidth*self.magFac, self.pageHeight*self.magFac,pQuality) def drawPage(self, pCr): # draw pixbuf on screen Gdk.cairo_set_source_pixbuf(pCr, self.pagePixbufScaled, self.nwx, self.nwy) pCr.paint() def onScroll(self, button, pEvent): mFac1 = self.magFac mFac2 = self.magFac if pEvent.direction == Gdk.ScrollDirection.DOWN: self.magFac -= 0.05 if self.magFac <= 0.3: self.magFac = 0.3 mFac2 = self.magFac elif pEvent.direction == Gdk.ScrollDirection.UP: self.magFac += 0.05 if self.magFac >= 2.0: self.magFac = 2.0 mFac2 = self.magFac self.scalePixbuf() # scale with current pointer position as centre mSx = pEvent.x mSy = pEvent.y self.nwx = mSx - (mSx-self.nwx)*mFac2/mFac1 self.nwy = mSy - (mSy-self.nwy)*mFac2/mFac1 self.queue_draw() def onMousePress(self, pWin, pEvent): if pEvent.type == Gdk.EventType.BUTTON_PRESS \ and pEvent.button == self.LEFT_BUTTON: self.dragStartX = int(pEvent.x) self.dragStartY = int(pEvent.y) self.nwxStart = self.nwx self.nwyStart = self.nwy #mStr = "Click at [X:%d, Y:%d]" % (mX, mY) self.dragging = True def onMouseRelease(self, pWin, pEvent): if pEvent.type == Gdk.EventType.BUTTON_RELEASE \ and pEvent.button == self.LEFT_BUTTON: mX = int(pEvent.x) mY = int(pEvent.y) self.nwx = self.nwxStart + mX-self.dragStartX self.nwy = self.nwyStart + mY-self.dragStartY self.dragging = False self.queue_draw() #mStr = "Point at [X:%d, Y:%d]" % (mX, mY) 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) self.nwx = self.nwxStart + mX - self.dragStartX self.nwy = self.nwyStart + mY - self.dragStartY self.queue_draw() else: #mStr = "Point at [X:%d, Y:%d]" % (mX, mY) pass #print mStr class MyWindow(Gtk.Window): def __init__(self): Gtk.Window.__init__(self, title="GTK ImageViewer 02") self.connect("delete-event", Gtk.main_quit) self.set_default_geometry(width=600, height=400) self.set_position(Gtk.WindowPosition.CENTER) self.pageframe = PageFrame() self.pageframe.loadPage('d6-03.jpg') self.pageframe.connect("draw", self.onDraw) self.add(self.pageframe) def onDraw(self, pDrawArea, pCr): pDrawArea.drawPage(pCr) win = MyWindow() win.show_all() Gtk.main()