|
|
| Строка 1: |
Строка 1: |
| - | The <b>GDI</b> (<b>Graphics Device Interface</b>) is an interface for working with graphics. It is used to interact with graphic devices such as monitor, printer or a file. The GDI allows programmers to display data on a screen or printer without having to be concerned about the details of a particular device. The GDI insulates the programmer from the hardware.
| |
| | | | |
| - | [[image: wxPython_faq_gdi2.png | center]]
| |
| - |
| |
| - | From the programmer's point of view, the GDI is a group of classes and methods for working with graphics. The GDI consists of 2D Vector Graphics, Fonts and Images.
| |
| - |
| |
| - | To begin drawing graphics, we must create a <b>device context</b> (<b>DC</b>) object. In wxPython the device context is called <b>wx.DC</b>. The documentation defines wx.DC as a device context onto which which graphics and text can be drawn. It represents number of devices in a generic way. Same piece of code can write to different kinds of devices. Be it a screen or a printer.
| |
| - | The wx.DC is not intended to be used directly. Instead a programmer should choose one of the derived classes. Each derived class is intended to be used under specific conditions.
| |
| - |
| |
| - | <strong>Derived wx.DC classes</strong>* wxBufferedDC
| |
| - | * wxBufferedPaintDC
| |
| - | * wxPostScriptDC
| |
| - | * wxMemoryDC
| |
| - | * wxPrinterDC
| |
| - | * wxScreenDC
| |
| - | * wxClientDC
| |
| - | * wxPaintDC
| |
| - | * wxWindowDC
| |
| - |
| |
| - | The <i>wx.ScreenDC</i> is used to draw anywhere on the screen. The <i>wx.WindowDC</i> is used if we want to paint on the whole window (Windows only). This includes window decorations. The <i>wx.ClientDC</i> is used to draw on the client area of a window. The client area is the area of a window without it's decorations (title and border).
| |
| - | The <i>wx.PaintDC</i> is used to draw on the client area as well. But there is one difference between the <i>wx.PaintDC</i> and the <i>wx.ClientDC</i>.
| |
| - | The <i>wx.PaintDC</i> should be used only from a <i>wx.PaintEvent</i>. The <i>wx.ClientDC</i> shoud not be used from a <i>wx.PaintEvent</i>.
| |
| - |
| |
| - | The <i>wx.MemoryDC</i> is used to draw graphics on the bitmap.
| |
| - | The <i>wx.PostScriptDC</i> is used to write to PostScript files on any platform.
| |
| - | The <i>wx.PrinterDC</i> is used to access a printer (Windows only).
| |
| - |
| |
| - | == Drawing a simple line ==
| |
| - | Our first example will draw a simple line onto the client area of a window.
| |
| - |
| |
| - | <source lang="python">
| |
| - | DrawLine(int x1, int y1, int x2, int y2)
| |
| - | </source>
| |
| - |
| |
| - | This method draws a line from the first point to the second. Excluding the second point.
| |
| - |
| |
| - | <source lang="python">
| |
| - | #!/usr/bin/python
| |
| - | # line1.py
| |
| - |
| |
| - | import wx
| |
| - |
| |
| - | class Line(wx.Frame):
| |
| - | def __init__(self, parent, id, title):
| |
| - | wx.Frame.__init__(self, parent, id, title, size=(250, 150))
| |
| - |
| |
| - | wx.FutureCall(2000, self.DrawLine)
| |
| - |
| |
| - | self.Centre()
| |
| - | self.Show(True)
| |
| - |
| |
| - | def DrawLine(self):
| |
| - | dc = wx.ClientDC(self)
| |
| - | dc.DrawLine(50, 60, 190, 60)
| |
| - |
| |
| - |
| |
| - | app = wx.App()
| |
| - | Line(None, -1, 'Line')
| |
| - | app.MainLoop()
| |
| - | </source>
| |
| - |
| |
| - | <source lang="python">
| |
| - | wx.FutureCall(2000, self.DrawLine)
| |
| - | </source>
| |
| - |
| |
| - | We call the <i>DrawLine()</i> method after the window has been created. We do it because, when the window is created, it is drawn. All our drawings would be therefore lost. We can start drawing after the window has been created. This is the reason, why we call the <i>wx.FutureCall()</i> method.
| |
| - |
| |
| - | <source lang="python">
| |
| - | def DrawLine(self):
| |
| - | dc = wx.ClientDC(self)
| |
| - | dc.DrawLine(50, 60, 190, 60)
| |
| - | </source>
| |
| - |
| |
| - | We create a <i>wx.ClientDC</i> device context. The only parameter is the window on which we want to draw. In our case it is <i>self</i>, which is a reference to our <i>wx.Frame</i> widget. We call the <i>DrawLine()</i> method of the device context.
| |
| - | This call actually draws a line on our window.
| |
| - |
| |
| - | It is very important to understand the following behaviour. If we resize the window, the line will disappear.
| |
| - | Why is this happening? Every window is redrawn, if it is resized. It is also redrawn, if it is maximized. The window is also redrawn, if we cover it by another window and uncover afterwards.
| |
| - | The window is drawn to it's default state and our line is lost. We have to draw the line each time the window is resized.
| |
| - | The solution is the <i>wx.PaintEvent</i>. This event is triggered every time, the window is redrawn. We will draw our line inside a method that will be hooked to the paint event.
| |
| - |
| |
| - | The following example shows how it is done.
| |
| - |
| |
| - | <source lang="python">
| |
| - | #!/usr/bin/python
| |
| - | # line2.py
| |
| - |
| |
| - | import wx
| |
| - |
| |
| - | class Line(wx.Frame):
| |
| - | def __init__(self, parent, id, title):
| |
| - | wx.Frame.__init__(self, parent, id, title, size=(250, 150))
| |
| - |
| |
| - | self.Bind(wx.EVT_PAINT, self.OnPaint)
| |
| - |
| |
| - | self.Centre()
| |
| - | self.Show(True)
| |
| - |
| |
| - | def OnPaint(self, event):
| |
| - | dc = wx.PaintDC(self)
| |
| - | dc.DrawLine(50, 60, 190, 60)
| |
| - |
| |
| - | app = wx.App()
| |
| - | Line(None, -1, 'Line')
| |
| - | app.MainLoop()
| |
| - | </source>
| |
| - |
| |
| - | <source lang="python">
| |
| - |
| |
| - | self.Bind(wx.EVT_PAINT, self.OnPaint)
| |
| - | </source>
| |
| - |
| |
| - | Here we bind the <i>OnPaint</i> method to the <i>wx.PaintEvent</i> event. It means, that each time our window is repainted, we call the <i>OnPaint</i> method. Now the line will not disappear, if we resize our window (cover it, maximize it).
| |
| - |
| |
| - | <source lang="python">
| |
| - | dc = wx.PaintDC(self)
| |
| - | </source>
| |
| - |
| |
| - | Notice, that this time we have used the <i>wx.PaintDC</i> device context.
| |
| - |
| |
| - | [[image: wxPython_faq_line.png | center]]
| |
| - |
| |
| - | == 2D Vector Graphics ==
| |
| - |
| |
| - | There are two different computer graphics. <b>Vector</b> and <b>raster</b> graphics.
| |
| - | Raster graphics represents images as a collection of pixels. Vector graphics is the use of geometrical primitives such as points, lines, curves or polygons to represent images. These primitives are created using mathematical equations.
| |
| - |
| |
| - | Both types of computer graphics have advantages and disadvantages. The advantages of vector graphics over raster are:
| |
| - |
| |
| - | * smaller size
| |
| - | * ability to zoom indefinitely
| |
| - | * moving, scaling, filling or rotating does not degrade the quality of an image
| |
| - |
| |
| - |
| |
| - | === Types of primitives ===
| |
| - | * points
| |
| - | * lines
| |
| - |
| |
| - | * polylines
| |
| - | * polygons
| |
| - | * circles
| |
| - | * ellipses
| |
| - | * Splines
| |
| - |
| |
| - | === Device context attributes ===
| |
| - | {|
| |
| - | |-
| |
| - | !Attribute
| |
| - | !Object
| |
| - | !Default value
| |
| - | !Get Method
| |
| - | !Set Method
| |
| - | |-
| |
| - | |Brush
| |
| - | |wx.Brush
| |
| - | |wx.WHITE_BRUSH
| |
| - | |wx.Brush GetBrush()
| |
| - | |SetBrush(wx.Brush brush)
| |
| - | |-
| |
| - | | id="gray" | Pen
| |
| - | | id="gray" | wx.Pen
| |
| - | | id="gray" | wx.BLACK_PEN
| |
| - | | id="gray" | wx.Pen GetPen()
| |
| - | | id="gray" | SetPen(wx.Pen pen)
| |
| - | |-
| |
| - | |Mapping Mode
| |
| - | |-
| |
| - | |wx.MM_TEXT
| |
| - | |int GetMapMode()
| |
| - | |SetMapMode(int mode)
| |
| - | |-
| |
| - | | id="gray" | BackgroundMode
| |
| - | | id="gray" | -
| |
| - | | id="gray" | wx.TRANSPARENT
| |
| - | | id="gray" | int GetBackgroundMode()
| |
| - | | id="gray" | SetBackgroundMode(int mode)
| |
| - | |-
| |
| - | |Text background colour
| |
| - | |wx.Colour
| |
| - | |wx.WHITE
| |
| - | |wx.Colour GetTextBackground()
| |
| - | |SetTextBackground(wx.Colour colour)
| |
| - | |-
| |
| - | | id="gray" | Text foreground colour
| |
| - | | id="gray" | wx.Colour
| |
| - | | id="gray" | wx.BLACK
| |
| - | | id="gray" | wx.Colour GetTextForeground()
| |
| - | | id="gray" | SetTextForeground(wx.Colour colour)
| |
| - | |
| |
| - | |
| |
| - | |-
| |
| - | | id="gray" |
| |
| - | | id="gray" |
| |
| - | |-
| |
| - | |
| |
| - | |
| |
| - | |-
| |
| - | | id="gray" |
| |
| - | | id="gray" |
| |
| - | |-
| |
| - | |
| |
| - | |
| |
| - | |-
| |
| - | | id="gray" |
| |
| - | | id="gray" |
| |
| - | |}
| |
| - |
| |
| - |
| |
| - | == Basic elements ==
| |
| - | In the following lines we will introduce several elementary objects. Colours, Brushes, Pens, Joins, Caps, Gradients.
| |
| - |
| |
| - | === Colours ===
| |
| - | A colour is an object representing a combination of Red, Green, and Blue (RGB) intensity values. Valid RGB values are in the range 0 to 255.
| |
| - | There are three ways for setting colours. We can create a wx.Colour object, use a predefined colour name or use hex value string. <i>wx.Colour(0,0,255)</i>, <i>'BLUE'</i>, <i>'#0000FF'</i>. These three notations produce the same colour.
| |
| - | I prefer the hexadecimal notation. A perfect tool for working with colours can be found on the [http://www.colorjack.com colorjack.com] website. Or we can use such a tool as Gimp.
| |
| - |
| |
| - | We have also a list of predefined colour names that we can use in our programs.
| |
| - |
| |
| - | {|
| |
| - | |-
| |
| - | |AQUAMARINE
| |
| - | |BLACK
| |
| - | |BLUE
| |
| - | |BLUE VIOLET
| |
| - | |BROWN
| |
| - | |-
| |
| - | |CADET BLUE
| |
| - | |CORAL
| |
| - | |CORNFLOWER BLUE
| |
| - | |CYAN
| |
| - | |DARK GREY
| |
| - | |-
| |
| - | |DARK GREEN
| |
| - | |DARK OLIVE GREEN
| |
| - | |DARK ORCHID
| |
| - | |DARK SLATE BLUE
| |
| - | |DARK SLATE GREY
| |
| - | |-
| |
| - | |DARK TURQUOISE
| |
| - | |DIM GREY
| |
| - | |FIREBRICK
| |
| - | |FOREST GREEN
| |
| - | |GOLD
| |
| - | |-
| |
| - | |GOLDENROD
| |
| - | |GREY
| |
| - | |GREEN
| |
| - | |GREEN YELLOW
| |
| - | |INDIAN RED
| |
| - | |-
| |
| - | |KHAKI
| |
| - | |LIGHT BLUE
| |
| - | |LIGHT GREY
| |
| - | |LIGHT STEEL BLUE
| |
| - | |LIME GREEN
| |
| - | |-
| |
| - | |MAGENTA
| |
| - | |MAROON
| |
| - | |MEDIUM AQUAMARINE
| |
| - | |MEDIUM BLUE
| |
| - | |MEDIUM FOREST GREEN
| |
| - | |-
| |
| - | |MEDIUM GOLDENROD
| |
| - | |MEDIUM ORCHID
| |
| - | |MEDIUM SEA GREEN
| |
| - | |MEDIUM SLATE BLUE
| |
| - | |MEDIUM SPRING GREEN
| |
| - | |-
| |
| - | |MEDIUM TURQUOISE
| |
| - | |MEDIUM VIOLET RED
| |
| - | |MIDNIGHT BLUE
| |
| - | |NAVY
| |
| - | |ORANGE
| |
| - | |-
| |
| - | |ORANGE RED
| |
| - | |ORCHID
| |
| - | |PALE GREEN
| |
| - | |PINK
| |
| - | |PLUM
| |
| - | |-
| |
| - | |PURPLE
| |
| - | |RED
| |
| - | |SALMON
| |
| - | |SEA GREEN
| |
| - | |SIENNA
| |
| - | |-
| |
| - | |SKY BLUE
| |
| - | |SLATE BLUE
| |
| - | |SPRING GREEN
| |
| - | |STEEL BLUE
| |
| - | |TAN
| |
| - | |-
| |
| - | |THISTLE
| |
| - | |TURQUOISE
| |
| - | |VIOLET
| |
| - | |VIOLET RED
| |
| - | |WHEAT
| |
| - | |-
| |
| - | |WHITE
| |
| - | |YELLOW
| |
| - | |YELLOW GREEN
| |
| - | |
| |
| - | |
| |
| - | |}
| |
| - |
| |
| - | <source lang="python">
| |
| - | #!/usr/bin/python
| |
| - | # colours.py
| |
| - |
| |
| - | import wx
| |
| - |
| |
| - | class Colours(wx.Frame):
| |
| - | def __init__(self, parent, id, title):
| |
| - | wx.Frame.__init__(self, parent, id, title, size=(350, 280))
| |
| - |
| |
| - | self.Bind(wx.EVT_PAINT, self.OnPaint)
| |
| - |
| |
| - | self.Centre()
| |
| - | self.Show(True)
| |
| - |
| |
| - | def OnPaint(self, event):
| |
| - | dc = wx.PaintDC(self)
| |
| - | dc.SetPen(wx.Pen('#d4d4d4'))
| |
| - |
| |
| - | dc.SetBrush(wx.Brush('#c56c00'))
| |
| - | dc.DrawRectangle(10, 15, 90, 60)
| |
| - |
| |
| - | dc.SetBrush(wx.Brush('#1ac500'))
| |
| - | dc.DrawRectangle(130, 15, 90, 60)
| |
| - |
| |
| - | dc.SetBrush(wx.Brush('#539e47'))
| |
| - | dc.DrawRectangle(250, 15, 90, 60)
| |
| - |
| |
| - | dc.SetBrush(wx.Brush('#004fc5'))
| |
| - | dc.DrawRectangle(10, 105, 90, 60)
| |
| - |
| |
| - | dc.SetBrush(wx.Brush('#c50024'))
| |
| - | dc.DrawRectangle(130, 105, 90, 60)
| |
| - |
| |
| - | dc.SetBrush(wx.Brush('#9e4757'))
| |
| - | dc.DrawRectangle(250, 105, 90, 60)
| |
| - |
| |
| - | dc.SetBrush(wx.Brush('#5f3b00'))
| |
| - | dc.DrawRectangle(10, 195, 90, 60)
| |
| - |
| |
| - | dc.SetBrush(wx.Brush('#4c4c4c'))
| |
| - | dc.DrawRectangle(130, 195, 90, 60)
| |
| - |
| |
| - | dc.SetBrush(wx.Brush('#785f36'))
| |
| - | dc.DrawRectangle(250, 195, 90, 60)
| |
| - |
| |
| - | app = wx.App()
| |
| - | Colours(None, -1, 'Colours')
| |
| - | app.MainLoop()
| |
| - | </source>
| |
| - |
| |
| - | [[image: wxPython_faq_colours.png | center]]
| |
| - |
| |
| - | === wx.Pen ===
| |
| - | Pen is an elementary graphics object. It is used to draw lines, curves and outlines of rectangles, ellipses, polygons or other shapes.
| |
| - |
| |
| - | <source lang="python">
| |
| - | wx.Pen(wx.Colour colour, widht=1, style=wx.SOLID)
| |
| - | </source>
| |
| - |
| |
| - | The <i>wx.Pen</i> constructor has three parameters. Colour, width and style. Follows a list of possible pen styles.
| |
| - |
| |
| - |
| |
| - | <b>Pen styles</b>
| |
| - |
| |
| - | * wx.SOLID
| |
| - | * wx.DOT
| |
| - | * wx.LONG_DASH
| |
| - | * wx.SHORT_DASH
| |
| - | * wx.DOT_DASH
| |
| - | * wx.TRANSPARENT
| |
| - |
| |
| - | <source lang="python">
| |
| - | #!/usr/bin/python
| |
| - | # pens.py
| |
| - |
| |
| - | import wx
| |
| - |
| |
| - | class Pens(wx.Frame):
| |
| - | def __init__(self, parent, id, title):
| |
| - | wx.Frame.__init__(self, parent, id, title, size=(350, 190))
| |
| - |
| |
| - | self.Bind(wx.EVT_PAINT, self.OnPaint)
| |
| - |
| |
| - | self.Centre()
| |
| - | self.Show(True)
| |
| - |
| |
| - | def OnPaint(self, event):
| |
| - | dc = wx.PaintDC(self)
| |
| - |
| |
| - | dc.SetPen(wx.Pen('#4c4c4c', 1, wx.SOLID))
| |
| - | dc.DrawRectangle(10, 15, 90, 60)
| |
| - |
| |
| - | dc.SetPen(wx.Pen('#4c4c4c', 1, wx.DOT))
| |
| - | dc.DrawRectangle(130, 15, 90, 60)
| |
| - |
| |
| - | dc.SetPen(wx.Pen('#4c4c4c', 1, wx.LONG_DASH))
| |
| - | dc.DrawRectangle(250, 15, 90, 60)
| |
| - |
| |
| - | dc.SetPen(wx.Pen('#4c4c4c', 1, wx.SHORT_DASH))
| |
| - | dc.DrawRectangle(10, 105, 90, 60)
| |
| - |
| |
| - | dc.SetPen(wx.Pen('#4c4c4c', 1, wx.DOT_DASH))
| |
| - | dc.DrawRectangle(130, 105, 90, 60)
| |
| - |
| |
| - | dc.SetPen(wx.Pen('#4c4c4c', 1, wx.TRANSPARENT))
| |
| - | dc.DrawRectangle(250, 105, 90, 60)
| |
| - |
| |
| - | app = wx.App()
| |
| - | Pens(None, -1, 'Pens')
| |
| - | app.MainLoop()
| |
| - | </source>
| |
| - |
| |
| - | If we don't specify a custom brush, a default one is used. The default brush is <i>wx.WHITE_BRUSH</i>. The perimeter of the rectangles is drawn by the pen. The last one has no border. It is transparent, e.g. not visible.
| |
| - |
| |
| - | [[image: wxPython_faq_pens.png | center]]
| |
| - |
| |
| - | === Joins and Caps ===
| |
| - |
| |
| - | A pen object has additional two parameters. The <i>Join</i> and the <i>Cap</i>. The <i>Join</i> defines how joins between lines will be drawn. The <i>Join</i> style has the following options:
| |
| - |
| |
| - | * wx.JOIN_MITER
| |
| - | * wx.JOIN_BEVEL
| |
| - | * wx.JOIN_ROUND
| |
| - |
| |
| - | When using <i>wx.JOIN_MITER</i> the outer edges of the lines are extended. They meet at an angle, and this area is filled.
| |
| - | In <i>wx.JOIN_BEVEL</i> the triangular notch between two lines is filled. In <i>wx.JOIN_ROUND</i> the circular arc between the two lines is filled. The default value is <i>wx.JOIN_ROUND</i>.
| |
| - |
| |
| - | The <i>Cap</i> defines how the line ends will be drawn by the pen. The options are:
| |
| - |
| |
| - | * wx.CAP_ROUND
| |
| - | * wx.CAP_PROJECTING
| |
| - | * wx.CAP_BUTT
| |
| - |
| |
| - | The <i>wx.CAP_ROUND</i> will draw rounded ends.
| |
| - | The <i>wx.CAP_PROJECTING</i> and the <i>wx.CAP_BUTT</i> will both draw square ends. The difference between them is that the
| |
| - | <i>wx.CAP_PROJECTING</i> will extend beyond the end point by the half of the line size. The <i>wx.CAP_ROUND</i> will extend beyond the end point as well.
| |
| - |
| |
| - | <source lang="python">
| |
| - | #!/usr/bin/python
| |
| - | # joinscaps.py
| |
| - |
| |
| - | import wx
| |
| - |
| |
| - | class JoinsCaps(wx.Frame):
| |
| - | def __init__(self, parent, id, title):
| |
| - | wx.Frame.__init__(self, parent, id, title, size=(330, 300))
| |
| - |
| |
| - | self.Bind(wx.EVT_PAINT, self.OnPaint)
| |
| - |
| |
| - | self.Centre()
| |
| - | self.Show(True)
| |
| - |
| |
| - | def OnPaint(self, event):
| |
| - | dc = wx.PaintDC(self)
| |
| - |
| |
| - | pen = wx.Pen('#4c4c4c', 10, wx.SOLID)
| |
| - |
| |
| - | pen.SetJoin(wx.JOIN_MITER)
| |
| - | dc.SetPen(pen)
| |
| - | dc.DrawRectangle(15, 15, 80, 50)
| |
| - |
| |
| - | pen.SetJoin(wx.JOIN_BEVEL)
| |
| - | dc.SetPen(pen)
| |
| - | dc.DrawRectangle(125, 15, 80, 50)
| |
| - |
| |
| - | pen.SetJoin(wx.JOIN_ROUND)
| |
| - | dc.SetPen(pen)
| |
| - | dc.DrawRectangle(235, 15, 80, 50)
| |
| - |
| |
| - | pen.SetCap(wx.CAP_BUTT)
| |
| - | dc.SetPen(pen)
| |
| - | dc.DrawLine(30, 150, 150, 150)
| |
| - |
| |
| - | pen.SetCap(wx.CAP_PROJECTING)
| |
| - | dc.SetPen(pen)
| |
| - | dc.DrawLine(30, 190, 150, 190)
| |
| - |
| |
| - | pen.SetCap(wx.CAP_ROUND)
| |
| - | dc.SetPen(pen)
| |
| - | dc.DrawLine(30, 230, 150, 230)
| |
| - |
| |
| - | pen2 = wx.Pen('#4c4c4c', 1, wx.SOLID)
| |
| - | dc.SetPen(pen2)
| |
| - | dc.DrawLine(30, 130, 30, 250)
| |
| - | dc.DrawLine(150, 130, 150, 250)
| |
| - | dc.DrawLine(155, 130, 155, 250)
| |
| - |
| |
| - | app = wx.App()
| |
| - | JoinsCaps(None, -1, 'Joins and Caps')
| |
| - | app.MainLoop()
| |
| - | </source>
| |
| - |
| |
| - | <source lang="python">
| |
| - | pen = wx.Pen('#4c4c4c', 10, wx.SOLID)
| |
| - | </source>
| |
| - |
| |
| - | In order to see the various <i>Join</i> and <i>Cap</i> styles, we need to set the pen width to be greater than 1.
| |
| - |
| |
| - | <source lang="python">
| |
| - | dc.DrawLine(150, 130, 150, 250)
| |
| - | dc.DrawLine(155, 130, 155, 250)
| |
| - | </source>
| |
| - |
| |
| - | Notice the two enclosing vertical lines. The distance between them is 5px. It is exactly the half of the current pen width.
| |
| - |
| |
| - | [[image: wxPython_faq_joinscaps.png | center]]
| |
| - |
| |
| - | === Gradients ===
| |
| - | In computer graphics, gradient is a smooth blending of shades from light to dark or from one color to another. In 2D drawing programs and paint programs, gradients are used to create colorful backgrounds and special effects as well as to simulate lights and shadows. (answers.com)
| |
| - |
| |
| - | <source lang="python">
| |
| - | GradientFillLinear(wx.Rect rect, wx.Colour initialColour, wx.Colour destColour, int nDirection=wx.EAST)
| |
| - | </source>
| |
| - |
| |
| - | This method fills the area specified by a <i>rect</i> with a linear gradient, starting from
| |
| - |
| |
| - | <i>initialColour</i> and eventually fading to <i>destColour</i>. The nDirection parameter specifies the direction of the colour change, the default value is wx.EAST.
| |
| - |
| |
| - | <source lang="python">
| |
| - | #!/usr/bin/python
| |
| - | # gradients.py
| |
| - |
| |
| - | import wx
| |
| - |
| |
| - | class Gradients(wx.Frame):
| |
| - | def __init__(self, parent, id, title):
| |
| - | wx.Frame.__init__(self, parent, id, title, size=(220, 260))
| |
| - |
| |
| - | self.Bind(wx.EVT_PAINT, self.OnPaint)
| |
| - |
| |
| - | self.Centre()
| |
| - | self.Show(True)
| |
| - |
| |
| - | def OnPaint(self, event):
| |
| - | dc = wx.PaintDC(self)
| |
| - |
| |
| - | dc.GradientFillLinear((20, 20, 180, 40), '#ffec00', '#000000', wx.NORTH)
| |
| - | dc.GradientFillLinear((20, 80, 180, 40), '#ffec00', '#000000', wx.SOUTH)
| |
| - | dc.GradientFillLinear((20, 140, 180, 40), '#ffec00', '#000000', wx.EAST)
| |
| - | dc.GradientFillLinear((20, 200, 180, 40), '#ffec00', '#000000', wx.WEST)
| |
| - |
| |
| - |
| |
| - | app = wx.App()
| |
| - | Gradients(None, -1, 'Gradients')
| |
| - | app.MainLoop()
| |
| - | </source>
| |
| - |
| |
| - | [[image: wxPython_faq_gradients.png | center]]
| |
| - |
| |
| - | === wx.Brush ===
| |
| - | Brush is an elementary graphics object. It is used to paint the background of graphics shapes, such as rectangles, ellipses or polygons.
| |
| - | <source lang="python">
| |
| - | wx.Brush(wx.Colour colour, style=wx.SOLID)
| |
| - | </source>
| |
| - |
| |
| - | The constructor of the <i>wx.Brush</i> accepts two parameters. Colour name and style. The following is a list of possible
| |
| - | brush styles.
| |
| - |
| |
| - | === Brush styles ===
| |
| - | * wx.SOLID
| |
| - | * wx.STIPPLE
| |
| - | * wx.BDIAGONAL_HATCH
| |
| - | * wx.CROSSDIAG_HATCH
| |
| - | * wx.FDIAGONAL_HATCH
| |
| - | * wx.CROSS_HATCH
| |
| - | * wx.HORIZONTAL_HATCH
| |
| - | * wx.VERTICAL_HATCH
| |
| - | * wx.TRANSPARENT
| |
| - |
| |
| - |
| |
| - | <source lang="python">
| |
| - | #!/usr/bin/python
| |
| - | # brushes.py
| |
| - |
| |
| - | import wx
| |
| - |
| |
| - | class Brush(wx.Frame):
| |
| - | def __init__(self, parent, id, title):
| |
| - | wx.Frame.__init__(self, parent, id, title, size=(350, 280))
| |
| - |
| |
| - | self.Bind(wx.EVT_PAINT, self.OnPaint)
| |
| - |
| |
| - | self.Centre()
| |
| - | self.Show(True)
| |
| - |
| |
| - | def OnPaint(self, event):
| |
| - | dc = wx.PaintDC(self)
| |
| - |
| |
| - | dc.SetBrush(wx.Brush('#4c4c4c', wx.CROSS_HATCH))
| |
| - | dc.DrawRectangle(10, 15, 90, 60)
| |
| - |
| |
| - | dc.SetBrush(wx.Brush('#4c4c4c', wx.SOLID))
| |
| - | dc.DrawRectangle(130, 15, 90, 60)
| |
| - |
| |
| - | dc.SetBrush(wx.Brush('#4c4c4c', wx.BDIAGONAL_HATCH))
| |
| - | dc.DrawRectangle(250, 15, 90, 60)
| |
| - |
| |
| - | dc.SetBrush(wx.Brush('#4c4c4c', wx.CROSSDIAG_HATCH))
| |
| - | dc.DrawRectangle(10, 105, 90, 60)
| |
| - |
| |
| - | dc.SetBrush(wx.Brush('#4c4c4c', wx.FDIAGONAL_HATCH))
| |
| - | dc.DrawRectangle(130, 105, 90, 60)
| |
| - |
| |
| - | dc.SetBrush(wx.Brush('#4c4c4c', wx.HORIZONTAL_HATCH))
| |
| - | dc.DrawRectangle(250, 105, 90, 60)
| |
| - |
| |
| - | dc.SetBrush(wx.Brush('#4c4c4c', wx.VERTICAL_HATCH))
| |
| - | dc.DrawRectangle(10, 195, 90, 60)
| |
| - |
| |
| - | dc.SetBrush(wx.Brush('#4c4c4c', wx.TRANSPARENT))
| |
| - | dc.DrawRectangle(130, 195, 90, 60)
| |
| - |
| |
| - |
| |
| - | app = wx.App()
| |
| - | Brush(None, -1, 'Brushes')
| |
| - | app.MainLoop()
| |
| - | </source>
| |
| - |
| |
| - | [[image: wxPython_faq_brushes.png | center]]
| |
| - |
| |
| - | === Custom Patterns ===
| |
| - |
| |
| - | We are not restricted to use predefined patterns. We can easily create our own custom patterns.
| |
| - |
| |
| - | <source lang="python">
| |
| - | wx.Brush BrushFromBitmap(wx.Bitmap stippleBitmap)
| |
| - |
| |
| - | </source>
| |
| - |
| |
| - | This method creates a custom brush from the bitmap.
| |
| - |
| |
| - | <source lang="python">
| |
| - | #!/usr/bin/python
| |
| - | # custompatterns.py
| |
| - |
| |
| - | import wx
| |
| - |
| |
| - | class CustomPatterns(wx.Frame):
| |
| - | def __init__(self, parent, id, title):
| |
| - | wx.Frame.__init__(self, parent, id, title, size=(350, 280))
| |
| - |
| |
| - | self.Bind(wx.EVT_PAINT, self.OnPaint)
| |
| - |
| |
| - | self.Centre()
| |
| - | self.Show(True)
| |
| - |
| |
| - | def OnPaint(self, event):
| |
| - | dc = wx.PaintDC(self)
| |
| - |
| |
| - | dc.SetPen(wx.Pen('#C7C3C3'))
| |
| - |
| |
| - | brush1 = wx.BrushFromBitmap(wx.Bitmap('pattern1.png'))
| |
| - | dc.SetBrush(brush1)
| |
| - | dc.DrawRectangle(10, 15, 90, 60)
| |
| - |
| |
| - | brush2 = wx.BrushFromBitmap(wx.Bitmap('pattern2.png'))
| |
| - | dc.SetBrush(brush2)
| |
| - | dc.DrawRectangle(130, 15, 90, 60)
| |
| - |
| |
| - | brush3 = wx.BrushFromBitmap(wx.Bitmap('pattern3.png'))
| |
| - | dc.SetBrush(brush3)
| |
| - | dc.DrawRectangle(250, 15, 90, 60)
| |
| - |
| |
| - | brush4 = wx.BrushFromBitmap(wx.Bitmap('pattern4.png'))
| |
| - | dc.SetBrush(brush4)
| |
| - | dc.DrawRectangle(10, 105, 90, 60)
| |
| - |
| |
| - | brush5 = wx.BrushFromBitmap(wx.Bitmap('pattern5.png'))
| |
| - | dc.SetBrush(brush5)
| |
| - | dc.DrawRectangle(130, 105, 90, 60)
| |
| - |
| |
| - | brush6 = wx.BrushFromBitmap(wx.Bitmap('pattern6.png'))
| |
| - | dc.SetBrush(brush6)
| |
| - | dc.DrawRectangle(250, 105, 90, 60)
| |
| - |
| |
| - | brush7 = wx.BrushFromBitmap(wx.Bitmap('pattern7.png'))
| |
| - | dc.SetBrush(brush7)
| |
| - | dc.DrawRectangle(10, 195, 90, 60)
| |
| - |
| |
| - | brush8 = wx.BrushFromBitmap(wx.Bitmap('pattern8.png'))
| |
| - | dc.SetBrush(brush8)
| |
| - | dc.DrawRectangle(130, 195, 90, 60)
| |
| - |
| |
| - | brushr9 = wx.BrushFromBitmap(wx.Bitmap('pattern9.png'))
| |
| - | dc.SetBrush(brushr9)
| |
| - | dc.DrawRectangle(250, 195, 90, 60)
| |
| - |
| |
| - |
| |
| - | app = wx.App()
| |
| - | CustomPatterns(None, -1, 'Custom Patterns')
| |
| - | app.MainLoop()
| |
| - | </source>
| |
| - |
| |
| - | I have created some small bitmaps. For this I used the Gimp. These bitmaps are rectangles, usually around 40-150px.
| |
| - |
| |
| - | [[image: wxPython_faq_custompatterns.jpg | center]]
| |
| - |
| |
| - | == Basic primitives ==
| |
| - | === Point ===
| |
| - |
| |
| - | The simplest geometrical object is a point. It is a plain dot on the window.
| |
| - |
| |
| - | <source lang="python">
| |
| - | DrawPoint(int x, int y)
| |
| - | </source>
| |
| - |
| |
| - | This method draws a point at x, y coordinates.
| |
| - |
| |
| - | <source lang="python">
| |
| - | #!/usr/bin/python
| |
| - | # points.py
| |
| - |
| |
| - | import wx
| |
| - | import random
| |
| - |
| |
| - | class Points(wx.Frame):
| |
| - | def __init__(self, parent, id, title):
| |
| - | wx.Frame.__init__(self, parent, id, title, size=(250, 150))
| |
| - |
| |
| - | self.Bind(wx.EVT_PAINT, self.OnPaint)
| |
| - |
| |
| - | self.Centre()
| |
| - | self.Show(True)
| |
| - |
| |
| - | def OnPaint(self, event):
| |
| - | dc = wx.PaintDC(self)
| |
| - |
| |
| - | dc.SetPen(wx.Pen('RED'))
| |
| - |
| |
| - | for i in range(1000):
| |
| - | w, h = self.GetSize()
| |
| - | x = random.randint(1, w-1)
| |
| - | y = random.randint(1, h-1)
| |
| - | dc.DrawPoint(x, y)
| |
| - |
| |
| - |
| |
| - | app = wx.App()
| |
| - | Points(None, -1, 'Points')
| |
| - | app.MainLoop()
| |
| - | </source>
| |
| - |
| |
| - | A single point might be difficult to see. So we create 1000 points.
| |
| - |
| |
| - | <source lang="python">
| |
| - | dc.SetPen(wx.Pen('RED'))
| |
| - | </source>
| |
| - |
| |
| - | Here we set the colour of the pen to red.
| |
| - |
| |
| - | <source lang="python">
| |
| - | w, h = self.GetSize()
| |
| - | x = random.randint(1, w-1)
| |
| - | </source>
| |
| - |
| |
| - | The points are distributed randomly around the client area of the window. They are also distributed dynamically. If we resize the window, the points will be drawn randomly over a new client size. The <i>randint(a, b)</i> method returns a random integer in range [a, b], e.g. including both points.
| |
| - |
| |
| - | [[image: wxPython_faq_points.png | center]]
| |
| - |
| |
| - | === Cross Hair ===
| |
| - |
| |
| - | Cross Hair is a vertical and horizontal line the height and width of the window. It is centered on the given point.
| |
| - |
| |
| - | <source lang="python">
| |
| - | CrossHair(int x, int y)
| |
| - |
| |
| - | </source>
| |
| - |
| |
| - | The method draws a cross hair centered on coordinates x, y.
| |
| - |
| |
| - | <source lang="python">
| |
| - | #!/usr/bin/python
| |
| - | # crosshair.py
| |
| - |
| |
| - | import wx
| |
| - |
| |
| - | class CrossHair(wx.Frame):
| |
| - | def __init__(self, parent, id, title):
| |
| - | wx.Frame.__init__(self, parent, id, title, size=(250, 150))
| |
| - |
| |
| - | self.Bind(wx.EVT_PAINT, self.OnPaint)
| |
| - |
| |
| - | self.Centre()
| |
| - | self.Show(True)
| |
| - |
| |
| - | def OnPaint(self, event):
| |
| - | dc = wx.PaintDC(self)
| |
| - | dc.CrossHair(50, 50)
| |
| - |
| |
| - |
| |
| - | app = wx.App()
| |
| - | CrossHair(None, -1, 'CrossHair')
| |
| - | app.MainLoop()
| |
| - | </source>
| |
| - |
| |
| - | [[image: wxPython_faq_crosshair.png | center]]
| |
| - |
| |
| - | In the following code example we will create a functionality often seen in games. 'Aiming at the enemy.'
| |
| - |
| |
| - | <source lang="python">
| |
| - | #!/usr/bin/python
| |
| - | # crosshair2.py
| |
| - |
| |
| - | import wx
| |
| - |
| |
| - | class CrossHair(wx.Frame):
| |
| - | def __init__(self, parent, id, title):
| |
| - | wx.Frame.__init__(self, parent, id, title, size=(250, 150))
| |
| - |
| |
| - | self.Bind(wx.EVT_MOTION, self.OnMotion)
| |
| - | self.Bind(wx.EVT_LEAVE_WINDOW, self.OnLeaveWindow)
| |
| - |
| |
| - | self.SetBackgroundColour('WHITE')
| |
| - | self.SetCursor(wx.StockCursor(wx.CURSOR_CROSS))
| |
| - | self.Centre()
| |
| - | self.Show(True)
| |
| - |
| |
| - | def DrawCrossHair(self, a, b):
| |
| - | dc = wx.ClientDC(self)
| |
| - | dc.Clear()
| |
| - | dc.SetPen(wx.Pen(wx.Colour(100, 100, 100), 1, wx.DOT))
| |
| - | dc.CrossHair(a, b)
| |
| - |
| |
| - | def OnMotion(self, event):
| |
| - | x, y = event.GetPosition()
| |
| - | self.DrawCrossHair(x, y)
| |
| - |
| |
| - | def OnLeaveWindow(self, event):
| |
| - | dc = wx.ClientDC(self)
| |
| - | dc.SetBackground(wx.Brush('WHITE'))
| |
| - | dc.Clear()
| |
| - |
| |
| - | app = wx.App()
| |
| - | CrossHair(None, -1, 'CrossHair2')
| |
| - | app.MainLoop()
| |
| - | </source>
| |
| - |
| |
| - | <source lang="python">
| |
| - | self.Bind(wx.EVT_MOTION, self.OnMotion)
| |
| - | self.Bind(wx.EVT_LEAVE_WINDOW, self.OnLeaveWindow)
| |
| - | </source>
| |
| - |
| |
| - | We bind two events to event handlers. The <i>wx.EVT_MOTION</i> event is generated, when we move a cursor over the window.
| |
| - | The second event <i>wx.EVT_LEAVE_WINDOW</i> is generated, when we leave the window with our mouse cursor.
| |
| - |
| |
| - |
| |
| - | <source lang="python">
| |
| - | def OnMotion(self, event):
| |
| - | x, y = event.GetPosition()
| |
| - | self.DrawCrossHair(x, y)
| |
| - | </source>
| |
| - |
| |
| - | Every time we move a cursor over a window, the method <i>OnMotion()</i> is called. In this method we figure out the current position of the mouse cursor and call the <i>DrawCrossHair</i> method, which is responsible for drawing the cross hair.
| |
| - |
| |
| - | <source lang="python">
| |
| - | def DrawCrossHair(self, a, b):
| |
| - | dc = wx.ClientDC(self)
| |
| - | dc.Clear()
| |
| - | dc.SetPen(wx.Pen(wx.Colour(100, 100, 100), 1, wx.DOT))
| |
| - | dc.CrossHair(a, b)
| |
| - | </source>
| |
| - |
| |
| - | The user defined method <i>DrawCrossHair()</i> draws the cross hair primitive. Notice that to do the drawing, we use the <i>wx.ClientDC</i> device context. Remember that this device context should be used outside the paint event. This script is a perfect example, where we use <i>wx.ClientDC</i>. Not <i>wx.PaintDC</i>.
| |
| - | Before we draw a new cross hair drawing, we must clear the old one. This is done with the <i>Clear()</i> method.
| |
| - | It does clear the device context area. It uses the default <i>wx.WHITE_BRUSH</i> brush, unless we set a different one.
| |
| - | We have set the window cursor to <i>wx.CURSOR_CROSS</i>. In order to actually see it, we have set the pen, which draws the cross hair, to light gray color, 1px wide, dotted.
| |
| - |
| |
| - | === Chech Mark ===
| |
| - | Check Mark is another simple primitive.
| |
| - | <source lang="python">
| |
| - | DrawCheckMark(int x, int y, int width, int height)
| |
| - | </source>
| |
| - |
| |
| - | The <i>DrawCheckMark()</i> method draws a check mark on the window at coordinates x, y. It draws the check mark inside the rectangle defined by <i>width</i> and <i>height</i> parameters.
| |
| - |
| |
| - | <source lang="python">
| |
| - | #!/usr/bin/python
| |
| - | # checkmark.py
| |
| - |
| |
| - | import wx
| |
| - |
| |
| - | class CheckMark(wx.Frame):
| |
| - | def __init__(self, parent, id, title):
| |
| - | wx.Frame.__init__(self, parent, id, title, size=(250, 150))
| |
| - |
| |
| - | self.Bind(wx.EVT_PAINT, self.OnPaint)
| |
| - |
| |
| - | self.Centre()
| |
| - | self.Show(True)
| |
| - |
| |
| - | def OnPaint(self, event):
| |
| - | dc = wx.PaintDC(self)
| |
| - | dc.DrawCheckMark(100, 50, 30, 40)
| |
| - |
| |
| - |
| |
| - | app = wx.App()
| |
| - | CheckMark(None, -1, 'Check Mark')
| |
| - | app.MainLoop()
| |
| - | </source>
| |
| - |
| |
| - | [[image: wxPython_faq_checkmark.png | center]]
| |
| - |
| |
| - | == Shapes ==
| |
| - | Shapes are more sophisticated geometrical objects.
| |
| - | We will draw various geometrical shapes in the following example.
| |
| - |
| |
| - | <source lang="python">
| |
| - | #!/usr/bin/python
| |
| - | # shapes.py
| |
| - |
| |
| - | import wx
| |
| - |
| |
| - | class Shapes(wx.Frame):
| |
| - | def __init__(self, parent, id, title):
| |
| - | wx.Frame.__init__(self, parent, id, title, size=(350, 300))
| |
| - |
| |
| - | self.Bind(wx.EVT_PAINT, self.OnPaint)
| |
| - |
| |
| - | self.Centre()
| |
| - | self.Show(True)
| |
| - |
| |
| - | def OnPaint(self, event):
| |
| - | dc = wx.PaintDC(self)
| |
| - |
| |
| - | dc.DrawEllipse(20, 20, 90, 60)
| |
| - | dc.DrawRoundedRectangle(130, 20, 90, 60, 10)
| |
| - | dc.DrawArc(240, 40, 340, 40, 290, 20)
| |
| - |
| |
| - | dc.DrawPolygon(((130, 140), (180, 170), (180, 140), (220, 110), (140, 100)))
| |
| - | dc.DrawRectangle(20, 120, 80, 50)
| |
| - | dc.DrawSpline(((240, 170), (280, 170), (285, 110), (325, 110)))
| |
| - |
| |
| - | dc.DrawLines(((20, 260), (100, 260), (20, 210), (100, 210)))
| |
| - | dc.DrawCircle(170, 230, 35)
| |
| - | dc.DrawRectangle(250, 200, 60, 60)
| |
| - |
| |
| - | app = wx.App()
| |
| - | Shapes(None, -1, 'Shapes')
| |
| - | app.MainLoop()
| |
| - |
| |
| - | </source>
| |
| - |
| |
| - | In our example we have drawn an ellipse, a rounded rectangle, an arc, a rectangle ,a polygon, splines, lines, a circle and a square (from right to left, from top to bottom). A circle is a special kind of ellipse and a square is a special kind of rectangle.
| |
| - |
| |
| - | [[image: wxPython_faq_shapes.png | center]]
| |
| - |
| |
| - | == Regions ==
| |
| - | The device context can be divided into several parts called <b>Regions</b>. A region can be of any shape.
| |
| - | A region can be a simple rectangle or circle. With <i>Union</i>, <i>Intersect</i>, <i>Substract</i> and <i>Xor</i> operations
| |
| - | we can create complex regions from simple ones. Regions are used for outlining, filling or clipping.
| |
| - |
| |
| - | We can create regions in three ways. The easiest way is to create a rectangular region. More complex regions can be created from a list of points of from a bitmap.
| |
| - |
| |
| - | <source lang="python">
| |
| - | wx.Region(int x=0, int y=0, int width=0, int height=0)
| |
| - | </source>
| |
| - |
| |
| - | This constructor creates a rectangular region.
| |
| - |
| |
| - | <source lang="python">
| |
| - | wx.RegionFromPoints(list points, int fillStyle=wx.WINDING_RULE)
| |
| - |
| |
| - | </source>
| |
| - |
| |
| - | This constructor creates a polygonal region. The <i>fillStyle</i> parameter can be wx.WINDING_RULE or wx.ODDEVEN_RULE.
| |
| - |
| |
| - | <source lang="python">
| |
| - | wx.RegionFromBitmap(wx.Bitmap bmp)
| |
| - | </source>
| |
| - |
| |
| - | The most complex regions can be created with the previous method.
| |
| - |
| |
| - | Before we go to the regions, we will create a small example first. We divide the topic into several parts so that it is easier to understand. You may find it a good idea to revise your school math. [http://en.wikipedia.org/wiki/Circle Here] we can find a good article.
| |
| - |
| |
| - | <source lang="python">
| |
| - | #!/usr/bin/python
| |
| - | # lines.py
| |
| - |
| |
| - | import wx
| |
| - | from math import hypot, sin, cos, pi
| |
| - |
| |
| - | class Lines(wx.Frame):
| |
| - | def __init__(self, parent, id, title):
| |
| - | wx.Frame.__init__(self, parent, id, title, size=(450, 400))
| |
| - |
| |
| - | self.Bind(wx.EVT_PAINT, self.OnPaint)
| |
| - |
| |
| - | self.Centre()
| |
| - | self.Show(True)
| |
| - |
| |
| - | def OnPaint(self, event):
| |
| - | dc = wx.PaintDC(self)
| |
| - | size_x, size_y = self.GetClientSizeTuple()
| |
| - | dc.SetDeviceOrigin(size_x/2, size_y/2)
| |
| - |
| |
| - | radius = hypot(size_x/2, size_y/2)
| |
| - | angle = 0
| |
| - |
| |
| - | while (angle < 2*pi):
| |
| - | x = radius*cos(angle)
| |
| - | y = radius*sin(angle)
| |
| - | dc.DrawLinePoint((0, 0), (x, y))
| |
| - | angle = angle + 2*pi/360
| |
| - |
| |
| - | app = wx.App()
| |
| - | Lines(None, -1, 'Lines')
| |
| - | app.MainLoop()
| |
| - |
| |
| - | </source>
| |
| - |
| |
| - | In this example we draw 260 lines from the middle of the client area. The distance between two lines is 1 degree. We create an interesting figure.
| |
| - |
| |
| - | <source lang="python">
| |
| - | import wx
| |
| - | from math import hypot, sin, cos, pi
| |
| - | </source>
| |
| - |
| |
| - | We need three mathematical functions and one constant from the math module.
| |
| - |
| |
| - | <source lang="python">
| |
| - | dc.SetDeviceOrigin(size_x/2, size_y/2)
| |
| - | </source>
| |
| - |
| |
| - | The method <i>SetDeviceOrigin()</i> creates a new beginning of the coordinate system. We place it into the middle of the
| |
| - | client area. By repositioning the coordinate system, we make our drawing less complicated.
| |
| - |
| |
| - | <source lang="python">
| |
| - | radius = hypot(size_x/2, size_y/2)
| |
| - | </source>
| |
| - |
| |
| - | Here we get the Hypotenuse. It is the longest line, we can draw from the middle of the client area. It is the length of the line, that should be drawn from the beginning into the corner of the window. This way most of the lines are not drawn fully. The overlapping parts are not visible. see [http://en.wikipedia.org/wiki/Hypotenuse Hypotenuse].
| |
| - |
| |
| - | <source lang="python">
| |
| - | x = radius*cos(angle)
| |
| - | y = radius*sin(angle)
| |
| - | </source>
| |
| - |
| |
| - | These are parametric functions. They are used to find [x, y] points on the curve. All 360 lines are drawn from the beginning of the coordinate system up to the points on the circle.
| |
| - |
| |
| - | [[image: wxPython_faq_lines.png | center]]
| |
| - |
| |
| - | === Clipping ===
| |
| - | <i>Clipping</i> is restricting drawing to a certain area. Clipping is used in two cases. To create effects and to improve performance of the application.
| |
| - | We restrict drawing to a certain region with the <i>SetClippingRegionAsRegion()</i> method.
| |
| - |
| |
| - | In the following example we will modify and enhance our previous script.
| |
| - |
| |
| - | <source lang="python">
| |
| - | #!/usr/bin/python
| |
| - | # star.py
| |
| - |
| |
| - | import wx
| |
| - | from math import hypot, sin, cos, pi
| |
| - |
| |
| - | class Star(wx.Frame):
| |
| - | def __init__(self, parent, id, title):
| |
| - | wx.Frame.__init__(self, parent, id, title, size=(350, 300))
| |
| - |
| |
| - | self.Bind(wx.EVT_PAINT, self.OnPaint)
| |
| - |
| |
| - | self.Centre()
| |
| - | self.Show(True)
| |
| - |
| |
| - | def OnPaint(self, event):
| |
| - | dc = wx.PaintDC(self)
| |
| - |
| |
| - | dc.SetPen(wx.Pen('#424242'))
| |
| - | size_x, size_y = self.GetClientSizeTuple()
| |
| - | dc.SetDeviceOrigin(size_x/2, size_y/2)
| |
| - |
| |
| - | points = (((0, 85), (75, 75), (100, 10), (125, 75), (200, 85),
| |
| - | (150, 125), (160, 190), (100, 150), (40, 190), (50, 125)))
| |
| - |
| |
| - | region = wx.RegionFromPoints(points)
| |
| - | dc.SetClippingRegionAsRegion(region)
| |
| - |
| |
| - | radius = hypot(size_x/2, size_y/2)
| |
| - | angle = 0
| |
| - |
| |
| - | while (angle < 2*pi):
| |
| - | x = radius*cos(angle)
| |
| - | y = radius*sin(angle)
| |
| - | dc.DrawLinePoint((0, 0), (x, y))
| |
| - | angle = angle + 2*pi/360
| |
| - |
| |
| - | dc.DestroyClippingRegion()
| |
| - |
| |
| - |
| |
| - | app = wx.App()
| |
| - | Star(None, -1, 'Star')
| |
| - | app.MainLoop()
| |
| - | </source>
| |
| - |
| |
| - |
| |
| - | We draw again all the 360 lines. But this time, only a portion of the client aren is drawn. The region that we restrict our drawing to is a star object.
| |
| - |
| |
| - | <source lang="python">
| |
| - | region = wx.RegionFromPoints(points)
| |
| - | dc.SetClippingRegionAsRegion(region)
| |
| - | </source>
| |
| - |
| |
| - | We create a region from the list of points with the <i>wx.RegionFromPoins()</i> method. The <i>SetClippingRegionAsRegion()</i>
| |
| - |
| |
| - | method restricts the drawing to the specified region. In our case it is a star object.
| |
| - |
| |
| - | <source lang="python">
| |
| - | dc.DestroyClippingRegion()
| |
| - | </source>
| |
| - |
| |
| - | We must destroy the clipping region.
| |
| - |
| |
| - | [[image: wxPython_faq_star.png | center]]
| |
| - |
| |
| - | === Operations over Regions ===
| |
| - | Regions can be combined to create more complex shapes. We can use four set operations. <i>Union</i>, <i>Intersect</i>, <i>Substract</i> and <i>Xor</i>.
| |
| - |
| |
| - | The following example shows all four operations in action.
| |
| - |
| |
| - | <source lang="python">
| |
| - | #!/usr/bin/python
| |
| - | # operations.py
| |
| - |
| |
| - | import wx
| |
| - |
| |
| - | class Operations(wx.Frame):
| |
| - | def __init__(self, parent, id, title):
| |
| - | wx.Frame.__init__(self, parent, id, title, size=(270, 220))
| |
| - |
| |
| - | self.Bind(wx.EVT_PAINT, self.OnPaint)
| |
| - |
| |
| - | self.Centre()
| |
| - | self.Show(True)
| |
| - |
| |
| - | def OnPaint(self, event):
| |
| - | dc = wx.PaintDC(self)
| |
| - | dc.SetPen(wx.Pen('#d4d4d4'))
| |
| - |
| |
| - | dc.DrawRectangle(20, 20, 50, 50)
| |
| - | dc.DrawRectangle(30, 40, 50, 50)
| |
| - |
| |
| - | dc.SetBrush(wx.Brush('#ffffff'))
| |
| - | dc.DrawRectangle(100, 20, 50, 50)
| |
| - | dc.DrawRectangle(110, 40, 50, 50)
| |
| - | region1 = wx.Region(100, 20, 50, 50)
| |
| - | region2 = wx.Region(110, 40, 50, 50)
| |
| - | region1.IntersectRegion(region2)
| |
| - | rect = region1.GetBox()
| |
| - | dc.SetClippingRegionAsRegion(region1)
| |
| - | dc.SetBrush(wx.Brush('#ff0000'))
| |
| - | dc.DrawRectangleRect(rect)
| |
| - | dc.DestroyClippingRegion()
| |
| - |
| |
| - | dc.SetBrush(wx.Brush('#ffffff'))
| |
| - | dc.DrawRectangle(180, 20, 50, 50)
| |
| - | dc.DrawRectangle(190, 40, 50, 50)
| |
| - | region1 = wx.Region(180, 20, 50, 50)
| |
| - | region2 = wx.Region(190, 40, 50, 50)
| |
| - | region1.UnionRegion(region2)
| |
| - | dc.SetClippingRegionAsRegion(region1)
| |
| - | rect = region1.GetBox()
| |
| - | dc.SetBrush(wx.Brush('#fa8e00'))
| |
| - | dc.DrawRectangleRect(rect)
| |
| - | dc.DestroyClippingRegion()
| |
| - |
| |
| - | dc.SetBrush(wx.Brush('#ffffff'))
| |
| - | dc.DrawRectangle(20, 120, 50, 50)
| |
| - | dc.DrawRectangle(30, 140, 50, 50)
| |
| - | region1 = wx.Region(20, 120, 50, 50)
| |
| - | region2 = wx.Region(30, 140, 50, 50)
| |
| - | region1.XorRegion(region2)
| |
| - | rect = region1.GetBox()
| |
| - | dc.SetClippingRegionAsRegion(region1)
| |
| - | dc.SetBrush(wx.Brush('#619e1b'))
| |
| - | dc.DrawRectangleRect(rect)
| |
| - | dc.DestroyClippingRegion()
| |
| - |
| |
| - | dc.SetBrush(wx.Brush('#ffffff'))
| |
| - | dc.DrawRectangle(100, 120, 50, 50)
| |
| - | dc.DrawRectangle(110, 140, 50, 50)
| |
| - | region1 = wx.Region(100, 120, 50, 50)
| |
| - | region2 = wx.Region(110, 140, 50, 50)
| |
| - | region1.SubtractRegion(region2)
| |
| - | rect = region1.GetBox()
| |
| - | dc.SetClippingRegionAsRegion(region1)
| |
| - | dc.SetBrush(wx.Brush('#715b33'))
| |
| - | dc.DrawRectangleRect(rect)
| |
| - | dc.DestroyClippingRegion()
| |
| - |
| |
| - | dc.SetBrush(wx.Brush('#ffffff'))
| |
| - | dc.DrawRectangle(180, 120, 50, 50)
| |
| - | dc.DrawRectangle(190, 140, 50, 50)
| |
| - | region1 = wx.Region(180, 120, 50, 50)
| |
| - | region2 = wx.Region(190, 140, 50, 50)
| |
| - | region2.SubtractRegion(region1)
| |
| - | rect = region2.GetBox()
| |
| - | dc.SetClippingRegionAsRegion(region2)
| |
| - | dc.SetBrush(wx.Brush('#0d0060'))
| |
| - | dc.DrawRectangleRect(rect)
| |
| - | dc.DestroyClippingRegion()
| |
| - |
| |
| - | app = wx.App()
| |
| - | Operations(None, -1, 'Operations')
| |
| - | app.MainLoop()
| |
| - | </source>
| |
| - |
| |
| - |
| |
| - | [[image: wxPython_faq_operations.png | center]]
| |
| - |
| |
| - | <!--=== A wx.ListBox widget ===-->
| |
| - |
| |
| - | == Mapping modes ==
| |
| - |
| |
| - | === Speak in English, measure in Metric ===
| |
| - |
| |
| - | The English language became the global language for communication. So did the metric system become the global system in measuremet. According to this wikipedia [http://en.wikipedia.org/wiki/Metric_system article], there are only three exceptions. The USA, Liberia and Myanmar. For example, Americans use Fahrenheits to measure temperature, gallons to tank their cars or pounds to weigh loads.
| |
| - |
| |
| - | This might lead to some funny situations. "It is very hot today. What is the temperature?""Let me see. It is one hundred and ,wait one hundred and ..."?!?!"... five Fahrenheits." "Aha."
| |
| - | <i>(When I was in US talking to an American)</i>
| |
| - |
| |
| - | Even though we in Europe use the metric system, there are still exceptions. The USA is dominating the IT and we are importing their standards. So we also say that we have a 17 Inch monitor. Graphics can be put into a file, displayed on the screen of a monitor or other device (cameras, videocameras, mobile phones) or printed with a printer. Paper size can be set in millimeters, points or inches, the resolution of a screen is in pixels, the quality of a text is determined by the number of dots per inch. We have also dots, bits or samples. This is one of the reasons we have <b>logical</b> and <b>device</b> units.
| |
| - |
| |
| - | === Logical and device units ===
| |
| - |
| |
| - | If we draw text or geometrical primitives on the client area, we position them using logical units.
| |
| - |
| |
| - | <center>[[image: wxPython_faq_drawtextstring.jpg | center]]</center>
| |
| - |
| |
| - | If we want to draw some text, we provide the text parameter and the x, y positions. x, y are in logical units.
| |
| - | The device then draws the text in device units. Logical and device units may be the same, or they may differ.
| |
| - | Logical units are used by people (millimeters), device units are are native to a <i>particular</i> device. For example a native device unit for a screen is pixel. The native device unit for the <i>HEWLETT PACKARD LaserJet 1022</i> is 1200 dpi. (dots per inch).
| |
| - |
| |
| - | So far we have talked about various measurement units. The <b>mapping mode</b> of the device is a way how to convert logical units to device units. wxPython has the following mapping modes:
| |
| - |
| |
| - | {|
| |
| - | |-
| |
| - | !Mapping Mode
| |
| - | !Logical Unit
| |
| - | |-
| |
| - | |wx.MM_TEXT
| |
| - | |1 pixel
| |
| - | |-
| |
| - | | id="gray" | wx.MM_METRIC
| |
| - | | id="gray" | 1 millimeter
| |
| - | |-
| |
| - | |wx.MM_LOMETRIC
| |
| - | |1/10 of a millimeter
| |
| - | |-
| |
| - | | id="gray" | wx.MM_POINTS
| |
| - | | id="gray" | 1 point, 1/72 of an inch
| |
| - | |-
| |
| - | |wx.MM_TWIPS
| |
| - | |1/20 of a point or 1/1440 of an inch
| |
| - | |}
| |
| - |
| |
| - | The default mapping mode is wx.MM_TEXT. In this mode, the logical unit is the same as the device unit. When people position object on a screen or design a web page, they think usually in pixels. Web designers create three column pages and these columns are set in pixels. The lowest common denominator for a page is often 800 px etc. This thinking is natural as we know our monitors have e.g. 1024x768 pxs. We are not going to do convertions, rather we are accustomed to think in pixels.
| |
| - | If we want to draw a structure in millimeters, we can use the two metric mapping modes. Drawing directly in millimeters is too thick for a screen, that's why we have the wx.MM_LOMETRIC mapping mode.
| |
| - |
| |
| - | <center>[[image: wxPython_faq_setmapmode.jpg | center]]</center>
| |
| - |
| |
| - | To set a different mapping mode, we use the <i>SetMapMode()</i> method.
| |
| - |
| |
| - | === First ruler example ===
| |
| - |
| |
| - | The first ruler example will measure screen objects in pixels.
| |
| - |
| |
| - | <source lang="python">
| |
| - | #!/usr/bin/python
| |
| - | # ruler1.py
| |
| - |
| |
| - | import wx
| |
| - |
| |
| - |
| |
| - | RW = 701 # ruler widht
| |
| - | RM = 10 # ruler margin
| |
| - | RH = 60 # ruler height
| |
| - |
| |
| - |
| |
| - | class Ruler1(wx.Frame):
| |
| - | def __init__(self, parent, id, title):
| |
| - | wx.Frame.__init__(self, parent, id, title, size=(RW + 2*RM, 60),
| |
| - | style=wx.FRAME_NO_TASKBAR | wx.NO_BORDER | wx.STAY_ON_TOP)
| |
| - | self.font = wx.Font(7, wx.FONTFAMILY_DEFAULT, wx.FONTSTYLE_NORMAL,
| |
| - | wx.FONTWEIGHT_BOLD, False, 'Courier 10 Pitch')
| |
| - |
| |
| - | self.Bind(wx.EVT_PAINT, self.OnPaint)
| |
| - | self.Bind(wx.EVT_LEFT_DOWN, self.OnLeftDown)
| |
| - | self.Bind(wx.EVT_RIGHT_DOWN, self.OnRightDown)
| |
| - | self.Bind(wx.EVT_MOTION, self.OnMouseMove)
| |
| - |
| |
| - | self.Centre()
| |
| - | self.Show(True)
| |
| - |
| |
| - | def OnPaint(self, event):
| |
| - | dc = wx.PaintDC(self)
| |
| - |
| |
| - | brush = wx.BrushFromBitmap(wx.Bitmap('granite.png'))
| |
| - | dc.SetBrush(brush)
| |
| - | dc.DrawRectangle(0, 0, RW+2*RM, RH)
| |
| - | dc.SetFont(self.font)
| |
| - |
| |
| - |
| |
| - | dc.SetPen(wx.Pen('#F8FF25'))
| |
| - | dc.SetTextForeground('#F8FF25')
| |
| - |
| |
| - |
| |
| - | for i in range(RW):
| |
| - | if not (i % 100):
| |
| - | dc.DrawLine(i+RM, 0, i+RM, 10)
| |
| - | w, h = dc.GetTextExtent(str(i))
| |
| - | dc.DrawText(str(i), i+RM-w/2, 11)
| |
| - | elif not (i % 20):
| |
| - | dc.DrawLine(i+RM, 0, i+RM, 8)
| |
| - | elif not (i % 2): dc.DrawLine(i+RM, 0, i+RM, 4)
| |
| - |
| |
| - | def OnLeftDown(self, event):
| |
| - | pos = event.GetPosition()
| |
| - | x, y = self.ClientToScreen(event.GetPosition())
| |
| - | ox, oy = self.GetPosition()
| |
| - | dx = x - ox
| |
| - | dy = y - oy
| |
| - | self.delta = ((dx, dy))
| |
| - |
| |
| - | def OnMouseMove(self, event):
| |
| - | if event.Dragging() and event.LeftIsDown():
| |
| - | x, y = self.ClientToScreen(event.GetPosition())
| |
| - | fp = (x - self.delta[0], y - self.delta[1])
| |
| - | self.Move(fp)
| |
| - |
| |
| - | def OnRightDown(self, event):
| |
| - | self.Close()
| |
| - |
| |
| - | app = wx.App()
| |
| - | Ruler1(None, -1, '')
| |
| - | app.MainLoop()
| |
| - |
| |
| - | </source>
| |
| - |
| |
| - | In this example we create a ruler. This ruler will measure screen objects in pixels. We left the default mapping mode, which is <i>wx.MM_TEXT</i>. As we have already mentioned, this mode has the same logical and device units. In our case, pixels.
| |
| - |
| |
| - | <source lang="python">
| |
| - |
| |
| - | wx.Frame.__init__(self, parent, id, title, size=(RW + 2*RM, 60), style=wx.FRAME_NO_TASKBAR |
| |
| - | wx.NO_BORDER | wx.STAY_ON_TOP)
| |
| - | </source>
| |
| - |
| |
| - | We have created a borderless window. The ruler is 721 px wide. The ruler is RW + 2*RM = 701 + 20 = 721. The ruler shows 700 numbers. 0 ... 700 is 701 pixels. A ruler has a margin on both sides, 2*10 is 20 pixels. Together it makes 721 pixels.
| |
| - |
| |
| - | <source lang="python">
| |
| - | brush = wx.BrushFromBitmap(wx.Bitmap('granite.png'))
| |
| - | dc.SetBrush(brush)
| |
| - | dc.DrawRectangle(0, 0, RW+2*RM, RH)
| |
| - | </source>
| |
| - |
| |
| - | Here we draw a custom pattern onto the window. I have used a predefined pattern available in the GIMP. It is called granite.
| |
| - |
| |
| - | <source lang="python">
| |
| - | w, h = dc.GetTextExtent(str(i))
| |
| - | dc.DrawText(str(i), i+RM-w/2, 11)
| |
| - | </source>
| |
| - |
| |
| - | These lines ensure, that we align the text correctly. The <i>GetTextExtent()</i> method returns the width and the height of the text.
| |
| - |
| |
| - | We do not have a border around our window. So we must handle moving manually by additional code.
| |
| - | The <i>OnLeftDown()</i> and the <i>OnMouseMove()</i> methods enable us to move the ruler. (TODO:link to dragging.)
| |
| - |
| |
| - | <center>
| |
| - | [[image: wxPython_faq_ruler1.jpg | center]]
| |
| - | </center>
| |
| - |
| |
| - | == Practical examples ==
| |
| - | You might ask yourself, why do we need all those lines, pens, gradients? What is it good for?
| |
| - | The following scripts will bring some practical examples. We will utilize, what we have learnt in practice.
| |
| - |
| |
| - | === Charts ===
| |
| - |
| |
| - | Creating charts is an excelent example of utilizing gdi drawing functions. Charts are not GUI widgets. No gui toolkit provides charts as part of the library. One exception is wxWidgets toolkit (and so the wxPython). But these charts are very simple and cannot be used in real applications. A developer has usually two options. To create his own charting library or use a third-party library.
| |
| - |
| |
| - | In the following example we create a simple line chart. We do not dwell into all details. I kept the example intentionally simple. A lot of things still remain undone. But you can grasp the idea and follow it.
| |
| - |
| |
| - | <source lang="python">
| |
| - | #!/usr/bin/python
| |
| - | # linechart.py
| |
| - |
| |
| - | import wx
| |
| - |
| |
| - | data = ((10, 9), (20, 22), (30, 21), (40, 30), (50, 41),
| |
| - | (60, 53), (70, 45), (80, 20), (90, 19), (100, 22),
| |
| - | (110, 42), (120, 62), (130, 43), (140, 71), (150, 89),
| |
| - | (160, 65), (170, 126), (180, 187), (190, 128), (200, 125),
| |
| - | (210, 150), (220, 129), (230, 133), (240, 134), (250, 165),
| |
| - | (260, 132), (270, 130), (280, 159), (290, 163), (300, 94))
| |
| - |
| |
| - | years = ('2003', '2004', '2005')
| |
| - |
| |
| - |
| |
| - | class LineChart(wx.Panel):
| |
| - | def __init__(self, parent):
| |
| - | wx.Panel.__init__(self, parent)
| |
| - | self.SetBackgroundColour('WHITE')
| |
| - |
| |
| - | self.Bind(wx.EVT_PAINT, self.OnPaint)
| |
| - |
| |
| - | def OnPaint(self, event):
| |
| - | dc = wx.PaintDC(self)
| |
| - | dc.SetDeviceOrigin(40, 240)
| |
| - | dc.SetAxisOrientation(True, True)
| |
| - | dc.SetPen(wx.Pen('WHITE'))
| |
| - | dc.DrawRectangle(1, 1, 300, 200)
| |
| - | self.DrawAxis(dc)
| |
| - | self.DrawGrid(dc)
| |
| - | self.DrawTitle(dc)
| |
| - | self.DrawData(dc)
| |
| - |
| |
| - | def DrawAxis(self, dc):
| |
| - | dc.SetPen(wx.Pen('#0AB1FF'))
| |
| - | font = dc.GetFont()
| |
| - | font.SetPointSize(8)
| |
| - | dc.SetFont(font)
| |
| - | dc.DrawLine(1, 1, 300, 1)
| |
| - | dc.DrawLine(1, 1, 1, 201)
| |
| - |
| |
| - | for i in range(20, 220, 20):
| |
| - | dc.DrawText(str(i), -30, i+5)
| |
| - | dc.DrawLine(2, i, -5, i)
| |
| - |
| |
| - | for i in range(100, 300, 100):
| |
| - | dc.DrawLine(i, 2, i, -5)
| |
| - |
| |
| - | for i in range(3):
| |
| - | dc.DrawText(years[i], i*100-13, -10)
| |
| - |
| |
| - | def DrawGrid(self, dc):
| |
| - | dc.SetPen(wx.Pen('#d5d5d5'))
| |
| - |
| |
| - | for i in range(20, 220, 20):
| |
| - | dc.DrawLine(2, i, 300, i)
| |
| - |
| |
| - | for i in range(100, 300, 100):
| |
| - | dc.DrawLine(i, 2, i, 200)
| |
| - |
| |
| - | def DrawTitle(self, dc):
| |
| - | font = dc.GetFont()
| |
| - | font.SetWeight(wx.FONTWEIGHT_BOLD)
| |
| - | dc.SetFont(font)
| |
| - | dc.DrawText('Historical Prices', 90, 235)
| |
| - |
| |
| - |
| |
| - | def DrawData(self, dc):
| |
| - | dc.SetPen(wx.Pen('#0ab1ff'))
| |
| - | for i in range(10, 310, 10):
| |
| - | dc.DrawSpline(data)
| |
| - |
| |
| - |
| |
| - | class LineChartExample(wx.Frame):
| |
| - | def __init__(self, parent, id, title):
| |
| - | wx.Frame.__init__(self, parent, id, title, size=(390, 300))
| |
| - |
| |
| - | panel = wx.Panel(self, -1)
| |
| - | panel.SetBackgroundColour('WHITE')
| |
| - |
| |
| - | hbox = wx.BoxSizer(wx.HORIZONTAL)
| |
| - | linechart = LineChart(panel)
| |
| - | hbox.Add(linechart, 1, wx.EXPAND | wx.ALL, 15)
| |
| - | panel.SetSizer(hbox)
| |
| - |
| |
| - | self.Centre()
| |
| - | self.Show(True)
| |
| - |
| |
| - |
| |
| - | app = wx.App()
| |
| - | LineChartExample(None, -1, 'A line chart')
| |
| - | app.MainLoop()
| |
| - | </source>
| |
| - |
| |
| - | <source lang="python">
| |
| - | dc.SetDeviceOrigin(40, 240)
| |
| - | dc.SetAxisOrientation(True, True)
| |
| - | </source>
| |
| - |
| |
| - | By default the coordinate system in wxPython begins at point [0, 0]. The beginning point is located at the upper left corner of the clinet area. The orientation of x values is from left to right and the orientation of y values is from top to bottom.
| |
| - | The values can be only positive. This system is used in all GUI toolkits. (All I am aware of.)
| |
| - |
| |
| - | For charting we use cartesian coordinate system. In cartesian system, we can have both positive and negative values. The orientation of the x values is from left to right and the orientation of y values is from bottom to top. The origin is usually in the middle. But it is not compulsory.
| |
| - |
| |
| - | <source lang="python">
| |
| - | dc.SetDeviceOrigin(40, 240)
| |
| - | dc.SetAxisOrientation(True, True)
| |
| - | </source>
| |
| - |
| |
| - | The <i>SetDeviceOrigin()</i> method moves the origin to a new point on the client area. This is called <b>linear translation</b>. Then we change the axis orientation with the <i>SetAxisOrientation()</i> method.
| |
| - |
| |
| - | <source lang="python">
| |
| - | SetAxisOrientation(bool xLeftRight, bool yBottomUp)
| |
| - | </source>
| |
| - |
| |
| - | The method signature is self-explanatory. We can put true or false values to these two parameters.
| |
| - |
| |
| - | <source lang="python">
| |
| - | self.DrawAxis(dc)
| |
| - | self.DrawGrid(dc)
| |
| - | self.DrawTitle(dc)
| |
| - | self.DrawData(dc)
| |
| - | </source>
| |
| - |
| |
| - | We separate the construction of the chart into four methods. The first will draw axis, the second will draw the grid, the third the title and the last one will draw the data.
| |
| - |
| |
| - | <source lang="python">
| |
| - | for i in range(3):
| |
| - | dc.DrawText(years[i], i*100-13, -10)
| |
| - | </source>
| |
| - |
| |
| - | Because of the simplicity of the script, there are some magic numbers. In reality, we would have to calculate them.
| |
| - | In the previous code example, we draw the years alongside the x axis. We subtract 13 px from the x value. This is done to center the years over the vertical lines. It works on my linux box. I might not work correctly on other platforms. It might not work even on linux boxes with different themes. You just play a bit with this example. Adjusting it to fit under the different circumstances is no rocket science. Normally, we need to calculate the width of the chart, the width of the text and center the text manually.
| |
| - |
| |
| - | [[image: wxPython_faq_linechart.png | center]]
| |
| - |
| |
| - | === Note ===
| |
| - | Note is a small script that shows several interesting features of the GDI. We will see, how we can create a custom shaped window. There are small applications that are used to take visible notes. They work as reminders for people, that work with computers a lot. (e.g. us).
| |
| - |
| |
| - | <source lang="python">
| |
| - | #!/usr/bin/python
| |
| - | # note.py
| |
| - |
| |
| - | import wx
| |
| - |
| |
| - | class Note(wx.Frame):
| |
| - | def __init__(self, parent, id, title):
| |
| - | wx.Frame.__init__(self, parent, id, title,
| |
| - | style=wx.FRAME_SHAPED |
| |
| - | wx.SIMPLE_BORDER |
| |
| - | wx.FRAME_NO_TASKBAR)
| |
| - |
| |
| - | self.font = wx.Font(11, wx.FONTFAMILY_DEFAULT, wx.FONTSTYLE_NORMAL,
| |
| - | wx.FONTWEIGHT_BOLD, False, 'Comic Sans MS')
| |
| - | self.bitmap = wx.Bitmap('note.png', wx.BITMAP_TYPE_PNG)
| |
| - | self.cross = wx.Bitmap('cross.png', wx.BITMAP_TYPE_PNG)
| |
| - |
| |
| - | w = self.bitmap.GetWidth()
| |
| - | h = self.bitmap.GetHeight()
| |
| - | self.SetClientSize((w, h))
| |
| - |
| |
| - | if wx.Platform == '__WXGTK__':
| |
| - | self.Bind(wx.EVT_WINDOW_CREATE, self.SetNoteShape)
| |
| - | else: self.SetNoteShape()
| |
| - |
| |
| - | self.Bind(wx.EVT_PAINT, self.OnPaint)
| |
| - | self.Bind(wx.EVT_LEFT_DOWN, self.OnLeftDown)
| |
| - | self.Bind(wx.EVT_MOTION, self.OnMouseMove)
| |
| - |
| |
| - | self.bitmapRegion = wx.RegionFromBitmap(self.bitmap)
| |
| - | self.crossRegion = wx.RegionFromBitmap(self.cross)
| |
| - |
| |
| - | self.bitmapRegion.IntersectRegion(self.crossRegion)
| |
| - | self.bitmapRegion.Offset(170, 10)
| |
| - |
| |
| - | dc = wx.ClientDC(self)
| |
| - | dc.DrawBitmap(self.bitmap, 0, 0, True)
| |
| - | self.PositionTopRight()
| |
| - | self.Show(True)
| |
| - |
| |
| - | def PositionTopRight(self):
| |
| - | disx, disy = wx.GetDisplaySize()
| |
| - | x, y = self.GetSize()
| |
| - | self.Move((disx-x, 0))
| |
| - |
| |
| - | def SetNoteShape(self, *event):
| |
| - | region = wx.RegionFromBitmap(self.bitmap)
| |
| - | self.SetShape(region)
| |
| - |
| |
| - | def OnLeftDown(self, event):
| |
| - | pos = event.GetPosition()
| |
| - | if self.bitmapRegion.ContainsPoint(pos):
| |
| - | self.Close()
| |
| - | x, y = self.ClientToScreen(event.GetPosition())
| |
| - | ox, oy = self.GetPosition()
| |
| - | dx = x - ox
| |
| - | dy = y - oy
| |
| - | self.delta = ((dx, dy))
| |
| - |
| |
| - |
| |
| - | def OnMouseMove(self, event):
| |
| - | if event.Dragging() and event.LeftIsDown():
| |
| - | x, y = self.ClientToScreen(event.GetPosition())
| |
| - | fp = (x - self.delta[0], y - self.delta[1])
| |
| - | self.Move(fp)
| |
| - |
| |
| - | def OnPaint(self, event):
| |
| - | dc = wx.PaintDC(self)
| |
| - | dc.SetFont(self.font)
| |
| - | dc.SetTextForeground('WHITE')
| |
| - |
| |
| - | dc.DrawBitmap(self.bitmap, 0, 0, True)
| |
| - | dc.DrawBitmap(self.cross, 170, 10, True)
| |
| - | dc.DrawText('- Go shopping', 20, 20)
| |
| - | dc.DrawText('- Make a phone call', 20, 50)
| |
| - | dc.DrawText('- Write an email', 20, 80)
| |
| - |
| |
| - |
| |
| - | app = wx.App()
| |
| - | Note(None, -1, '')
| |
| - | app.MainLoop()
| |
| - | </source>
| |
| - |
| |
| - | The idea behind creating a shaped window is simple. Most applications are rectangular. They share lots of similarities. They have menus, toolbars, titles etc. This might be boring. Some developers create more fancy applications. We can make our applications more attractive by using images. The idea is as follows. We create a frame without a border. We can draw a custom image on the frame during the paint event.
| |
| - |
| |
| - | <source lang="python">
| |
| - | wx.Frame.__init__(self, parent, id, title,
| |
| - | style=wx.FRAME_SHAPED |
| |
| - | wx.SIMPLE_BORDER |
| |
| - | wx.FRAME_NO_TASKBAR)
| |
| - | </source>
| |
| - |
| |
| - | In order to create a custom shaped application, we must set necessary style options. The <i>wx.FRAME_SHAPED</i> enables to create a shaped window. The <i>wx.SIMPLE_BORDER</i> removes the thick border. The <i>wx.FRAME_NO_TASKBAR</i> prevents the application from appearing on the taskbar.
| |
| - |
| |
| - | <source lang="python">
| |
| - | self.font = wx.Font(11, wx.FONTFAMILY_DEFAULT, wx.FONTSTYLE_NORMAL,
| |
| - | wx.FONTWEIGHT_BOLD, False, 'Comic Sans MS')
| |
| - | </source>
| |
| - |
| |
| - | I was looking for a nice font for the note example. I finally chose Comic Sans MS. This is a proprietary font.
| |
| - | Linux users must install msttcorefonts package. If we do not have a font installed, the system chooses another one. Usually not to our taste.
| |
| - |
| |
| - | <source lang="python">
| |
| - | self.bitmap = wx.Bitmap('note.png', wx.BITMAP_TYPE_PNG)
| |
| - | self.cross = wx.Bitmap('cross.png', wx.BITMAP_TYPE_PNG)
| |
| - | </source>
| |
| - |
| |
| - | I have created two bitmaps. The first is a rounded rectangle. With a kind of an orange fill. I have used <b>Inkscape</b> vector illustrator to create it. The second one is a small cross. It is used to close the application. For this I used <b>Gimp</b> image editor.
| |
| - |
| |
| - | <source lang="python">
| |
| - | w = self.bitmap.GetWidth()
| |
| - | h = self.bitmap.GetHeight()
| |
| - | self.SetClientSize((w, h))
| |
| - | </source>
| |
| - |
| |
| - | We are going to draw a bitmap on the frame. I order to cover the whole frame, we figure out the bitmap size. Then we set the site of the frame to the size of the bitmap.
| |
| - |
| |
| - | <source lang="python">
| |
| - | if wx.Platform == '__WXGTK__':
| |
| - | self.Bind(wx.EVT_WINDOW_CREATE, self.SetNoteShape)
| |
| - | else: self.SetNoteShape()
| |
| - | </source>
| |
| - |
| |
| - | This is some platform dependent code. Linux developers should call the <i>SetNoteShape()</i> method immediately after the <i>wx.WindowCreateEvent</i> event.
| |
| - |
| |
| - | <source lang="python">
| |
| - | dc = wx.ClientDC(self)
| |
| - | dc.DrawBitmap(self.bitmap, 0, 0, True)
| |
| - | </source>
| |
| - |
| |
| - | These lines are not necessary, because a paint event is generated during the creation of the application.
| |
| - | But we believe, it makes the example smoother. I say we, because this is what I have learnt from the others.
| |
| - |
| |
| - | <source lang="python">
| |
| - | def SetNoteShape(self, *event):
| |
| - | region = wx.RegionFromBitmap(self.bitmap)
| |
| - | self.SetShape(region)
| |
| - | </source>
| |
| - |
| |
| - | Here we set the shape of the frame to that of the bitmap. The pixels outside the image become transparent.
| |
| - |
| |
| - | If we remove a border from the frame, we cannot move the window. The <i>OnLeftDown()</i> and the <i>OnMouseMove()</i> methods enable the user to move the window by clicking on the client area of the frame and dragging it.
| |
| - |
| |
| - | <source lang="python">
| |
| - | dc.DrawBitmap(self.bitmap, 0, 0, True)
| |
| - | dc.DrawBitmap(self.cross, 170, 10, True)
| |
| - | dc.DrawText('- Go shopping', 20, 20)
| |
| - | dc.DrawText('- Make a phone call', 20, 50)
| |
| - | dc.DrawText('- Write an email', 20, 80)
| |
| - | </source>
| |
| - |
| |
| - | Within the <i>OnPaint()</i> method we draw two bitmaps and three texts.
| |
| - |
| |
| - | Finally we will talk about how we close the note script.
| |
| - |
| |
| - | <source lang="python">
| |
| - | self.bitmapRegion = wx.RegionFromBitmap(self.bitmap)
| |
| - | self.crossRegion = wx.RegionFromBitmap(self.cross)
| |
| - |
| |
| - | self.bitmapRegion.IntersectRegion(self.crossRegion)
| |
| - | self.bitmapRegion.Offset(170, 10)
| |
| - | ...
| |
| - | pos = event.GetPosition()
| |
| - | if self.bitmapRegion.ContainsPoint(pos):
| |
| - | self.Close()
| |
| - | </source>
| |
| - |
| |
| - | We create two regions from two bitmaps. We intersect these two regions. This way we get all pixels that share both bitmaps.
| |
| - | Finally we move the region to the point, where we draw the cross bitmap. We use the <i>Offset()</i> method. By default the region starts at [0, 0] point.
| |
| - |
| |
| - | Inside the <i>OnLeftDown()</i> method we check if we clicked inside the region. If true, we close the script.
| |
| - |
| |
| - | [[image: wxPython_faq_note.jpg | center]]
| |
| - |
| |
| - | [[Категория:wxWidgets]]
| |
| - | [[Категория:Python]]
| |
