Blob Blame History Raw
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>4. Detecting pointer movements on an actor</title><link rel="stylesheet" type="text/css" href="style.css"><meta name="generator" content="DocBook XSL Stylesheets Vsnapshot"><link rel="home" href="index.html" title="The Clutter Cookbook"><link rel="up" href="events.html" title="Chapter 3. Events"><link rel="prev" href="events-mouse-scroll.html" title="3. Detecting mouse scrolling on an actor"><link rel="next" href="events-buttons.html" title="5. Making an actor respond to button events"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">4. Detecting pointer movements on an actor</th></tr><tr><td width="20%" align="left"><a accesskey="p" href="events-mouse-scroll.html">Prev</a> </td><th width="60%" align="center">Chapter 3. Events</th><td width="20%" align="right"> <a accesskey="n" href="events-buttons.html">Next</a></td></tr></table><hr></div><div class="section"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="events-pointer-motion"></a>4. Detecting pointer movements on an actor</h2></div></div></div><div class="section"><div class="titlepage"><div><div><h3 class="title"><a name="events-pointer-motion-problem"></a>4.1. Problem</h3></div></div></div><p>You want to be able to tell when the pointer (e.g. associated
      with a mouse or touches on a screen) enters, leaves, or moves over
      an actor.</p><p>Example use cases include:</p><div class="itemizedlist"><ul class="itemizedlist" style="list-style-type: disc; "><li class="listitem"><p>Adding a tooltip or hover effect to an actor when
          a pointer moves onto it.</p></li><li class="listitem"><p>Tracing the path of the pointer over an actor (e.g.
          in a drawing application).</p></li></ul></div></div><div class="section"><div class="titlepage"><div><div><h3 class="title"><a name="events-pointer-motion-solution"></a>4.2. Solution</h3></div></div></div><p>Connect to the pointer motion signals emitted by the actor.</p><div class="section"><div class="titlepage"><div><div><h4 class="title"><a name="idm140200508349136"></a>4.2.1. Responding to crossing events</h4></div></div></div><p>To detect the pointer crossing the boundary of an actor
        (entering or leaving), connect to the <code class="code">enter-event</code>
        and/or <code class="code">leave-event</code> signals. For example:</p><div class="informalexample"><pre class="programlisting">ClutterActor *actor = clutter_texture_new ();

/* ...set size, color, image etc., depending on the actor... */

/* make the actor reactive: see <a class="link" href="events-pointer-motion.html#events-pointer-motion-discussion" title="4.3. Discussion">Discussion</a> for more details */
clutter_actor_set_reactive (actor, TRUE);

/* connect to the signals */
g_signal_connect (actor,
                  "enter-event",
                  G_CALLBACK (_pointer_enter_cb),
                  NULL);

g_signal_connect (actor,
                  "leave-event",
                  G_CALLBACK (_pointer_leave_cb),
                  NULL);</pre></div><p>The signature for callbacks connected to each of these
        signals is:</p><div class="informalexample"><pre class="programlisting">gboolean
_on_crossing (ClutterActor *actor,
              ClutterEvent *event,
              gpointer      user_data)</pre></div><p>In the callback, you can examine the event to get the
        coordinates where the pointer entered or left the actor. For
        example, <code class="function">_pointer_enter_cb()</code> could
        follow this template:</p><div class="informalexample"><a name="events-pointer-motion-callback-example"></a><pre class="programlisting">/* the event passed to the callback is of type ClutterCrossingEvent */
