Skip to content

Tips and Tricks Graphics

bjourne edited this page Oct 13, 2014 · 10 revisions

Graphics programming Tips and Tricks.

Drawing an image using Cairo

Cairo is a cross-platform graphics library which supports a lot of drawing operations.

USING: cairo cairo.ffi combinators images.loader io.files.temp ;
IN: examples.images

: draw-stuff ( cr -- )
    {
        [ 5 cairo_set_line_width ]
        [ 1.0 0.0 0.0 cairo_set_source_rgb ]
        [ 10 10 220 100 cairo_rectangle ]
        [ cairo_stroke ]
        [
            "serif"
            CAIRO_FONT_SLANT_NORMAL
            CAIRO_FONT_WEIGHT_NORMAL
            cairo_select_font_face
        ]
        [ 32.0 cairo_set_font_size ]
        [ 0.0 0.0 1.0 cairo_set_source_rgb ]
        [ 20.0 50.0 cairo_move_to ]
        [ "Hello, Cairo!" cairo_show_text ]
    } cleave ;

: save-cairo-image ( -- )
    { 240 120 } [ draw-stuff ] make-bitmap-image
    "cairo-image.png" temp-file save-graphic-image ;

The save-cairo-image word creates a 240x120 png with a red rectangle and the blue text "Hello, Cairo!" on it.

Scaling an image using Cairo

Note the (resize-image) word and how similar in structure it is to draw-stuff:

USING: accessors cairo cairo.ffi combinators images kernel math
math.functions math.vectors sequences ;
IN: examples.images.resizing

: image>cairo-surface ( image -- surface )
    [ bitmap>> CAIRO_FORMAT_ARGB32 ]
    [ dim>> first2 ]
    [ rowstride ] tri
    cairo_image_surface_create_for_data ;

: scale-size ( size scale -- size' )
    v* [ round >integer ] map ;

: (resize-image) ( image scale cr -- )
    {
        [ swap first2 cairo_scale ]
        [ swap image>cairo-surface 0 0 cairo_set_source_surface ]
        [
            cairo_get_source CAIRO_FILTER_BEST
            cairo_pattern_set_filter
        ]
        [ cairo_paint ]
    } cleave ;

: resize-image ( image scale -- image' )
    2dup [ dim>> ] dip scale-size
    [ (resize-image) ] make-bitmap-image ;

IN: scratchpad "your/image.png" load-image 
{ 0.5 0.5 } resize-image "out.png" save-graphic-image