Add SVG support for draw2d images

CMakeTargets.cmake

@@ -1,8 +1,8 @@
 # NAppGUI CMake targets
 
 set(ALL_TARGETS "")
-set(ALL_TARGETS ${ALL_TARGETS};src/sewer;src/osbs;src/core;src/geom2d;src/draw2d;src/osgui;src/gui;src/osapp;src/encode;src/inet;src/ogl3d;tools/nrc)
+set(ALL_TARGETS ${ALL_TARGETS};src/sewer;src/osbs;src/core;src/geom2d;src/draw2d;src/nsvg;src/osgui;src/gui;src/osapp;src/encode;src/inet;src/ogl3d;tools/nrc)
 
 if (NAPPGUI_DEMO)
     set(ALL_TARGETS ${ALL_TARGETS};demo/bode;demo/bricks;demo/casino;demo/col2dhello;demo/colorview;demo/dice;demo/die;demo/drawbig;demo/drawhello;demo/drawimg;demo/fractals;demo/guihello;demo/hello;demo/hellocpp;demo/htjson;demo/products;demo/stlcmp;demo/urlimg;demo/webhello;demo/glhello)
-endif()
+endif()

demo/drawhello/CMakeLists.txt

@@ -1,2 +1,2 @@
-nap_desktop_app(DrawHello "" NRC_EMBEDDED)
+nap_desktop_app(DrawHello "nsvg" NRC_EMBEDDED)
 set_target_properties(DrawHello PROPERTIES FOLDER "demo")

demo/drawhello/drawhello.c

@@ -2,6 +2,7 @@
 
 #include "res_drawhello.h"
 #include <nappgui.h>
+#include <nsvg/nsvg.h>
 #include <gui/view.inl>
 #include <gui/drawctrl.inl>
 
