EMSTONE Bebop » GooCanvas http://bebop.emstone.com 엠스톤 개발팀 블로그 Sun, 29 Jan 2012 05:25:29 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 http://creativecommons.org/licenses/by-nc-nd/2.0/kr/ GooCanvas 라이브러리에서 툴팁 모양 Polygon 생성하기 http://bebop.emstone.com/2009/01/07/create-tooltip-polygon-with-goocanvas-library/?utm_source=rss&utm_medium=rss&utm_campaign=create-tooltip-polygon-with-goocanvas-library http://bebop.emstone.com/2009/01/07/create-tooltip-polygon-with-goocanvas-library/#comments Wed, 07 Jan 2009 06:21:05 +0000 lethean http://bebop.emstone.com/?p=396 Continue reading →]]> Canvas 위에 정보를 표시하는 인터페이스로 Google map 과 비슷하게 툴팁 모양을 생각해 볼수 있는데 이를 위해서는 GooCanvasPolyline을 이용하면 됩니다. 예제에는 polyline을 그룹으로 관리하는 방식과 points 구조체를 이용하여 하나의 polyline을 구성하는 방식을 테스트 했습니다. 처음 방식은 툴팁내부의 색상을 “fill-color” 속성으로 영역을 채우지 못하고 pattern 등의 다른 방법을 이용해야 가능할 것으로 보입니다. 동작 여부는 아직 확인하지 못한 상태입니다. 두번째 방식으로는 쉽게 색상 표시가 가능 합니다.

GooCanvasItem *polyline_item, *polygon_item;
GooCanvasItem *group;
GooCanvasPoints *points;
 
group = goo_canvas_group_new (root,
                              "line-width", 2.0,
                              "line-cap", CAIRO_LINE_CAP_ROUND,
                              "stroke-color", "yellow",
                              NULL);
goo_canvas_item_translate (group, 100, 100);
 
polyline_item = goo_canvas_polyline_new_line (group, 1, 1, 1, 30, NULL);
polyline_item = goo_canvas_polyline_new_line (group, 1, 30, 20, 30, NULL);
polyline_item = goo_canvas_polyline_new_line (group, 20, 30, 15, 65, NULL);
polyline_item = goo_canvas_polyline_new_line (group, 15, 65, 30, 30, NULL);
polyline_item = goo_canvas_polyline_new_line (group, 30, 30, 50, 30, NULL);
polyline_item = goo_canvas_polyline_new_line (group, 50, 30, 50, 1, NULL);
polyline_item = goo_canvas_polyline_new_line (group, 50, 1, 1, 1, NULL);
 
points = goo_canvas_points_new (7);
points->coords[0] = 1.0;
points->coords[1] = 1.0;
points->coords[2] = 1.0;
points->coords[3] = 30.0;
points->coords[4] = 20.0;
points->coords[5] = 30.0;
points->coords[6] = 15.0;
points->coords[7] = 65.0;
points->coords[8] = 30.0;
points->coords[9] = 30.0;
points->coords[10] = 50.0;
points->coords[11] = 30.0;
points->coords[12] = 50.0;
points->coords[13] = 1.0;
 
polygon_item = goo_canvas_polyline_new (root, TRUE, 0,
                                        "line-width", 1.0,
                                        "points", points,
                                        "stroke_color", "red",
                                        "fill-color", "yellow",
                                        NULL);

goocanvas-polygon

]]> http://bebop.emstone.com/2009/01/07/create-tooltip-polygon-with-goocanvas-library/feed/ 0 http://creativecommons.org/licenses/by-nc-nd/2.0/kr/ GooCanvas 라이브러리에서 마우스 이벤트 처리와 에니메이션 효과 주기 http://bebop.emstone.com/2009/01/07/mouse-event-handling-and-animation-effects-in-goocanvas/?utm_source=rss&utm_medium=rss&utm_campaign=mouse-event-handling-and-animation-effects-in-goocanvas http://bebop.emstone.com/2009/01/07/mouse-event-handling-and-animation-effects-in-goocanvas/#comments Wed, 07 Jan 2009 02:42:10 +0000 lethean http://bebop.emstone.com/?p=387 Continue reading →]]> 이전에 설명한 이미지 파일을 보여주는 부분을 활용하여 작은 아이콘 이미지 를 배경 위에 표시하고 이 아이콘을 마우스로 움직이도록 하는 간단한 코드를 작성해 보도록 하겠습니다.

GooCanvasItem 은 마우스 이벤트를 처리할 수 있는 singal 이 연결되어 있습니다. 이중 “motion_notify_event”, “button_press_event”, “button_release_event” 를 이용하면 됩니다.

static gboolean dragging = FALSE;
static double drag_x, drag_y;
 
static gboolean
on_motion_notify (GooCanvasItem *item,
                  GooCanvasItem *target,
                  GdkEventMotion *event,
                  gpointer data)
{
  if (dragging && GDK_BUTTON1_MASK)
   {
      double new_x = event->x;
      double new_y = event->y;
 
      goo_canvas_item_translate (item, new_x - drag_x, new_y - drag_y);
   }
 
  return 0;
}
 
