如何使用Python Gtk和Webkit在WebView上叠加图像

Question

我需要帮助如何在webview上叠加图像。我想要在网页（一个webview对象）上放置一个按钮或者一张图片。以下是我的代码：

import gtk
import webkit
...
win=gtk.Window()
page=webkit.Webview()
page.open("http://www.google.com")
image=gtk.Image()
image.set_from_file("HappyFish.jpg")
container=gtk.Fixed()
win.add(container)
container.add(page)
container.add(image)
win.show_all()
gtk.main()

除了页面覆盖图像或按钮外（即使我将按钮放置在容器中的页面后面），一切都正常，我需要使图像位于网页顶部...就像页面角落的标志一样。我不想将页面转换为图像并将两个图像叠加在一起，它需要保持交互式。感谢有关此主题的任何帮助。

- Ayub

Answer 1

GTK+3提供了一个专门的API：GtkOverlay（更具体地说，它是在版本3.2中添加的），用于这个功能。

从您提供的代码中看来，似乎您正在使用PyGTK和GTK+2，因此考虑将工具包升级到新版本以使用此功能。

gtk3-demo应用程序提供了一个很好的覆盖层演示。这个应用程序基于您的发行版存储在不同的软件包中（我不确定它是否可在OSX / Windows上使用），因此您可能需要进行一些搜索以找到正确的软件包。

以下是在PyGObject和GTK3中实现此功能的示例（请注意：为适应Webkit和GTK api的更改做了一些更改）：

from gi.repository import Gtk, WebKit
...
win = Gtk.Window()
overlay = Gtk.Overlay()
page = WebKit.WebView()
page.load_uri("http://www.google.com")
overlay.add(page)
image = Gtk.Image()
image.set_from_file("HappyFish.jpg")
image.set_halign(Gtk.Align.START)
image.set_valign(Gtk.Align.START)
overlay.add_overlay(image)
win.add(overlay)
win.show_all()
win.connect('destroy', Gtk.main_quit)
Gtk.main()

- amcn

---

明白了。非常感谢你，我的朋友。升级到GTK+3绝对是值得的。再次感谢amcn的帮助。 - Ayub

@Ayub 没问题。愉快编程！ - amcn

嗨，我在使用Python GTK Webview时遇到了问题。这是我的问题链接：https://stackoverflow.com/questions/68730967/python-gtk-webview-not-reloading-html-file。我无法刷新我的网页。我正在使用HTML + JavaScript文件加载一些内容，并在运行时向Lava脚本文件添加数据，但它不会刷新为最新的数据。始终保留初始数据。 - Rakesh Bhagam

Answer 2

我怀疑原作者已经不再需要这个了，所以我会把这个留给那些被卡在没有覆盖功能的GTK上的人：

    self.your_image = gtk.Image()
    #this image will be the top layer
    self.image_to_overlay = GdkPixbuf.Pixbuf.new_from_file("try_some_image_file")
    #this image will be the bottom image
    self.bottom_image = GdkPixbuf.Pixbuf.new_from_file("some_base_image")
    self.image_to_overlay.composite(self.bottom_image,
    0,0,
    self.bottom_image.props.width,self.bottom_image.props.height,
    0,0,
    1,1,
    GdkPixbuf.InterpType.BILINEAR,
    250)
    self.your_image.set_from_pixbuf(self.bottom_image)

- Connor