static gboolean
_pointer_enter_cb (ClutterActor *actor,
                   ClutterEvent *event,
                   gpointer      user_data)
{
  /* get the coordinates where the pointer crossed into the actor */
  gfloat stage_x, stage_y;
  clutter_event_get_coords (event, &amp;stage_x, &amp;stage_y);

  /*
   * as the coordinates are relative to the stage, rather than
   * the actor which emitted the signal, it can be useful to
   * transform them to actor-relative coordinates
   */
  gfloat actor_x, actor_y;
  clutter_actor_transform_stage_point (actor,
                                       stage_x, stage_y,
                                       &amp;actor_x, &amp;actor_y);

  g_debug ("pointer at stage x %.0f, y %.0f; actor x %.0f, y %.0f",
           stage_x, stage_y,
           actor_x, actor_y);

  return CLUTTER_EVENT_STOP;
}</pre></div><p>See <a class="link" href="events-pointer-motion.html#events-pointer-motion-example-1" title="Example 3.2. Simple button with a hover animation (change in opacity as the pointer enters and leaves it)">the
        code example in the appendix</a> for an example of how
        you can implement a hover effect on a "button" (rectangle
        with text overlay) using this approach.</p></div><div class="section"><div class="titlepage"><div><div><h4 class="title"><a name="idm140200508337776"></a>4.2.2. Responding to motion events</h4></div></div></div><p>Motion events occur when a pointer moves over an actor;
        the actor emits a <code class="code">motion-event</code> signal when this
        happens. To respond to motion events, connect to this signal:</p><div class="informalexample"><pre class="programlisting">/* set up the actor, make reactive etc., as above */

/* connect to motion-event signal */
g_signal_connect (actor,
                  "motion-event",
                  G_CALLBACK (_pointer_motion_cb),
                  transitions);</pre></div><p>The signature of the callback is the same as for
        the <code class="code">enter-event/leave-event</code> signals, so you can use
        <a class="link" href="events-pointer-motion.html#events-pointer-motion-callback-example">code
        similar to the above</a> to handle it. However, the
        type of the event is a <span class="type">ClutterMotionEvent</span>
        (rather than a <span class="type">ClutterCrossingEvent</span>).</p></div></div><div class="section"><div class="titlepage"><div><div><h3 class="title"><a name="events-pointer-motion-discussion"></a>4.3. Discussion</h3></div></div></div><p>A few more useful things to know about pointer motion
      events:</p><div class="itemizedlist"><ul class="itemizedlist" style="list-style-type: disc; "><li class="listitem"><p>Each crossing event is accompanied by a motion event at
          the same coordinates.</p></li><li class="listitem"><p>Before an actor will emit signals for pointer events,
          it needs to be made reactive with:</p><div class="informalexample"><pre class="programlisting">clutter_actor_set_reactive (actor, TRUE);</pre></div></li><li class="listitem"><p>A pointer event structure includes other data. Some
          examples:</p><div class="informalexample"><pre class="programlisting">/* keys and mouse buttons pressed down when the pointer moved */
ClutterModifierType modifiers = clutter_event_get_state (event);

/* time (since the epoch) when the event occurred */
guint32 event_time = clutter_event_get_time (event);

/* actor where the event originated */
ClutterActor *actor = clutter_event_get_actor (event);

