Заставить дочерние виджеты соблюдать область рисования родительского виджета (например, закругленные углы) - PullRequest
Новая
       13

Заставить дочерние виджеты соблюдать область рисования родительского виджета (например, закругленные углы)

0 голосов
/ 18 февраля 2019

Я ищу что-то вроде того, что overflow: hidden делает в HTML и CSS в GTK.

Пример

Как вы можете видеть на изображении ниже,У нас есть поле, в котором есть 2 дочерних элемента. Родительский виджет получил закругленные углы на border-radius: 20px, но, поскольку Мы не предоставили border-radius дочерним элементам, они вышли за пределы родительской области рисования.

Пример изображения

Я знаю, что могу легко предоставить border-radius детям, но это работает только в этом примере: |Представьте, что у нас есть 100000 иерархий дочерних виджетов, поэтому я ищу способ заставить детей уважать их родительскую область рисования.

Я не думаю, что это станет возможным с помощью CSS, поэтому мы должны принять решение, используяGTK и Каир, чтобы сделать это.

Благодарю вас в ожидании.

Код, который произвел изображение 

#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);
}

1 Ответ

0 голосов
/ 19 февраля 2019

Идея для желаемого вами действия - наложить слой на рисунок.Родитель сверху и потомки сзади.

Графические изображения (из нескольких объектов) создаются в слоях.

Каждый слой, который находится «перед» другим слоем, будет скрывать элементы в слоях, которыедалее.

Точно так же, если ваша машина припаркована таким образом, что ваш дом находится рядом с машиной, и вы смотрите на машину с той стороны, которая не находится рядом с домом, то машина прикрываетсячасть дома.

ты)) машина)) дом))

Тогда ты сможешь увидеть всю сторону машины, но не весь дом.

Я никогда не использовал GTK, поэтому я не могу сказать вам точно, как написать ваш код, я могу только сказать вам основную предпосылку того, как объекты должны быть организованы в общем изображении

...