原文： https://zetcode.com/gfx/pycairo/transformations/

在 PyCairo 图形编程教程的这一部分中，我们将讨论变换。

仿射变换由零个或多个线性变换（旋转，缩放或剪切）和平移（移位）组成。 几个线性变换可以组合成一个矩阵。 旋转是使刚体绕固定点移动的变换。 缩放比例是一种放大或缩小对象的变换。 比例因子在所有方向上都是相同的。 平移是一种变换，可以使每个点在指定方向上移动恒定的距离。 剪切是一种将对象垂直于给定轴移动的变换，该值在轴的一侧比另一侧更大。

数据来源：（wikipedia.org，freedictionary.com）

平移

以下示例描述了一个简单的平移。

  1. def on_draw(self, wid, cr):
  3.     cr.set_source_rgb(0.2, 0.3, 0.8)
  4.     cr.rectangle(10, 10, 30, 30)
  5.     cr.fill()
  7.     cr.translate(20, 20)
  8.     cr.set_source_rgb(0.8, 0.3, 0.2)
  9.     cr.rectangle(0, 0, 30, 30)
  10.     cr.fill()
  12.     cr.translate(30, 30)
  13.     cr.set_source_rgb(0.8, 0.8, 0.2)
  14.     cr.rectangle(0, 0, 30, 30)
  15.     cr.fill()    
  17.     cr.translate(40, 40)
  18.     cr.set_source_rgb(0.3, 0.8, 0.8)
  19.     cr.rectangle(0, 0, 30, 30)
  20.     cr.fill()

该示例绘制一个矩形。 然后，我们进行平移并再次绘制相同的矩形几次。

  1. cr.translate(20, 20)

translate()函数通过变换用户空间原点来修改当前变换矩阵。 在我们的例子中，我们在两个方向上将原点移动了 20 个单位。

PyCairo 中的变换 - 图1

图：平移 operation

剪切

在以下示例中，我们执行剪切操作。 剪切是沿特定轴的对象变形。 此操作没有剪切方法。 我们需要创建自己的变换矩阵。 注意，可以通过创建变换矩阵来执行每个仿射变换。

  1. def on_draw(self, wid, cr):
  3.     cr.set_source_rgb(0.6, 0.6, 0.6)
  4.     cr.rectangle(20, 30, 80, 50)
  5.     cr.fill()
  7.     mtx = cairo.Matrix(1.0, 0.5,
  8.                 0.0, 1.0,
  9.                 0.0, 0.0)
  11.     cr.transform(mtx)
  12.     cr.rectangle(130, 30, 80, 50)
  13.     cr.fill()

在此代码示例中，我们执行一个简单的剪切操作。

  1. mtx = cairo.Matrix(1.0, 0.5,
  2.             0.0, 1.0,
  3.             0.0, 0.0)

此变换将 y 值剪切为 x 值的 0.5。

  1. cr.transform(mtx)

我们使用transform()方法执行变换。

PyCairo 中的变换 - 图2

图：抖动 operation

缩放

下一个示例演示了缩放操作。 缩放是一种变换操作，其中对象被放大或缩小。

  1. def on_draw(self, wid, cr):
  3.     cr.set_source_rgb(0.2, 0.3, 0.8)
  4.     cr.rectangle(10, 10, 90, 90)
  5.     cr.fill()
  7.     cr.scale(0.6, 0.6)
  8.     cr.set_source_rgb(0.8, 0.3, 0.2)
  9.     cr.rectangle(30, 30, 90, 90)
  10.     cr.fill()
  12.     cr.scale(0.8, 0.8)
  13.     cr.set_source_rgb(0.8, 0.8, 0.2)
  14.     cr.rectangle(50, 50, 90, 90)
  15.     cr.fill()

我们绘制三个90x90px的矩形。 在其中两个上，我们执行缩放操作。

  1. cr.scale(0.6, 0.6)
  2. cr.set_source_rgb(0.8, 0.3, 0.2)
  3. cr.rectangle(30, 30, 90, 90)
  4. cr.fill()

我们将矩形均匀缩放 0.6 倍。

  1. cr.scale(0.8, 0.8)
  2. cr.set_source_rgb(0.8, 0.8, 0.2)
  3. cr.rectangle(50, 50, 90, 90)
  4. cr.fill()