/* stage where the event originated */
ClutterStage *stage = clutter_event_get_stage (event);</pre></div><p>There's no need to cast the event to use these
          functions: they will work on any <span class="type">ClutterEvent</span>.</p></li><li class="listitem"><p>The coordinates of an event (as returned by
          <code class="function">clutter_event_get_coords()</code>) are relative
          to the stage where they originated, rather than the actor. Unless
          the actor is the same size as the stage, you'll typically want
          the actor-relative coordinates instead. To get those, use
          <code class="function">clutter_actor_transform_stage_point()</code>.</p></li></ul></div><p>The <a class="link" href="events-pointer-motion.html#events-pointer-motion-example-4" title="Example 3.5. Scribbling on a ClutterTexture in response to pointer events">simple
      scribble application</a> gives a more
      thorough example of how to integrate pointer events into a
      Clutter application (in this case, for drawing on a
      <span class="type">ClutterTexture</span>).</p><p>The effect of actor depth on pointer motion events is
      worth slightly deeper discussion, and is covered next.</p><div class="section"><div class="titlepage"><div><div><h4 class="title"><a name="idm140200508318656"></a>4.3.1. Pointer events on actors at different depths</h4></div></div></div><p>If you have actors stacked on top of each other, the
        reactive actor nearest the "top" is the one
        which emits the signal (when the pointer crosses into or moves
        over it). "Top" here means either at the top of
        the depth ordering (if all actors are at the same depth)
        or the closest to the view point (if actors have different
        depths in the <code class="code">z</code> axis).</p><p>Here's an example of three rectangles overlapping each
        other:</p><div class="screenshot"><div class="mediaobject"><img src="images/events-pointer-motion-stacking.png" alt="Pointer events in actors with different depth ordering"></div></div><p>The rectangles are all at the same point on the
        <code class="code">z</code> axis but stacked (different positions in the depth
        order). They have the following properties:</p><div class="itemizedlist"><ul class="itemizedlist" style="list-style-type: disc; "><li class="listitem"><p>The <span class="emphasis"><em>red</em></span> rectangle is lowest down
            the depth ordering and reactive. Pointer motion signals are
            emitted by this actor when the pointer crosses or moves on the
            area of the rectangle <span class="emphasis"><em>not</em></span> overlapped by the
            green rectangle.</p></li><li class="listitem"><p>The <span class="emphasis"><em>green</em></span> rectangle is in the
            middle of the depth ordering and reactive. This actor emits
            events over its whole surface, even though it is overlapped
            by the blue rectangle (as the blue rectangle is not
            reactive).</p><p>Even if the blue rectangle were fully opaque, a pointer
            crossing into or moving on the green rectangle's area (even if
            obscured by the blue rectangle) would still cause a signal
            to be emitted.</p></li><li class="listitem"><p>The <span class="emphasis"><em>blue</em></span> rectangle is at the top
            of the depth ordering and <span class="emphasis"><em>not</em></span> reactive.
            This actor doesn't emit any pointer motion signals and doesn't
            block events from occurring on any other actor.</p></li></ul></div><p>See <a class="link" href="events-pointer-motion.html#events-pointer-motion-example-3" title="Example 3.4. How actors influence pointer events on each other">the
        sample code in the appendix</a> for more details.</p></div></div><div class="section"><div class="titlepage"><div><div><h3 class="title"><a name="idm140200508304032"></a>4.4. Full examples</h3></div></div></div><div class="example"><a name="events-pointer-motion-example-1"></a><p class="title"><b>Example 3.2. Simple button with a hover animation (change in opacity
        as the pointer enters and leaves it)</b></p><div class="example-contents"><pre class="programlisting">#include &lt;clutter/clutter.h&gt;

static const ClutterColor stage_color = { 0x33, 0x33, 0x55, 0xff };
static const ClutterColor yellow = { 0xaa, 0x99, 0x00, 0xff };
static const ClutterColor white = { 0xff, 0xff, 0xff, 0xff };

static gboolean
_pointer_enter_cb (ClutterActor *actor,
                   ClutterEvent *event,
                   gpointer      user_data)
{
  ClutterState *transitions = CLUTTER_STATE (user_data);
  clutter_state_set_state (transitions, "fade-in");
  return TRUE;
}

static gboolean
_pointer_leave_cb (ClutterActor *actor,
                   ClutterEvent *event,
                   gpointer      user_data)
{
  ClutterState *transitions = CLUTTER_STATE (user_data);
  clutter_state_set_state (transitions, "fade-out");
  return TRUE;
}

int
main (int argc, char *argv[])
{
  ClutterActor *stage;
  ClutterLayoutManager *layout;
  ClutterActor *box;
  ClutterActor *rect;
  ClutterActor *text;
  ClutterState *transitions;

  if (clutter_init (&amp;argc, &amp;argv) != CLUTTER_INIT_SUCCESS)
    return 1;

  stage = clutter_stage_new ();
  clutter_stage_set_title (CLUTTER_STAGE (stage), "btn");
  clutter_actor_set_background_color (stage, &amp;stage_color);
  g_signal_connect (stage, "destroy", G_CALLBACK (clutter_main_quit), NULL);

  layout = clutter_bin_layout_new (CLUTTER_BIN_ALIGNMENT_FILL,
                                   CLUTTER_BIN_ALIGNMENT_FILL);

  box = clutter_actor_new ();
  clutter_actor_set_layout_manager (box, layout);
  clutter_actor_set_position (box, 25, 25);
  clutter_actor_set_reactive (box, TRUE);
  clutter_actor_set_size (box, 100, 30);

  /* background for the button */
  rect = clutter_rectangle_new_with_color (&amp;yellow);
  clutter_actor_add_child (box, rect);

  /* text for the button */
  text = clutter_text_new_full ("Sans 10pt", "Hover me", &amp;white);

  /*
   * NB don't set the height, so the actor assumes the height of the text;
   * then when added to the bin layout, it gets centred on it;
   * also if you don't set the width, the layout goes gets really wide;
   * the 10pt text fits inside the 30px height of the rectangle
   */
  clutter_actor_set_width (text, 100);
  clutter_bin_layout_add (CLUTTER_BIN_LAYOUT (layout),
                          text,
                          CLUTTER_BIN_ALIGNMENT_CENTER,
                          CLUTTER_BIN_ALIGNMENT_CENTER);

  /* animations */
  transitions = clutter_state_new ();
  clutter_state_set (transitions, NULL, "fade-out",
                     box, "opacity", CLUTTER_LINEAR, 180,
                     NULL);

 /*
  * NB you can't use an easing mode where alpha &gt; 1.0 if you're
  * animating to a value of 255, as the value you're animating
  * to will possibly go &gt; 255
  */
  clutter_state_set (transitions, NULL, "fade-in",
                     box, "opacity", CLUTTER_LINEAR, 255,
                     NULL);

  clutter_state_set_duration (transitions, NULL, NULL, 50);

  clutter_state_warp_to_state (transitions, "fade-out");

  g_signal_connect (box,
                    "enter-event",
                    G_CALLBACK (_pointer_enter_cb),
                    transitions);

  g_signal_connect (box,
                    "leave-event",
                    G_CALLBACK (_pointer_leave_cb),
                    transitions);

  /* bind the stage size to the box size + 50px in each axis */
  clutter_actor_add_constraint (stage, clutter_bind_constraint_new (box, CLUTTER_BIND_HEIGHT, 50.0));
  clutter_actor_add_constraint (stage, clutter_bind_constraint_new (box, CLUTTER_BIND_WIDTH, 50.0));

  clutter_actor_add_child (stage, box);

  clutter_actor_show (stage);

  clutter_main ();

  g_object_unref (transitions);

  return 0;
}
</pre></div></div><br class="example-break"><div class="example"><a name="events-pointer-motion-example-2"></a><p class="title"><b>Example 3.3. Detecting pointer motion on a <span class="type">ClutterRectangle</span></b></p><div class="example-contents"><pre class="programlisting">#include &lt;clutter/clutter.h&gt;

static const ClutterColor stage_color = { 0x33, 0x33, 0x55, 0xff };
static const ClutterColor rectangle_color = { 0xaa, 0x99, 0x00, 0xff };

static gboolean
_pointer_motion_cb (ClutterActor *actor,
                    ClutterEvent *event,
                    gpointer      user_data)
{
  gfloat stage_x, stage_y;
  gfloat actor_x, actor_y;

  clutter_event_get_coords (event, &amp;stage_x, &amp;stage_y);

  clutter_actor_transform_stage_point (actor,
                                       stage_x, stage_y,
                                       &amp;actor_x, &amp;actor_y);

  g_debug ("pointer @ stage x %.0f, y %.0f; actor x %.0f, y %.0f",
           stage_x, stage_y,
           actor_x, actor_y);
  return TRUE;
}

