PyCairo 中的裁剪与遮罩

最后修改于 2023 年 7 月 17 日

在 PyCairo 教程的这一部分，我们将讨论裁剪和遮罩操作。

剪裁

裁剪是将绘图限制在特定区域内。这可以提高效率并创建有趣的效果。PyCairo 提供了 clip 方法来设置裁剪。

#!/usr/bin/python

'''
ZetCode PyCairo tutorial

This program shows how to perform
clipping in PyCairo.

author: Jan Bodnar
website: zetcode.com
'''


from gi.repository import Gtk, GLib
import cairo
import math
import random


class Example(Gtk.Window):

    def __init__(self):
        super(Example, self).__init__()

        self.init_ui()
        self.load_image()
        self.init_vars()


    def init_ui(self):

        self.darea = Gtk.DrawingArea()
        self.darea.connect("draw", self.on_draw)
        self.add(self.darea)

        GLib.timeout_add(100, self.on_timer)

        self.set_title("Clipping")
        self.resize(300, 200)
        self.set_position(Gtk.WindowPosition.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.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 on_draw(self, wid, 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 main():

    app = Example()
    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)

这一行将一个圆形路径添加到 Cairo 上下文中。

cr.clip()

clip 设置了一个裁剪区域。裁剪区域就是当前路径。当前路径是通过 arc 方法调用创建的。

cr.paint()

paint 在当前裁剪区域内的所有地方绘制当前源。

遮罩

在将源应用到表面之前，会先对其进行过滤。遮罩用作过滤器。遮罩决定了源在何处被应用，何处不被应用。遮罩的不透明部分允许复制源。透明部分不允许将源复制到表面。

#!/usr/bin/python

'''
ZetCode PyCairo tutorial

This program demonstrates masking.

author: Jan Bodnar
website: zetcode.com
'''


from gi.repository import Gtk
import cairo


class Example(Gtk.Window):

    def __init__(self):
        super(Example, self).__init__()

        self.init_ui()
        self.load_image()


    def init_ui(self):

        darea = Gtk.DrawingArea()
        darea.connect("draw", self.on_draw)
        self.add(darea)

        self.set_title("Masking")
        self.resize(310, 100)
        self.set_position(Gtk.WindowPosition.CENTER)
        self.connect("delete-event", Gtk.main_quit)
        self.show_all()


    def load_image(self):

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


    def on_draw(self, wid, cr):

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


def main():

    app = Example()
    Gtk.main()


if __name__ == "__main__":
    main()

在示例中，遮罩决定了在哪里绘制，在哪里不绘制。

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

我们将一张图像用作遮罩，从而将其显示在窗口上。

卷帘效果

在这个代码示例中，我们实现了卷帘效果。这类似于我们用卷帘门做的事情。

#!/usr/bin/python

'''
ZetCode PyCairo tutorial

This program creates a blind down
effect using masking operation.

author: Jan Bodnar
website: zetcode.com
'''


from gi.repository import Gtk, GLib
import cairo
import math


class Example(Gtk.Window):

    def __init__(self):
        super(Example, self).__init__()

        self.init_ui()
        self.load_image()
        self.init_vars()


    def init_ui(self):

        self.darea = Gtk.DrawingArea()
        self.darea.connect("draw", self.on_draw)
        self.add(self.darea)

        GLib.timeout_add(35, self.on_timer)

        self.set_title("Blind down")
        self.resize(325, 250)
        self.set_position(Gtk.WindowPosition.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 on_draw(self, wid, 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():

    app = Example()
    Gtk.main()


if __name__ == "__main__":
    main()

卷帘效果背后的想法很简单。图像高度为 h 像素。我们绘制 0, 1, 2 ... 高度为 1px 的线条。每个周期，图像被显示的部分会增加 1px，直到整个图像都可见。

def load_image(self):

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

在 load_image 方法中，我们从 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)

在 init_vars() 方法中，我们初始化了一些变量。我们初始化了 self.timer 和 self.h 变量。我们获取了加载图像的宽度和高度。然后我们创建了一个空的图像表面。它将用我们之前创建的图像表面的像素线来填充。

ic = cairo.Context(self.ims)

我们从空的图像源创建了一个 Cairo 上下文。

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

我们将一个矩形绘制到最初为空的图像中。每个周期，这个矩形的高度会增加 1px。这样创建的图像稍后将用作遮罩。

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)

城堡的图像被设置为绘图的源。mask_surface 使用表面的 alpha 通道作为遮罩来绘制当前源。

本章介绍了 PyCairo 中的裁剪和遮罩。

电子书

PyCairo 中的裁剪与遮罩

剪裁

遮罩

卷帘效果