强制子窗口小部件以尊重父窗口小部件绘制区域（如圆角）

Question

我正在寻找类似于overflow: hidden在GTK中的HTML和CSS中所做的事情。

例

正如你在下面的图片中看到的，我们有一个有2个孩子的盒子，父小部件由border-radius: 20px得到了圆角，但由于我们没有为孩子们提供border-radius，所以他们从父绘图区溢出。

Example Image

我知道我可以轻松地为孩子们提供border-radius，但它只适用于这个例子：|想象一下，我们有100000个子小部件层次结构，所以我正在寻找一种方法来强迫孩子尊重他们的父绘图区域。

我不认为这可以用CSS，所以我们应该使用GTK和Cairo来做这个。

感谢你在期待。

---

产生图像的代码

#include <gtk/gtk.h>

static void
app_activate(GtkApplication *app)
{
    GtkWidget       *window;
    GtkWidget       *parentbox;
    GtkWidget   *childbox1;
    GtkWidget   *childbox2;

    window = gtk_application_window_new(app);
    gtk_window_set_default_size(GTK_WINDOW(window), 540, 360);

    parentbox = gtk_box_new(GTK_ORIENTATION_VERTICAL, 16);
    childbox1 = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 16);
    childbox2 = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 16);

    GtkStyleContext *parentcontext;
    parentcontext = gtk_widget_get_style_context(GTK_WIDGET(parentbox));
    gtk_style_context_add_class(GTK_STYLE_CONTEXT(parentcontext), "parentbox");

    GtkStyleContext *child1context;
    child1context = gtk_widget_get_style_context(GTK_WIDGET(childbox1));
    gtk_style_context_add_class(GTK_STYLE_CONTEXT(child1context), "childbox");

    GtkStyleContext *child2context;
    child2context = gtk_widget_get_style_context(GTK_WIDGET(childbox2));
    gtk_style_context_add_class(GTK_STYLE_CONTEXT(child2context), "childbox");

    gtk_box_pack_start(GTK_BOX(parentbox), childbox1, TRUE, TRUE, 0);
    gtk_box_pack_start(GTK_BOX(parentbox), childbox2, TRUE, TRUE, 0);
    gtk_container_add(GTK_CONTAINER(window), GTK_WIDGET(parentbox));

    gtk_widget_show_all(window);
}

int
main(int argc, char *argv[])
{
    GtkApplication *app;
    int status;

    app = gtk_application_new(
    "com.myapp",
    G_APPLICATION_FLAGS_NONE
    );
    g_signal_connect(app, "activate", G_CALLBACK(app_activate), NULL);
    status = g_application_run(G_APPLICATION(app), argc, argv);
    g_object_unref(app);

    return status;
}

---

样式

.parentbox {
    margin: 40px;
    background-color: rgba(120, 80, 40, 0.5);
    border-radius: 20px;
}

.childbox {
    background-color: rgba(40, 80, 120, 0.5);
}

Answer 1

您想要采取行动的想法是将图纸分层。顶部的父母和背后的孩子。

（多个对象的）图形图像是在层中生成的。

位于另一层“前面”的每一层都将覆盖更深层次的图层中的项目。

就像，如果你的车停在这样的方式，你的房子在车旁边，你从房子旁边的那边看汽车，那么汽车就会掩盖一些房子。

你））车））房子））

然后你就可以看到汽车的整个侧面，但不是所有的房子。

我从未使用过GTK，所以我无法准确地告诉你如何编写代码，我只能告诉你如何在整体图像中组织对象的基本前提