int
main (int argc, char *argv[])
{
  ClutterActor *stage;
  ClutterActor *rectangle;

  if (clutter_init (&amp;argc, &amp;argv) != CLUTTER_INIT_SUCCESS)
    return 1;

  stage = clutter_stage_new ();
  clutter_actor_set_size (stage, 400, 400);
  clutter_stage_set_color (CLUTTER_STAGE (stage), &amp;stage_color);
  g_signal_connect (stage, "destroy", G_CALLBACK (clutter_main_quit), NULL);

  rectangle = clutter_rectangle_new_with_color (&amp;rectangle_color);
  clutter_actor_set_size (rectangle, 300, 300);
  clutter_actor_set_position (rectangle, 50, 50);
  clutter_actor_set_reactive (rectangle, TRUE);

  clutter_container_add_actor (CLUTTER_CONTAINER (stage), rectangle);

  g_signal_connect (rectangle,
                    "motion-event",
                    G_CALLBACK (_pointer_motion_cb),
                    NULL);

  clutter_actor_show (stage);

  clutter_main ();

  return 0;
}
</pre></div></div><br class="example-break"><div class="example"><a name="events-pointer-motion-example-3"></a><p class="title"><b>Example 3.4. How actors influence pointer events on each other</b></p><div class="example-contents"><pre class="programlisting">/*
 * Testing what happens with a stack of actors and pointer events
 * red and green are reactive; blue is not
 *
 * when the pointer is over green (even if green is obscured by blue)
 * signals are emitted by green (not by blue);
 *
 * but when the pointer is over the overlap between red and green,
 * signals are emitted by green
 *
 * gcc -g -O0 -o stacked-actors-and-events stacked-actors-and-events.c `pkg-config --libs --cflags clutter-1.0 glib-2.0` -lm
 */
#include &lt;clutter/clutter.h&gt;

static const ClutterColor stage_color = { 0x33, 0x33, 0x55, 0xff };
static const ClutterColor red = { 0xff, 0x00, 0x00, 0xff };
static const ClutterColor green = { 0x00, 0xff, 0x00, 0xff };
static const ClutterColor blue = { 0x00, 0x00, 0xff, 0xff };

static gboolean
_pointer_motion_cb (ClutterActor *actor,
                    ClutterEvent *event,
                    gpointer      user_data)
{
  gfloat stage_x, stage_y;
  gfloat actor_x, actor_y;

  /* get the coordinates where the pointer crossed into the actor */
  clutter_event_get_coords (event, &amp;stage_x, &amp;stage_y);

  /*
   * as the coordinates are relative to the stage, rather than
   * the actor which emitted the signal, it can be useful to
   * transform them to actor-relative coordinates
   */
  clutter_actor_transform_stage_point (actor,
                                       stage_x, stage_y,
                                       &amp;actor_x, &amp;actor_y);

  g_debug ("pointer on actor %s @ x %.0f, y %.0f",
           clutter_actor_get_name (actor),
           actor_x, actor_y);

  return TRUE;
}