@@ -646,33 +647,124 @@ static void i_text_raster(DCtx *ctx, const real32_t xscale, const real32_t text_
 
 /*---------------------------------------------------------------------------*/
 
-static void i_image(DCtx *ctx)
+static void i_box_frame(DCtx *ctx, const Font *title_font, const Font *meta_font, const char_t *title, const uint32_t content_width, const uint32_t content_height, const real32_t x, const real32_t y, const real32_t width, const real32_t height)
 {
-    ResPack *pack = res_drawhello_respack("");
-    const Image *image = image_from_resource(pack, IMAGE_PNG);
-    T2Df matrix;
+    String *caption = str_printf("%u x %u", content_width, content_height);
+    cassert_no_null(ctx);
+    cassert_no_null(title_font);
+    cassert_no_null(meta_font);
+    cassert_no_null(caption);
+    draw_fill_color(ctx, color_rgb(240, 243, 246));
+    draw_line_color(ctx, color_rgb(188, 196, 205));
+    draw_line_width(ctx, 1);
+    draw_rect(ctx, ekSKFILL, x, y, width, height);
+    draw_text_width(ctx, width - 20);
+    draw_text_trim(ctx, ekELLIPEND);
+    draw_font(ctx, title_font);
+    draw_text_color(ctx, color_rgb(52, 63, 72));
+    draw_text(ctx, title, x + 10, y + 7);
+    draw_font(ctx, meta_font);
+    draw_text_color(ctx, color_rgb(106, 117, 126));
+    draw_text(ctx, tc(caption), x + 10, y + 22);
+    draw_text_width(ctx, -1);
+    draw_text_trim(ctx, ekELLIPNONE);
+    str_destroy(&caption);
+}
 
-    draw_image_align(ctx, ekLEFT, ekTOP);
-    draw_image(ctx, image, 25, 25);
-    t2d_movef(&matrix, kT2D_IDENTf, 300, 200);
-    t2d_rotatef(&matrix, &matrix, kBMATH_PIf / 8);
+/*---------------------------------------------------------------------------*/
+
+static void i_image_box(DCtx *ctx, const Font *title_font, const Font *meta_font, const Image *image, const char_t *title, const real32_t x, const real32_t y, const real32_t width, const real32_t height)
+{
+    cassert_no_null(image);
+    i_box_frame(ctx, title_font, meta_font, title, image_width(image), image_height(image), x, y, width, height);
     draw_image_align(ctx, ekCENTER, ekCENTER);
+    draw_image(ctx, image, x + width / 2, y + 40 + (height - 40) / 2);
+    draw_image_align(ctx, ekLEFT, ekTOP);
+}
+
+/*---------------------------------------------------------------------------*/
+
+static void i_nsvg_box(DCtx *ctx, const Font *title_font, const Font *meta_font, const NSVG *svg, const uint32_t svg_width, const uint32_t svg_height, const uint32_t draw_width, const uint32_t draw_height, const char_t *title, const real32_t x, const real32_t y, const real32_t width, const real32_t height)
+{
+    const real32_t title_height = 40;
+    T2Df matrix;
+    real32_t sx, sy;
+    real32_t px, py;
+
+    cassert_no_null(ctx);
+    cassert_no_null(svg);
+    cassert(svg_width > 0);
+    cassert(svg_height > 0);
+
+    i_box_frame(ctx, title_font, meta_font, title, draw_width, draw_height, x, y, width, height);
+
+    sx = (real32_t)draw_width / (real32_t)svg_width;
+    sy = (real32_t)draw_height / (real32_t)svg_height;
+    px = x + ((width - (real32_t)draw_width) * .5f);
+    py = y + title_height + (((height - title_height) - (real32_t)draw_height) * .5f);
+
+    t2d_movef(&matrix, kT2D_IDENTf, px, py);
+    t2d_scalef(&matrix, &matrix, sx, sy);
     draw_matrixf(ctx, &matrix);
-    draw_image(ctx, image, 0, 0);
+    nsvg_draw(svg, ctx);
     draw_matrixf(ctx, kT2D_IDENTf);
-    draw_image_align(ctx, ekRIGHT, ekTOP);
-    draw_image(ctx, image, 575, 25);
-    draw_image_align(ctx, ekLEFT, ekBOTTOM);
-    draw_image(ctx, image, 25, 375);
-    draw_image_align(ctx, ekRIGHT, ekBOTTOM);
-    draw_image(ctx, image, 575, 375);
+}
 
-    draw_fill_color(ctx, kCOLOR_BLUE);
-    draw_circle(ctx, ekFILL, 25, 25, 3);
-    draw_circle(ctx, ekFILL, 300, 200, 3);
-    draw_circle(ctx, ekFILL, 575, 25, 3);
-    draw_circle(ctx, ekFILL, 25, 375, 3);
-    draw_circle(ctx, ekFILL, 575, 375, 3);
+/*---------------------------------------------------------------------------*/
+
+static void i_image(DCtx *ctx, const real32_t slider)
+{
+    ResPack *pack = res_drawhello_respack("");
+    const Image *png = image_from_resource(pack, IMAGE_PNG);
+    const byte_t *svg_data = NULL;
+    NSVG *svg = NULL;
+    Pixbuf *svg_pixbuf = NULL;
+    Pixbuf *svg_small_pixbuf = NULL;
+    Pixbuf *svg_large_pixbuf = NULL;
+    uint32_t svg_size = 0;
+    uint32_t svg_width = 0;
+    uint32_t svg_height = 0;
+    uint32_t dynamic_width = 40 + (uint32_t)(slider * 120.f + .5f);
+    uint32_t dynamic_height = 0;
+    Image *png_scaled = image_scale(png, 180, UINT32_MAX);
+    Image *svg_small = NULL;
+    Image *svg_large = NULL;
+    Font *title_font = font_system(13.f, 0);
+    Font *meta_font = font_system(11.f, 0);
+
+    svg_data = respack_file(pack, IMAGE_SVG, &svg_size);
+    cassert_no_null(svg_data);
+    svg = nsvg_from_data(svg_data, svg_size);
+    cassert_no_null(svg);
+    svg_pixbuf = nsvg_pixbuf(svg, UINT32_MAX, UINT32_MAX, ekRGBA32);
+    cassert_no_null(svg_pixbuf);
+    svg_width = pixbuf_width(svg_pixbuf);
+    svg_height = pixbuf_height(svg_pixbuf);
+    dynamic_height = (uint32_t)(((real32_t)svg_height * (real32_t)dynamic_width / (real32_t)svg_width) + .5f);
+    svg_small_pixbuf = nsvg_pixbuf(svg, 32, UINT32_MAX, ekRGBA32);
+    svg_large_pixbuf = nsvg_pixbuf(svg, 160, UINT32_MAX, ekRGBA32);
+    cassert_no_null(svg_small_pixbuf);
+    cassert_no_null(svg_large_pixbuf);
+    svg_small = image_from_pixbuf(svg_small_pixbuf, NULL);
+    svg_large = image_from_pixbuf(svg_large_pixbuf, NULL);
+    cassert_no_null(svg_small);
+    cassert_no_null(svg_large);
+
+    i_image_box(ctx, title_font, meta_font, png_scaled, "PNG resource", 20, 20, 270, 150);
+    i_nsvg_box(ctx, title_font, meta_font, svg, svg_width, svg_height, svg_width, svg_height, "SVG vector", 310, 20, 270, 150);
+    i_image_box(ctx, title_font, meta_font, svg_small, "Pixbuf 32 px", 20, 190, 170, 190);
+    i_nsvg_box(ctx, title_font, meta_font, svg, svg_width, svg_height, dynamic_width, dynamic_height, "Vector slider", 215, 190, 170, 190);
+    i_image_box(ctx, title_font, meta_font, svg_large, "Pixbuf 160 px", 410, 190, 170, 190);
+
+    font_destroy(&title_font);
+    font_destroy(&meta_font);
+    image_destroy(&svg_large);
+    image_destroy(&svg_small);
+    pixbuf_destroy(&svg_large_pixbuf);
+    pixbuf_destroy(&svg_small_pixbuf);
+    pixbuf_destroy(&svg_pixbuf);
+    nsvg_destroy(&svg);
+    image_destroy(&png_scaled);
     respack_destroy(&pack);
 }
 
@@ -735,7 +827,7 @@ static void i_OnDraw(App *app, Event *e)
         i_text_raster(p->ctx, slider1_pos + .5f, 100 + 200 * (-.5f + slider2_pos), text_trim, text_align);
         break;
     case 13:
-        i_image(p->ctx);
+        i_image(p->ctx, slider1_pos);
         break;
     default:
         cassert_default(app->option);
@@ -826,7 +918,8 @@ static void i_set_demo(App *app, const uint32_t option)
         cell_enabled(app->popup_align, TRUE);
         break;
     case 13:
-        label_text(app->label, "Drawing images with alignment");
+        label_text(app->label, "PNG resources plus SVG through nsvg. Side cards use nsvg_pixbuf(); the slider scales nsvg_draw().");
+        cell_enabled(app->slider1, TRUE);
         break;
     default:
         cassert_default(app->option);
@@ -897,7 +990,7 @@ static Panel *i_panel(App *app)
     popup_add_elem(popup1, "Text-3", NULL);
     popup_add_elem(popup1, "Text-4", NULL);
     popup_add_elem(popup1, "Text-5", NULL);
-    popup_add_elem(popup1, "Image", NULL);
+    popup_add_elem(popup1, "Image/SVG", NULL);
     popup_list_height(popup1, 6);
     popup_add_elem(popup2, "No trim", NULL);
     popup_add_elem(popup2, "Ellip begin", NULL);

src/draw2d/dctx.c

@@ -32,8 +32,11 @@ void _dctx_init(DCtx *ctx, const bool_t reset)
         draw_line_width(ctx, 1);
         draw_line_cap(ctx, ekLCFLAT);
         draw_line_join(ctx, ekLJMITER);
+        draw_line_miter_limit(ctx, 10);
         draw_line_dash(ctx, NULL, 0);
+        draw_line_dash_offset(ctx, 0);
         draw_fill_color(ctx, kCOLOR_BLACK);
+        draw_fill_rule(ctx, ekFILLNONZERO);
         draw_fill_matrix(ctx, kT2D_IDENTf);
         draw_fill_wrap(ctx, ekFCLAMP);
         draw_font(ctx, font);

src/draw2d/draw.h

@@ -23,6 +23,18 @@ _draw2d_api void draw_arc(DCtx *ctx, const real32_t x, const real32_t y, const r
 
 _draw2d_api void draw_bezier(DCtx *ctx, const real32_t x0, const real32_t y0, const real32_t x1, const real32_t y1, const real32_t x2, const real32_t y2, const real32_t x3, const real32_t y3);
 
+_draw2d_api void draw_path_begin(DCtx *ctx);
+
+_draw2d_api void draw_path_move(DCtx *ctx, const real32_t x, const real32_t y);
+
+_draw2d_api void draw_path_line(DCtx *ctx, const real32_t x, const real32_t y);
+
+_draw2d_api void draw_path_bezier(DCtx *ctx, const real32_t x1, const real32_t y1, const real32_t x2, const real32_t y2, const real32_t x3, const real32_t y3);
+
+_draw2d_api void draw_path_close(DCtx *ctx);
+
+_draw2d_api void draw_path_end(DCtx *ctx, const drawop_t op);
+
 _draw2d_api void draw_line_color(DCtx *ctx, const color_t color);
 
 _draw2d_api void draw_line_fill(DCtx *ctx);
@@ -33,8 +45,12 @@ _draw2d_api void draw_line_cap(DCtx *ctx, const linecap_t cap);
 
 _draw2d_api void draw_line_join(DCtx *ctx, const linejoin_t join);
 
+_draw2d_api void draw_line_miter_limit(DCtx *ctx, const real32_t limit);
+
 _draw2d_api void draw_line_dash(DCtx *ctx, const real32_t *pattern, const uint32_t n);
 
+_draw2d_api void draw_line_dash_offset(DCtx *ctx, const real32_t offset);
+
 _draw2d_api void draw_rect(DCtx *ctx, const drawop_t op, const real32_t x, const real32_t y, const real32_t width, const real32_t height);
 
 _draw2d_api void draw_rndrect(DCtx *ctx, const drawop_t op, const real32_t x, const real32_t y, const real32_t width, const real32_t height, const real32_t radius);
@@ -47,8 +63,12 @@ _draw2d_api void draw_polygon(DCtx *ctx, const drawop_t op, const V2Df *points,
 
 _draw2d_api void draw_fill_color(DCtx *ctx, const color_t color);
 
+_draw2d_api void draw_fill_rule(DCtx *ctx, const fillrule_t rule);
+
 _draw2d_api void draw_fill_linear(DCtx *ctx, const color_t *color, const real32_t *stop, const uint32_t n, const real32_t x0, const real32_t y0, const real32_t x1, const real32_t y1);
 
+_draw2d_api void draw_fill_radial(DCtx *ctx, const color_t *color, const real32_t *stop, const uint32_t n, const real32_t x0, const real32_t y0, const real32_t r0, const real32_t x1, const real32_t y1, const real32_t r1);
+
 _draw2d_api void draw_fill_matrix(DCtx *ctx, const T2Df *t2d);
 
 _draw2d_api void draw_fill_wrap(DCtx *ctx, const fillwrap_t wrap);

src/draw2d/draw2d.hxx

@@ -74,6 +74,12 @@ typedef enum _fillwrap_t
     ekFFLIP
 } fillwrap_t;
 
+typedef enum _fillrule_t
+{
+    ekFILLNONZERO,
+    ekFILLEVENODD
+} fillrule_t;
+
 typedef enum _drawop_t
 {
     ekSTROKE = 1,
@@ -117,4 +123,4 @@ typedef struct _font_t Font;
 DeclSt(color_t);
 DeclPt(Image);
 
-#endif
+#endif

src/draw2d/gtk/draw2d_gtk.ixx

@@ -22,7 +22,8 @@
 typedef enum _fillmode_t
 {
     ekFILL_SOLID,
-    ekFILL_LINEAR
+    ekFILL_LINEAR,
+    ekFILL_RADIAL
 } fillmode_t;
 
 struct _dctx_t
@@ -44,8 +45,10 @@ struct _dctx_t
     color_t stroke_color;
     color_t source_color;
     fillmode_t fillmode;
+    cairo_fill_rule_t fill_rule;
     double line_dash[16];
     int dash_count;
+    double dash_offset;
     real32_t text_width;
     align_t text_halign;
     align_t text_valign;