[翻譯]PyCairo指南--裁剪和masking

裁剪和masking

在PyCairo指南的這個部分，我麼將討論裁剪和masking操做。

裁剪

裁剪就是將圖形的繪製限定在必定的區域內。這樣作有一些效率的因素，同時也能夠建立一些很是有趣的效果。PyCairo有一個clip()方法來設置裁剪區域。

#!/usr/bin/python
'''
ZetCode PyCairo tutorial

This program shows how to perform
clipping in PyCairo

author: Jan Bodnar
website: zetcode.com
last edited: August 2012
'''

import cairo
import gtk
import math
import glib
import random

class MainWindow(gtk.Window):
    def __init__(self):
        super(self.__class__, self).__init__()
        self.init_ui()
        self.load_image()
        self.init_vars()

    def init_ui(self):
        self.darea = gtk.DrawingArea()
        self.darea.connect("expose_event", self.expose)
        self.add(self.darea)
        
        glib.timeout_add(100, self.on_timer)

        self.set_title("Clipping")
        self.resize(300, 200)
        self.set_position(gtk.WIN_POS_CENTER)
        self.connect("delete-event", gtk.main_quit)
        self.show_all()

    def expose(self, widget, event):
        self.context = widget.window.cairo_create()
        self.on_draw(300, self.context)
        
    def on_draw(self, wdith, cr):
        w, h = self.get_size()
        
        if (self.pos_x < 0 + self.radius):
            self.delta[0] = random.randint(5, 9)
        elif (self.pos_x > w - self.radius):
            self.delta[0] = - random.randint(5, 9)
            
        if (self.pos_y < 0 + self.radius):
            self.delta[1] = random.randint(5, 9)
        elif (self.pos_y > h - self.radius):
            self.delta[1] = - random.randint(5, 9)
            
        cr.set_source_surface(self.image, 1, 1)
        cr.arc(self.pos_x, self.pos_y, self.radius, 0, 2 *math.pi)
        cr.clip()
        cr.paint()
        
    def load_image(self):
        self.image = cairo.ImageSurface.create_from_png("beckov.png")
        
    def init_vars(self):
        self.pos_x = 128
        self.pos_y = 128
        self.radius = 40
        
        self.delta = [3, 3]
        
    def on_timer(self):
        self.pos_x += self.delta[0]
        self.pos_y += self.delta[1]
        self.darea.queue_draw()
        return True;

def main():
    window = MainWindow()

    gtk.main()
        
if __name__ == "__main__":
    main()

這個例子中，咱們將裁剪一幅圖片。一個圓形在窗口區域中移動，使得下面的圖片只有一部分顯示出來。這就好像咱們從一個洞中看過去同樣。

def load_image(self):
        self.image = cairo.ImageSurface.create_from_png("beckov.png")

這是下面的那副圖片。每個定時器週期，咱們都將看到這幅圖片的一部分。

if (self.pos_x < 0 + self.radius):
            self.delta[0] = random.randint(5, 9)
        elif (self.pos_x > w - self.radius):
            self.delta[0] = - random.randint(5, 9)

若是圓圈擊中了窗口的左邊或右邊，則圓圈移動的方向將會隨機的改變。對於上邊和下邊也同樣。

cr.arc(self.pos_x, self.pos_y, self.radius, 0, 2 *math.pi)

這一行添加一個圓形的path到Cairo上下文。

cr.clip()

clip()設置一個裁剪區域。裁剪區域是當前正在使用的path。當前的path有arc()方法調用建立。

cr.paint()

paint()用當前的source描繪當前裁剪區域內的部分。

Figure: Clipping

Masking

在source被應用於surface以前，它首先會被過濾。mask被用於一個過濾器。mask決定source的哪一個部分被應用，而哪一個部分不會。mask不透明的部分容許複製source。透明的部分則不容許複製source到surface。

#!/usr/bin/python
'''
ZetCode PyCairo tutorial

This program demonstrates masking.

author: Jan Bodnar
website: zetcode.com
last edited: August 2012
'''

import cairo
import gtk

class MainWindow(gtk.Window):
    def __init__(self):
        super(self.__class__, self).__init__()
        self.init_ui()
        self.load_image()

    def init_ui(self):
        self.darea = gtk.DrawingArea()
        self.darea.connect("expose_event", self.expose)
        self.add(self.darea)
        
        self.set_title("Masking")
        self.resize(310, 100)
        self.set_position(gtk.WIN_POS_CENTER)
        self.connect("delete-event", gtk.main_quit)
        self.show_all()

    def expose(self, widget, event):
        self.context = widget.window.cairo_create()
        self.on_draw(300, self.context)
        
    def on_draw(self, wdith, cr):
        cr.mask_surface(self.ims, 0, 0)
        cr.fill()

    def load_image(self):
        self.ims = cairo.ImageSurface.create_from_png("omen.png")

