Question

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

示例

如下图所示，我们有一个有2个孩子的盒子，父窗口小部件的圆角为border-radius: 20px，但是由于我们没有为孩子提供border-radius，他们从父绘图区溢出。

我知道我可以轻松地向孩子们提供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，所以我不能告诉您确切的代码编写方式，只能告诉您如何在整体图像中组织对象的基本前提

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

1 个答案: