Sugar Labs

Features/GTK3/Porting: Difference between revisions

← Older editNewer edit →
Line 176: Line 176:


<pre>
<pre>
# From activity.Activity, you inherit a canvas. Get its window.
# From activity.Activity, you inherit a canvas. Get its window.
win = self.canvas.get_window()
win = self.canvas.get_window()


# Create a Cairo context from the window.
# Create a Cairo context from the window.
cr = win.cairo_create()
cairo_context = win.cairo_create()


# Create a Cairo surface from the context
# Create a Cairo surface from the context
surface = cr.get_target()
surface = cairo_context.get_target()


# Create an XLib surface to be used for drawing
# Create an XLib surface to be used for drawing
xlib_surface = surface.create_similar(cairo.CONTENT_COLOR,
xlib_surface = surface.create_similar(cairo.CONTENT_COLOR,
                                      gtk.gdk.screen_width(),
                                      gtk.gdk.screen_width(),
                                      gtk.gdk.screen_height())
                                      gtk.gdk.screen_height())


# You'll need a Cairo context from which you'll build a GTK Cairo context
# You'll need a Cairo context from which you'll build a GTK Cairo context
cr = cairo.Context(xlib_surface)
cairo_context = cairo.Context(xlib_surface)
cr = gtk.gdk.CairoContext(cr)
cairo_context = gtk.gdk.CairoContext(cairo_context)


# Use this context as you would a Drawable, substituting Cairo commands for gtk commands, e.g.,
# Use this context as you would a Drawable, substituting Cairo commands
cr.move_to(0, 0)
# for gtk commands, e.g.,
cr.set_source_rgb(r, g, b) # Cairo uses floats from 0 to 1 for RGB values
cairo_context.move_to(0, 0)
cr.rectangle(x, y, w, h)
cairo_context.line_to(100, 100)
cr.fill()
# Cairo uses floats from 0 to 1 for RGB values
cairo_context.set_source_rgb(r, g, b)
cairo_context.rectangle(x, y, w, h)
cairo_context.fill()


# To invalidate a region to force a refresh, use:
# To invalidate a region to force a refresh, use:
self.canvas.queue_draw_area(x, y, w, h)
self.canvas.queue_draw_area(x, y, w, h)
</pre>
</pre>
 
Pango is a bit different when used with Cairo:
Pango is a bit different when used with Cairo:


<pre>
<pre>
# Again, from the xlib_surface...
# Again, from the xlib_surface...
cr = cairo.Context(xlib_surface)
cairo_context = cairo.Context(xlib_surface)


# Create a PangoCairo context
# Create a PangoCairo context
cr = pangocairo.CairoContext(cr)
cairo_context = pangocairo.CairoContext(cairo_context)


# The pango layout is created from the Cairo context
# The pango layout is created from the Cairo context
pl = cr.create_layout()
pango_layout = cairo_context.create_layout()


# You still use pango to set up font descriptions.
# You still use pango to set up font descriptions.
fd = pango.FontDescription('Sans')
fd = pango.FontDescription('Sans')
fd.set_size(12 * pango.SCALE)
fd.set_size(12 * pango.SCALE)


# Tell your pango layout about your font description
# Tell your pango layout about your font description
pl.set_font_description(fd)
pango_layout.set_font_description(fd)


# Write text to your pango layout
# Write text to your pango layout
pl.set_text('Hello world')
pango_layout.set_text('Hello world')


# Position it within the Cairo context
# Position it within the Cairo context
cr.save()
cairo_context.save()
cr.translate(x, y)
cairo_context.translate(x, y)
cr.rotate(pi / 3)  # You can rotate text and images in Cairo
cairo_context.rotate(pi / 3)  # You can rotate text and images in Cairo
cr.set_source_rgb(1, 0, 0)
cairo_context.set_source_rgb(1, 0, 0)


# Finally, draw the text
# Finally, draw the text
cr.update_layout(pl)
cairo_context.update_layout(pango_layout)
cr.show_layout(pl)
cairo_context.show_layout(pango_layout)
cr.restore()
cairo_context.restore()
</pre>
</pre>


Line 241: Line 244:


<pre>
<pre>
# Again, from the xlib_surface...
# Again, from the xlib_surface...
cr = cairo.Context(xlib_surface)
cairo_context = cairo.Context(xlib_surface)


# Create a gtk context
# Create a gtk context
cr = gtk.gdk.CairoContext(cr)
cairo_context = gtk.gdk.CairoContext(cairo_context)
cr.set_source_pixbuf(pixbuf, x, y)
cairo_context.set_source_pixbuf(pixbuf, x, y)
cr.rectangle(x, y, w, h)
cairo_context.rectangle(x, y, w, h)
cr.fill()
cairo_context.fill()
</pre>
</pre>


Line 254: Line 257:


<pre>
<pre>
# Map the xlib surface onto a pixmap
# Map the xlib surface onto a pixmap
pixmap = gtk.gdk.Pixmap(None, w, h, 24)
pixmap = gtk.gdk.Pixmap(None, w, h, 24)
cr = pixmap.cairo_create()
cairo_context = pixmap.cairo_create()
cr.set_source_surface(xlib_surface, 0, 0)
cairo_context.set_source_surface(xlib_surface, 0, 0)
cr.paint()
cairo_context.paint()


# Read the pixel
# Read the pixel
pixel = pixmap.get_image(x, y, 1, 1).get_pixel(0, 0)
pixel = pixmap.get_image(x, y, 1, 1).get_pixel(0, 0)
return(int((pixel & 0xFF0000) >> 16),  # red
return(int((pixel & 0xFF0000) >> 16),  # red
        int((pixel & 0x00FF00) >> 8),  # green
      int((pixel & 0x00FF00) >> 8),  # green
        int((pixel & 0x0000FF) >> 0), 0)  # blue
      int((pixel & 0x0000FF) >> 0), 0)  # blue
</pre>
</pre>


Line 273: Line 276:
The Cairo/Pango interaction is a little different:
The Cairo/Pango interaction is a little different:
<pre>
<pre>
cr = ...
cairo_context = ...
pl = PangoCairo.create_layout(cr)
pango_layout = PangoCairo.create_layout(cairo_context)
pl.set_font_description(fd)
pango_layout.set_font_description(fd)
pl.set_text('Hello World', -1)
pango_layout.set_text('Hello World', -1)
cr.set_source_rgb(1, 0, 0)
cairo_context.set_source_rgb(1, 0, 0)
PangoCairo.update_layout(cr, pl)
PangoCairo.update_layout(cairo_context, pango_layout)
PangoCairo.show_layout(cr, pl)
PangoCairo.show_layout(cairo_context, pango_layout)
</pre>
</pre>


Retrieved from "https://wiki.sugarlabs.org/go/Features/GTK3/Porting"