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

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

您想要的操作的想法是对绘图进行分层。父母在上，孩子在后。

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

位于另一层“前面”的每一层都会覆盖更靠后的层中的项目。

就像，如果你的车停在你的房子旁边，而你从不在房子旁边的一侧看汽车，那么汽车会遮住房子的一部分。

p>

你））汽车））房子））

然后您将能够看到汽车的整个侧面，但不能看到整个房子。

我没用过GTK，所以我不能告诉你具体怎么写你的代码，我只能告诉你在整体图像中需要如何组织对象的基本前提