在这里，我们以 0.8 的系数执行另一个缩放操作。 如果看图片，我们可以看到第三个黄色矩形是最小的一个。 即使我们使用了较小的比例因子。 这是因为变换操作是累加的。 实际上，第三个矩形的缩放比例为 0.528（0.6x0.8）。

PyCairo 中的变换 - 图3

图：缩放 operation

隔离变换

变换操作是累加的。 为了将一个操作与另一个操作隔离开，我们可以使用save()和restore()方法。 save()方法复制图形上下文的当前状态，并将其保存在保存状态的内部栈中。 restore()方法将把上下文重新建立为保存状态。

  1. def on_draw(self, wid, cr):
  3.     cr.set_source_rgb(0.2, 0.3, 0.8)
  4.     cr.rectangle(10, 10, 90, 90)
  5.     cr.fill()
  7.     cr.save()
  8.     cr.scale(0.6, 0.6)
  9.     cr.set_source_rgb(0.8, 0.3, 0.2)
  10.     cr.rectangle(30, 30, 90, 90)
  11.     cr.fill()
  12.     cr.restore()
  14.     cr.save()
  15.     cr.scale(0.8, 0.8)
  16.     cr.set_source_rgb(0.8, 0.8, 0.2)
  17.     cr.rectangle(50, 50, 90, 90)
  18.     cr.fill()    
  19.     cr.restore()

在示例中，我们缩放了两个矩形。 这次我们将缩放操作相互隔离。

  1. cr.save()
  2. cr.scale(0.6, 0.6)
  3. cr.set_source_rgb(0.8, 0.3, 0.2)
  4. cr.rectangle(30, 30, 90, 90)
  5. cr.fill()
  6. cr.restore()

我们通过将scale()方法放在save()和restore()方法之间来隔离缩放操作。

PyCairo 中的变换 - 图4

图：隔离转换

现在，第三个黄色矩形大于第二个红色矩形。

甜甜圈

在下面的示例中，我们通过旋转一堆椭圆来创建复杂的形状。

  1. #!/usr/bin/python
  3. '''
  4. ZetCode PyCairo tutorial 
  6. This program creates a 'donut' shape
  7. in PyCairo.
  9. author: Jan Bodnar
  10. website: zetcode.com 
  11. last edited: August 2012
  12. '''
  14. from gi.repository import Gtk
  15. import cairo
  16. import math
  18. class Example(Gtk.Window):
  20.     def __init__(self):
  21.         super(Example, self).__init__()
  23.         self.init_ui()
  25.     def init_ui(self):    
  27.         darea = Gtk.DrawingArea()
  28.         darea.connect("draw", self.on_draw)
  29.         self.add(darea)
  31.         self.set_title("Donut")
  32.         self.resize(350, 250)
  33.         self.set_position(Gtk.WindowPosition.CENTER)
  34.         self.connect("delete-event", Gtk.main_quit)
  35.         self.show_all()
  37.     def on_draw(self, wid, cr):
  39.         cr.set_line_width(0.5)
  41.         w, h = self.get_size()
  43.         cr.translate(w/2, h/2)
  44.         cr.arc(0, 0, 120, 0, 2*math.pi)
  45.         cr.stroke()
  47.         for i in range(36):
  48.             cr.save()
  49.             cr.rotate(i*math.pi/36)
  50.             cr.scale(0.3, 1)
  51.             cr.arc(0, 0, 120, 0, 2*math.pi)
  52.             cr.restore()
  53.             cr.stroke()
  55. def main():
  57.     app = Example()
  58.     Gtk.main()
  60. if __name__ == "__main__":    
  61.     main()

我们将进行旋转和缩放操作。 我们还将保存和还原 PyCairo 上下文。

  1. cr.translate(w/2, h/2)
  2. cr.arc(0, 0, 120, 0, 2*math.pi)
  3. cr.stroke()

在 GTK 窗口的中间，我们创建了一个圆。 这将是我们椭圆的边界圆。

  1. for i in range(36):
  2.     cr.save()
  3.     cr.rotate(i*math.pi/36)
  4.     cr.scale(0.3, 1)
  5.     cr.arc(0, 0, 120, 0, 2*math.pi)
  6.     cr.restore()
  7.     cr.stroke()

我们沿着边界圆的路径创建了 36 个椭圆。 我们使用save()和restore()方法将每个旋转和缩放操作相互隔离。