int
main (int argc, char *argv[])
{
  ClutterActor *stage;
  ClutterActor *r1, *r2, *r3;

  if (clutter_init (&amp;argc, &amp;argv) != CLUTTER_INIT_SUCCESS)
    return 1;

  stage = clutter_stage_new ();
  clutter_actor_set_size (stage, 300, 300);
  clutter_stage_set_color (CLUTTER_STAGE (stage), &amp;stage_color);
  g_signal_connect (stage, "destroy", G_CALLBACK (clutter_main_quit), NULL);

  r1 = clutter_rectangle_new_with_color (&amp;red);
  clutter_actor_set_size (r1, 150, 150);
  clutter_actor_add_constraint (r1, clutter_align_constraint_new (stage, CLUTTER_ALIGN_X_AXIS, 0.25));
  clutter_actor_add_constraint (r1, clutter_align_constraint_new (stage, CLUTTER_ALIGN_Y_AXIS, 0.25));
  clutter_actor_set_reactive (r1, TRUE);
  clutter_actor_set_name (r1, "red");

  r2 = clutter_rectangle_new_with_color (&amp;green);
  clutter_actor_set_size (r2, 150, 150);
  clutter_actor_add_constraint (r2, clutter_align_constraint_new (stage, CLUTTER_ALIGN_X_AXIS, 0.5));
  clutter_actor_add_constraint (r2, clutter_align_constraint_new (stage, CLUTTER_ALIGN_Y_AXIS, 0.5));
  clutter_actor_set_reactive (r2, TRUE);
  clutter_actor_set_depth (r2, -100);
  clutter_actor_set_name (r2, "green");

  r3 = clutter_rectangle_new_with_color (&amp;blue);
  clutter_actor_set_size (r3, 150, 150);
  clutter_actor_add_constraint (r3, clutter_align_constraint_new (stage, CLUTTER_ALIGN_X_AXIS, 0.75));
  clutter_actor_add_constraint (r3, clutter_align_constraint_new (stage, CLUTTER_ALIGN_Y_AXIS, 0.75));
  clutter_actor_set_opacity (r3, 125);
  clutter_actor_set_name (r3, "blue");

  clutter_container_add (CLUTTER_CONTAINER (stage), r1, r2, r3, NULL);

  g_signal_connect (r1, "motion-event", G_CALLBACK (_pointer_motion_cb), NULL);
  g_signal_connect (r2, "motion-event", G_CALLBACK (_pointer_motion_cb), NULL);

  clutter_actor_show (stage);

  clutter_main ();

  return 0;
}
</pre></div></div><br class="example-break"><div class="example"><a name="events-pointer-motion-example-4"></a><p class="title"><b>Example 3.5. Scribbling on a <span class="type">ClutterTexture</span> in response
        to pointer events</b></p><div class="example-contents"><pre class="programlisting">/*
 * Simple scribble application: move mouse over the dark yellow
 * rectangle to draw brighter yellow lines
 */

#include &lt;clutter/clutter.h&gt;

static const ClutterColor stage_color = { 0x33, 0x33, 0x55, 0xff };
static const ClutterColor actor_color = { 0xaa, 0x99, 0x00, 0xff };

typedef struct {
  ClutterPath *path;
  CoglPath    *cogl_path;
} Context;

static void
_convert_clutter_path_node_to_cogl_path (const ClutterPathNode *node,
                                         gpointer               data)
{
  ClutterKnot knot;

  g_return_if_fail (node != NULL);

  switch (node-&gt;type)
    {
    case CLUTTER_PATH_MOVE_TO:
      knot = node-&gt;points[0];
      cogl_path_move_to (knot.x, knot.y);
      g_debug ("move to %d, %d", knot.x, knot.y);
      break;
    case CLUTTER_PATH_LINE_TO:
      knot = node-&gt;points[0];
      cogl_path_line_to (knot.x, knot.y);
      g_debug ("line to %d, %d", knot.x, knot.y);
      break;
    default:
      break;
    }
}

static void
_canvas_paint_cb (ClutterActor *actor,
                  gpointer      user_data)
{
  Context *context = (Context *)user_data;

  cogl_set_source_color4ub (255, 255, 0, 255);

  cogl_set_path (context-&gt;cogl_path);

  clutter_path_foreach (context-&gt;path, _convert_clutter_path_node_to_cogl_path, NULL);

  cogl_path_stroke_preserve ();

  clutter_path_clear (context-&gt;path);

  context-&gt;cogl_path = cogl_get_path ();

  g_signal_stop_emission_by_name (actor, "paint");
}

