如何使用gtk::DrawingArea？

Question

我正在尝试使用GTK、Cairo和Glade在Rust中构建GUI。我想用gtk::DrawingArea绘制一个竞技场，但我不知道如何使用它。我有这个：

extern crate cairo;
extern crate gtk;

use gtk::*;

fn main() {
    gtk::init().unwrap(); //init gtk before using it

    let glade_src = include_str!("Glade_gui.glade"); //build the glade gui
    let builder = gtk::Builder::new_from_string(glade_src);

    //get widgets from the gui
    let draw_area: gtk::DrawingArea = builder.get_object("zeichenbrett").unwrap();
    let window: gtk::Window = builder.get_object("fenster").unwrap();

    let size = (600, 600); //define the size for the image

    let style_context: gtk::StyleContext = draw_area.get_style_context().unwrap(); //get the style context from the drawing area
    let surface: cairo::ImageSurface =
        cairo::ImageSurface::create(cairo::Format::ARgb32, size.0, size.1).unwrap(); //build a new ImageSurface to draw on
    let context: cairo::Context = cairo::Context::new(&surface); //build a new cairo context from that ImageSurface to draw on

    //just a blue area
    context.set_source_rgb(0.0, 0.0, 1.0);
    context.paint();
    context.stroke();

    gtk::functions::render_background(
        &style_context,
        &context,
        0.0,
        0.0,
        size.0 as f64,
        size.1 as f64,
    ); //here I thought that I drew the context                        cairo::Context to the drawingArea but it seems to do nothing.

    window.show_all();
    gtk::main();
}

它编译并运行，但窗口上没有显示任何竞技场。

我认为我没有正确使用render_background函数，但我不知道如何正确使用它。

下面是Glade_gui.glade文件：

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.20.0 -->
<interface>
  <requires lib="gtk+" version="3.20"/>
  <object class="GtkWindow" id="fenster">
    <property name="can_focus">False</property>
    <property name="title" translatable="yes">Reise nach Jerusalem</property>
    <child>
      <object class="GtkBox">
        <property name="visible">True</property>
        <property name="can_focus">False</property>
        <property name="orientation">vertical</property>
        <child>
          <object class="GtkBox">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <property name="spacing">5</property>
            <property name="homogeneous">True</property>
            <child>
              <object class="GtkButton" id="links">
                <property name="label" translatable="yes">Left</property>
                <property name="visible">True</property>
                <property name="can_focus">True</property>
                <property name="receives_default">True</property>
              </object>
              <packing>
                <property name="expand">False</property>
                <property name="fill">True</property>
                <property name="position">0</property>
              </packing>
            </child>
            <child>
              <object class="GtkButton" id="rechts">
                <property name="label" translatable="yes">Right</property>
                <property name="visible">True</property>
                <property name="can_focus">True</property>
                <property name="receives_default">True</property>
              </object>
              <packing>
                <property name="expand">False</property>
                <property name="fill">True</property>
                <property name="position">1</property>
              </packing>
            </child>
            <child>
              <object class="GtkButton" id="quit">
                <property name="label" translatable="yes">Quit</property>
                <property name="visible">True</property>
                <property name="can_focus">True</property>
                <property name="receives_default">True</property>
              </object>
              <packing>
                <property name="expand">False</property>
                <property name="fill">True</property>
                <property name="position">2</property>
              </packing>
            </child>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="position">0</property>
          </packing>
        </child>
        <child>
          <object class="GtkDrawingArea" id="zeichenbrett">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="position">1</property>
          </packing>
        </child>
      </object>
    </child>
  </object>
</interface>

Answer 1

需要注意的是，我没有使用Rust的经验，所以我将主要使用C示例。

您正在尝试在启动gtk::main之前呈现图形用户界面。实现GTK+图形用户界面的正确方法是添加您的小部件，将它们的draw信号(以及任何其他必要的信号)连接到您自己的绘图回调函数，然后运行gtk::main。

例如，以文档中找到here的简单GtkDrawingArea示例为例。在本例中，g_signal_connect用于将draw信号连接到draw_callback回调函数。这样，当小部件实际上是由gtk::main创建的时候，它将在上面绘制您想要的图像。

您的draw_callback函数将获得一个Cairo上下文作为参数。您将在该上下文中绘制所有内容，因此无需创建自己的内容。通过在draw_callback的参数中使用指针cr，文档中也演示了这一点。

所有的绘图都需要在draw回调函数中完成。它将在任何需要更新的时候被调用(包括创建GtkDrawingArea小部件)，或者您可以通过发出queue_draw信号来强制更新。

即使在使用不同的语言时，C docs也可以提供很大的帮助，特别是当您选择的语言没有全面的文档时。

此外，推荐使用GtkApplication来创建GTK+应用程序的现代方法。你可能会想要调查一下。