PyCairo 中的变换 - 图5

图：多纳圈

星星

下一个示例显示了一个旋转和缩放的星星。

  1. #!/usr/bin/python
  3. '''
  4. ZetCode PyCairo tutorial 
  6. This is a star example which 
  7. demonstrates scaling, translating and
  8. rotating operations in PyCairo.
  10. author: Jan Bodnar
  11. website: zetcode.com 
  12. last edited: August 2012
  13. '''
  15. from gi.repository import Gtk, GLib
  16. import cairo
  18. class cv(object):
  20.     points = ( 
  21.         ( 0, 85 ), 
  22.         ( 75, 75 ), 
  23.         ( 100, 10 ), 
  24.         ( 125, 75 ), 
  25.         ( 200, 85 ),
  26.         ( 150, 125 ), 
  27.         ( 160, 190 ),
  28.         ( 100, 150 ), 
  29.         ( 40, 190 ),
  30.         ( 50, 125 ),
  31.         ( 0, 85 )
  32.     )
  34.     SPEED = 20
  35.     TIMER_ID = 1
  37. class Example(Gtk.Window):
  39.     def __init__(self):
  40.         super(Example, self).__init__()
  42.         self.init_ui()
  43.         self.init_vars()
  45.     def init_ui(self):    
  47.         self.darea = Gtk.DrawingArea()
  48.         self.darea.connect("draw", self.on_draw)
  49.         self.add(self.darea)
  51.         self.set_title("Star")
  52.         self.resize(400, 300)
  53.         self.set_position(Gtk.WindowPosition.CENTER)
  54.         self.connect("delete-event", Gtk.main_quit)
  55.         self.show_all()
  57.     def init_vars(self):   
  59.         self.angle = 0
  60.         self.scale = 1
  61.         self.delta = 0.01    
  63.         GLib.timeout_add(cv.SPEED, self.on_timer)   
  65.     def on_timer(self):
  67.         if self.scale < 0.01:
  68.             self.delta = -self.delta
  70.         elif self.scale > 0.99:
  71.             self.delta = -self.delta
  73.         self.scale += self.delta
  74.         self.angle += 0.01    
  76.         self.darea.queue_draw()
  78.         return True 
  80.     def on_draw(self, wid, cr):
  82.         w, h = self.get_size()
  84.         cr.set_source_rgb(0, 0.44, 0.7)
  85.         cr.set_line_width(1)
  87.         cr.translate(w/2, h/2)
  88.         cr.rotate(self.angle)
  89.         cr.scale(self.scale, self.scale)
  91.         for i in range(10):
  92.             cr.line_to(cv.points[i][0], cv.points[i][1])
  94.         cr.fill()
  96. def main():
  98.     app = Example()
  99.     Gtk.main()
  101. if __name__ == "__main__":    
  102.     main()

在此示例中，我们创建一个星形对象。 我们将对其进行平移，旋转和缩放。

  1. points = ( 
  2.     ( 0, 85 ), 
  3.     ( 75, 75 ), 
  4.     ( 100, 10 ), 
  5.     ( 125, 75 ), 
  6.     ( 200, 85 ),
  7. ...

从这些点将构造星形对象。

  1. def init_vars(self):   
  3.     self.angle = 0
  4.     self.scale = 1
  5.     self.delta = 0.01  
  6. ...

在init_vars()方法中，我们初始化了三个变量。 self.angle用于旋转，self.scale用于缩放星形对象。 self.delta变量控制星星何时生长和何时收缩。

  1. glib.timeout_add(cv.SPEED, self.on_timer)

on_timer()方法的每个cv.SPEED ms 被调用。

  1. if self.scale < 0.01:
  2.     self.delta = -self.delta
  4. elif self.scale > 0.99:
  5.     self.delta = -self.delta

这些线控制星星是要增长还是要缩小。

  1. cr.translate(w/2, h/2)
  2. cr.rotate(self.angle)
  3. cr.scale(self.scale, self.scale)

我们将星星移到窗口中间。 旋转并缩放比例。

  1. for i in range(10):
  2.     cr.line_to(cv.points[i][0], cv.points[i][1])
  4. cr.fill()

在这里，我们绘制星形对象。

在 PyCairo 教程的这一部分中，我们讨论了变换。