static gboolean
on_button_press (GooCanvasItem *item,
                 GooCanvasItem *target,
                 GdkEventButton *event,
                 gpointer data)
{
  GooCanvas *canvas;
  GdkCursor *fleur;
 
  canvas = goo_canvas_item_get_canvas (item);
  switch (event->button)
    {
    case 1:
      if (event->state & GDK_SHIFT_MASK)
        break;
      else
        {
          drag_x = event->x;
          drag_y = event->y;
 
          fleur = gdk_cursor_new (GDK_FLEUR);
         goo_canvas_pointer_grab (canvas, item,
                                  GDK_POINTER_MOTION_MASK | GDK_BUTTON_RELEASE_MASK,
                                  fleur, event->time);
         gdk_cursor_unref (fleur);
         dragging = TRUE;
       }
       break;
    case 2:
       goo_canvas_item_lower (item, NULL);
       break;
    case 3:
       goo_canvas_item_raise (item, NULL);
       break;
    default:
       break;
  }
 
  return TRUE;
}
 
static gboolean
on_button_release (GooCanvasItem *item,
                   GooCanvasItem *target,
                   GdkEventButton *event,
                   gpointer data)
{
  GooCanvas *canvas;
 
  canvas = goo_canvas_item_get_canvas (item);
  goo_canvas_pointer_ungrab (canvas, item, event->time);
  dragging = FALSE;
 
  return TRUE;
}
 
int
main (int argc, char *argv[])
{
  ...
 
  icon_pixbuf = gdk_pixbuf_new_from_file ("icon.png", &err);
  icon_item = goo_canvas_image_new (root, icon_pixbuf, -16, -16, NULL);
  goo_canvas_item_set_simple_transform (icon_item, 400, 400, 1, 0);
 
  goo_canvas_item_animate (icon2_item, 0, 0, 2, 0, FALSE, 400, 40,
GOO_CANVAS_ANIMATE_BOUNCE);
 
  g_signal_connect (icon_item, "motion_notify_event", G_CALLBACK (on_motion_notify), NULL);
  g_signal_connect (icon_item, "button_press_event", G_CALLBACK (on_button_press), NULL);
  g_signal_connect (icon_item, "button_release_event", G_CALLBACK
(on_button_release), NULL);
 
  ...
}

이벤트 효과를 주기 위해서는 주의 해야할 점이 있습니다. 에니메이션 함수의 옵션중 Item 의 크기를 변경하는 옵션이 존재하는데 이 경우 크기가 점점 변하면서 이 Item 의 크기만 변하지 않고 cairo_surface까지 함께 크기가 변합니다. 따라서  위와 같이 이미지 위젯 생성시 (0,0) 위치를 기준이 실제 Item의 중간이 되도록 지정해 주지 않으면 크기가 변경되면서 Item의 위치도 함께 변경이 됩니다.

]]> http://bebop.emstone.com/2009/01/07/mouse-event-handling-and-animation-effects-in-goocanvas/feed/ 0 http://creativecommons.org/licenses/by-nc-nd/2.0/kr/ GooCanvas 라이브러리를 이용하여 배경 이미지 그리기 http://bebop.emstone.com/2009/01/06/draw-background-image-with-goocanvas-library/?utm_source=rss&utm_medium=rss&utm_campaign=draw-background-image-with-goocanvas-library http://bebop.emstone.com/2009/01/06/draw-background-image-with-goocanvas-library/#comments Tue, 06 Jan 2009 01:46:22 +0000 lethean http://bebop.emstone.com/?p=381 Continue reading →]]> 가장 처음으로 png 파일로 부터 배경이미지를 표시하는 작업을 진행합니다.

테스트 코드 컴파일을 위해서는 라이브러리 설치가 필요합니다. 이 문서에서는 Ubuntu 배포판을 기준으로 설명하도록 하겠습니다.

  • libgoocanvas-common
  • libgoocanvas-dev
  • libgoocanvas3

위 패키지를 설치하고  간단히 라이브러리 path를 이용하여 컴파일 하면 됩니다.

“pkg-config –cflags –libs goocanvas” 이용하면 의존하는 헤더파일과 라이브러리링크 위치를 얻을 수 있습니다.

-I/usr/include/goocanvas-1.0 -I/usr/include/gtk-2.0 -I/usr/include/cairo
-I/usr/lib/gtk-2.0/include -I/usr/include/atk-1.0 -I/usr/include/pango-1.0
-I/usr/include/glib-2.0 -I/usr/lib/glib-2.0/include -I/usr/include/pixman-1
-I/usr/include/freetype2 -I/usr/include/libpng12  -lgoocanvas -lgtk-x11-2.0
-lgdk-x11-2.0 -latk-1.0 -lpangoft2-1.0 -lgdk_pixbuf-2.0 -lm -lpangocairo-1.0
-lgio-2.0 -lcairo -lpango-1.0 -lfreetype -lz -lfontconfig -lgobject-2.0
-lgmodule-2.0 -lglib-2.0