static gboolean
_pointer_motion_cb (ClutterActor *actor,
                    ClutterEvent *event,
                    gpointer      user_data)
{
  ClutterMotionEvent *motion_event = (ClutterMotionEvent *)event;
  Context *context = (Context *)user_data;

  gfloat x, y;
  clutter_actor_transform_stage_point (actor, motion_event-&gt;x, motion_event-&gt;y, &amp;x, &amp;y);

  g_debug ("motion; x %f, y %f", x, y);

  clutter_path_add_line_to (context-&gt;path, x, y);

  clutter_actor_queue_redraw (actor);

  return TRUE;
}

static gboolean
_pointer_enter_cb (ClutterActor *actor,
                   ClutterEvent *event,
                   gpointer      user_data)
{
  ClutterCrossingEvent *cross_event = (ClutterCrossingEvent *)event;
  Context *context = (Context *)user_data;

  gfloat x, y;
  clutter_actor_transform_stage_point (actor, cross_event-&gt;x, cross_event-&gt;y, &amp;x, &amp;y);

  g_debug ("enter; x %f, y %f", x, y);

  clutter_path_add_move_to (context-&gt;path, x, y);

  clutter_actor_queue_redraw (actor);

  return TRUE;
}

int
main (int argc, char *argv[])
{
  Context *context = g_new0 (Context, 1);

  ClutterActor *stage;
  ClutterActor *rect;
  ClutterActor *canvas;

  if (clutter_init (&amp;argc, &amp;argv) != CLUTTER_INIT_SUCCESS)
    return 1;

  context-&gt;path = clutter_path_new ();

  cogl_path_new ();
  context-&gt;cogl_path = cogl_get_path ();

  stage = clutter_stage_new ();
  clutter_actor_set_size (stage, 400, 400);
  clutter_stage_set_color (CLUTTER_STAGE (stage), &amp;stage_color);
  g_signal_connect (stage, "destroy", G_CALLBACK (clutter_main_quit), NULL);

  rect = clutter_rectangle_new_with_color (&amp;actor_color);
  clutter_actor_set_size (rect, 300, 300);
  clutter_actor_add_constraint (rect, clutter_align_constraint_new (stage, CLUTTER_ALIGN_X_AXIS, 0.5));
  clutter_actor_add_constraint (rect, clutter_align_constraint_new (stage, CLUTTER_ALIGN_Y_AXIS, 0.5));

  clutter_container_add_actor (CLUTTER_CONTAINER (stage), rect);

  canvas = clutter_texture_new ();
  clutter_actor_set_size (canvas, 300, 300);
  clutter_actor_add_constraint (canvas, clutter_align_constraint_new (rect, CLUTTER_ALIGN_X_AXIS, 0.0));
  clutter_actor_add_constraint (canvas, clutter_align_constraint_new (rect, CLUTTER_ALIGN_Y_AXIS, 0.0));
  clutter_actor_set_reactive (canvas, TRUE);

  clutter_container_add_actor (CLUTTER_CONTAINER (stage), canvas);
  clutter_actor_raise_top (canvas);

  g_signal_connect (canvas,
                    "motion-event",
                    G_CALLBACK (_pointer_motion_cb),
                    context);

  g_signal_connect (canvas,
                    "enter-event",
                    G_CALLBACK (_pointer_enter_cb),
                    context);

  g_signal_connect (canvas,
                    "paint",
                    G_CALLBACK (_canvas_paint_cb),
                    context);

  clutter_actor_show (stage);

  clutter_main ();

  g_object_unref (context-&gt;path);
  g_free (context);

  return 0;
}
</pre></div></div><br class="example-break"></div></div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"><a accesskey="p" href="events-mouse-scroll.html">Prev</a> </td><td width="20%" align="center"><a accesskey="u" href="events.html">Up</a></td><td width="40%" align="right"> <a accesskey="n" href="events-buttons.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top">3. Detecting mouse scrolling on an actor </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> 5. Making an actor respond to button events</td></tr></table></div></body></html>