Re: Rendering text with an outline

[Dov Grobgeld <dov.grobgeld@xxxxxxxxx>]

Here's my solution in Vala. It creates a custom widget that inherits from GtkLabel and thus receives its label. The neat thing about this approach is that it then inherits all the size negotiations from GtkLabel, but it than overrides its expose handle, and then draws its PangoLayout first in one color, and then its outline in another color.

Regards,
Dov

//======================================================================

// An example of how to create a Outline label.
//
// Dov Grobgeld <dov.grobgeld@xxxxxxxxx>

// Thursday 2009-03-05 20:31 
// This example is in the public domain.
//----------------------------------------------------------------------

using GLib;
using Gtk;

using Cairo;

public class OutlineLabel : Gtk.Label {

    public string label { get; construct; }

    public Gdk.Pixmap pixmap;


    construct {
        this.expose_event += this.on_expose;

        this.set_markup("<span font=\"Bold 50\">"+label+"</span>");

    }

    private bool on_expose(OutlineLabel ol,

                           Gdk.Event event)
    {

        var cr = Gdk.cairo_create(this.window);

        var layout = this.get_layout(); 

        var width=-1, height=-1;

        layout.get_size(out width, out height);

        cr.move_to((this.allocation.width-width / Pango.SCALE)/2,0);


        cr.set_source_rgba(1,0,0,1);

        Pango.cairo_show_layout(cr, layout);

        cr.set_source_rgba(0,0,0,1);

        cr.set_line_width(4.0);

        Pango.cairo_layout_path(cr, layout);

        cr.stroke();


        return true;
    }


    public OutlineLabel(string label) {

       this.label = label;
    }

}

public class HelloWorld : Gtk.Window {

    construct {
        this.destroy += Gtk.main_quit;

        this.title = "quit";

        var vbox = new Gtk.VBox(false,0);

        this.add(vbox);

        vbox.show();
        var label = new OutlineLabel("hello");

        vbox.pack_start(label, false, false, 0);

        label.show();
        var button = new Button.with_label("Hello world");

        button.clicked += btn => {

            stdout.printf("Hello world!\n");

        };

        button.show();

        vbox.pack_start(button, false, false, 0);

    }
    
}

int main(string[] args) {

    Gtk.init(ref args);


    var hello_world = new HelloWorld();

    hello_world.show();


    Gtk.main();
    return 0;

}

2009/3/5 Christian Schaubschlaeger <cs@xxxxxxxxxxxxxxxxxx>

Hello!

Is it possible to display the text of a gtk label in
a certain color, and each letter of the text shall have
a border in a different color (eg. black letters with
white border; for better readability on varying backgrounds).
Is there a way to achieve this in gtk+? Maybe using Pango?

Thanks and best regards
Christian

_______________________________________________
gtk-list mailing list
gtk-list@xxxxxxxxx
http://mail.gnome.org/mailman/listinfo/gtk-list

_______________________________________________
gtk-list mailing list
gtk-list@xxxxxxxxx
http://mail.gnome.org/mailman/listinfo/gtk-list