def main():
    window = MainWindow()

    gtk.main()
        
if __name__ == "__main__":
    main()

在這個例子中，哪些地方須要繪製和哪些地方不繪。

cr.mask_surface(self.ims, 0, 0)
        cr.fill()

咱們使用一幅圖片做爲mask，這將會把它顯示在窗口中。

Figure: Masking

Blind down effect

在這個例子中，咱們將blind down咱們的圖片。這相似於咱們使用的遮光窗簾。

#!/usr/bin/python
'''
ZetCode PyCairo tutorial

This program creates a blind down
effect using masking operation

author: Jan Bodnar
website: zetcode.com
last edited: August 2012
'''

import gtk, glib
import cairo
import math


class MainWindow(gtk.Window):
    def __init__(self):
        super(self.__class__, self).__init__()
        self.init_ui()
        self.load_image()
        self.init_vars()

    def init_ui(self):
        self.darea = gtk.DrawingArea()
        self.darea.connect("expose_event", self.expose)
        self.add(self.darea)
        
        glib.timeout_add(35, self.on_timer)
        
        self.set_title("Blind down")
        self.resize(325, 250)
        self.set_position(gtk.WIN_POS_CENTER)
        self.connect("delete-event", gtk.main_quit)
        self.show_all()


    def load_image(self):
        self.image = cairo.ImageSurface.create_from_png("beckov.png")

    def init_vars(self):
        self.timer = True
        self.h = 0
        self.iw = self.image.get_width()
        self.ih = self.image.get_height()
        
        self.ims = cairo.ImageSurface(cairo.FORMAT_ARGB32, self.iw, self.ih)
    
    def on_timer(self):
        if (not self.timer):
            return False
        
        self.darea.queue_draw()
        return True
    
    def expose(self, widget, event):
        self.context = widget.window.cairo_create()
        self.on_draw(300, self.context)
        
    def on_draw(self, wdith, cr):
        ic = cairo.Context(self.ims)
        ic.rectangle(0, 0, self.iw, self.h)
        ic.fill()
        
        self.h += 1
        
        if (self.h == self.ih):
            self.timer = False
            
        cr.set_source_surface(self.image, 10, 10)
        cr.mask_surface(self.ims, 10, 10)

def main():
    window = MainWindow()
    gtk.main()
        
if __name__ == "__main__":
    main()

blend down效果背後的想法至關的簡單。圖像是h個像素高的。咱們畫0，1， 2...個1像素高的 行。每個週期，圖像的部分多出一像素的高度，直到整幅圖片都變得可見爲止。

def load_image(self):
        self.image = cairo.ImageSurface.create_from_png("beckov.png")

在load_image()方法中，咱們有一幅PNG圖片建立一個圖片surface。

def init_vars(self):
        self.timer = True
        self.h = 0
        self.iw = self.image.get_width()
        self.ih = self.image.get_height()
        
        self.ims = cairo.ImageSurface(cairo.FORMAT_ARGB32, self.iw, self.ih)

在init_vars()方法中，咱們初始化一些變量。咱們初始化self.timer和self.h變量。咱們獲取所加載的圖片的寬度和高度。而後咱們建立一個空的圖像surface。它將會被來自於先前咱們所建立的圖像surface的像素行所填充。

ic = cairo.Context(self.ims)

咱們有空的圖像source建立一個cairo上下文。

ic.rectangle(0, 0, self.iw, self.h)
        ic.fill()

咱們想初始爲空的圖像中畫一個矩形。矩形每一個週期高出1px。用這種方式建立的圖像將在後面做爲一個mask。

self.h += 1

將要顯示的圖像的高度被加了一個單元。

if (self.h == self.ih):
            self.timer = False

當咱們在GTK窗口中繪製了整個的圖像時，咱們停掉了定時器方法。

cr.set_source_surface(self.image, 10, 10)
        cr.mask_surface(self.ims, 10, 10)

城堡圖片被設爲繪製時的一個source。mask_surface()繪製當前的source，使用surface的alpha通道做爲一個mask。

Figure：Blind down

本章討論了PyCairo中的裁剪和masking。