아래 테스트 코드는 png 파일을 이용하여 배경을 그리고 위에 간단한 텍스트를 표시하는 기능을 수행합니다.

#include <goocanvas.h>
#include <gtk/gtk.h>
#include <stdio.h>
 
int main (int argc, char *argv[])
{
  GtkWidget *window, *canvas;
  GooCanvasItem *root, *image_item, *text_item;
  GdkPixbuf *pixbuf;
  GError *err;
 
  /* Initialize GTK+. */
  gtk_set_locale ();
  gtk_init (&argc, &argv);
 
  /* Create the window and widgets. */
  window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
  gtk_window_set_default_size (GTK_WINDOW (window), 640, 480);
  gtk_widget_show (window);
 
  canvas = goo_canvas_new ();
  gtk_widget_set_size_request (canvas, 640, 480);
  goo_canvas_set_bounds (GOO_CANVAS (canvas), 0, 0, 1000, 1000);
  gtk_widget_show (canvas);
  gtk_container_add (GTK_CONTAINER (window), canvas);
 
  root = goo_canvas_get_root_item (GOO_CANVAS (canvas));
 
  /* Add a few simple items. */
  err = NULL;
  pixbuf = gdk_pixbuf_new_from_file ("bg.png", &err);
  if (!pixbuf || err)
    {
      fprintf (stderr, "%s\n", err->message);
      g_error_free (err);
      return -1;
    }
  image_item = goo_canvas_image_new (root, pixbuf, 0, 0, NULL);
 
  text_item = goo_canvas_text_new (root, "Hello World", 300, 300, -1,
    GTK_ANCHOR_CENTER,
    "font", "Sans 24",
    NULL);
 
  /* Pass control to the GTK+ main event loop. */
  gtk_main ();
 
  return 0;
}
배경 이미지 표시 화면

배경 이미지 표시 화면

]]> http://bebop.emstone.com/2009/01/06/draw-background-image-with-goocanvas-library/feed/ 0 http://creativecommons.org/licenses/by-nc-nd/2.0/kr/ GooCanvas 라이브러리 소개 http://bebop.emstone.com/2009/01/05/goocanvas-introduction/?utm_source=rss&utm_medium=rss&utm_campaign=goocanvas-introduction http://bebop.emstone.com/2009/01/05/goocanvas-introduction/#comments Mon, 05 Jan 2009 07:09:29 +0000 lethean http://bebop.emstone.com/?p=370 Continue reading →]]> GooCanvas는 Gtk+ 기반의 2D Draw 기능을 수행하는 위젯기반 라이브러리입니다.

내부적으로 Cairo 라이브러리를 이용하고 있으며 기본 위젯인 GooCanvas 는 GtkContainer 를 상속받아 작성되어 있습니다. 모델/뷰 개념을 라이브러리에서 지원하고 있어 실제 화면에 보여지는 부분의 갱신이 필요할 경우 미리 생성해 놓은 모델을 바로 drawing 하도록 하여 새로운 이미지로의 변경이 용이할 것으로 보입니다.

각 이미지 primitive를 item 으로 지칭하며, 이 item 들은 GObject에서 상속된 GooCanvasItemSimple 객체로 부터 파생됩니다. 각 item 들은 해당 속성은 가지고 있지만, 기본 이벤트는 가지고 있지 않습니다. 이후 작업에서 GObject 의 이벤트를 이용하여 필요시 이벤트를 등록 사용하게 됩니다.

이 라이브러리의 특징을 살펴보면 다음의 기능및 특징을 가지고 있습니다.

  • 모델/뷰 개념 지원
  • 기본 항목으로 rect/ellipse/polyline/text/image/grid/group
  • 다각형/호 등을 지원하기 위한 path 를 지원
  • GtkTable Widget 과 같은 layout table 지원
  • Gtk+ Widget 내포
  • 동일 위치의 화면에 보이는 item 순서 조절
  • 모든 항목에 대한 변형(Transformation)이 가능 – cairo_matrix 를 이용
  • 이벤트 핸들링 지원
  • Scrolling/Zooming 지원
  • 캔버스의 크기가 변경되더라고 정적 item 은 크기를 조정
  • 특정 크기 이하에서는 아이템이 보이지 않도록 조정 가능
  • 간단한 에니메이션 효과
  • 여러 단위(Units) 지원 – pixels/points/inches/millimeters

이 라이브러리에 대한 자세한 내용은 http://live.gnome.org/GooCanvas 에서 확인 할 수 있습니다.

]]> http://bebop.emstone.com/2009/01/05/goocanvas-introduction/feed/ 0 http://creativecommons.org/licenses/by-nc-nd/2.0/kr/