examples: new AnimateMask example and svg images with masks

Change-Id: I609597a5ecb710e9af9939a3028eeef691b66188
This commit is contained in:
Patryk Kaczmarek 2021-02-23 13:37:36 +01:00 committed by JunsuChoi
parent f378105c43
commit 03d48159e3
7 changed files with 520 additions and 2 deletions

View file

@ -0,0 +1,186 @@
#include "Common.h"
/************************************************************************/
/* Drawing Commands */
/************************************************************************/
tvg::Shape *pMaskShape = nullptr;
tvg::Shape *pMask = nullptr;
void tvgDrawCmds(tvg::Canvas* canvas)
{
if (!canvas) return;
// background
auto bg = tvg::Shape::gen();
bg->appendRect(0,0,WIDTH, HEIGHT,0, 0);
bg->fill(255, 255, 255, 255);
canvas->push(move(bg));
// image
auto picture1 = tvg::Picture::gen();
picture1->load(EXAMPLE_DIR"/human.svg");
auto picture2 = tvg::Picture::gen();
picture2->load(EXAMPLE_DIR"/bones.svg");
canvas->push(move(picture1));
//mask
auto maskShape = tvg::Shape::gen();
pMaskShape = maskShape.get();
maskShape->appendCircle(180, 180, 125, 125);
maskShape->fill(0, 0, 0, 125);
maskShape->stroke(25, 25, 25, 255);
maskShape->stroke(tvg::StrokeJoin::Round);
maskShape->stroke(10);
canvas->push(move(maskShape));
auto mask = tvg::Shape::gen();
pMask = mask.get();
mask->appendCircle(180, 180, 125, 125);
mask->fill(255, 0, 0, 255);
picture2->composite(move(mask), tvg::CompositeMethod::AlphaMask);
if (canvas->push(move(picture2)) != tvg::Result::Success) return;
}
/************************************************************************/
/* Sw Engine Test Code */
/************************************************************************/
static unique_ptr<tvg::SwCanvas> swCanvas;
void tvgSwTest(uint32_t* buffer)
{
//Create a Canvas
swCanvas = tvg::SwCanvas::gen();
swCanvas->target(buffer, WIDTH, WIDTH, HEIGHT, tvg::SwCanvas::ARGB8888);
/* Push the shape into the Canvas drawing list
When this shape is into the canvas list, the shape could update & prepare
internal data asynchronously for coming rendering.
Canvas keeps this shape node unless user call canvas->clear() */
tvgDrawCmds(swCanvas.get());
}
void drawSwView(void* data, Eo* obj)
{
if (swCanvas->draw() == tvg::Result::Success) {
swCanvas->sync();
}
}
void tvgUpdateCmds(tvg::Canvas* canvas, float progress)
{
if (!canvas) return;
/* Update shape directly.
You can update only necessary properties of this shape,
while retaining other properties. */
// Translate mask object with its stroke & update
pMaskShape->translate(0 , progress * 300);
pMask->translate(0 , progress * 300);
canvas->update(pMaskShape);
canvas->update(pMask);
}
void transitSwCb(Elm_Transit_Effect *effect, Elm_Transit* transit, double progress)
{
tvgUpdateCmds(swCanvas.get(), progress);
Eo* img = (Eo*) effect;
evas_object_image_data_update_add(img, 0, 0, WIDTH, HEIGHT);
evas_object_image_pixels_dirty_set(img, EINA_TRUE);
}
/************************************************************************/
/* GL Engine Test Code */
/************************************************************************/
static unique_ptr<tvg::GlCanvas> glCanvas;
void initGLview(Evas_Object *obj)
{
static constexpr auto BPP = 4;
//Create a Canvas
glCanvas = tvg::GlCanvas::gen();
glCanvas->target(nullptr, WIDTH * BPP, WIDTH, HEIGHT);
/* Push the shape into the Canvas drawing list
When this shape is into the canvas list, the shape could update & prepare
internal data asynchronously for coming rendering.
Canvas keeps this shape node unless user call canvas->clear() */
tvgDrawCmds(glCanvas.get());
}
void drawGLview(Evas_Object *obj)
{
auto gl = elm_glview_gl_api_get(obj);
gl->glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
gl->glClear(GL_COLOR_BUFFER_BIT);
if (glCanvas->draw() == tvg::Result::Success) {
glCanvas->sync();
}
}
void transitGlCb(Elm_Transit_Effect *effect, Elm_Transit* transit, double progress)
{
}
/************************************************************************/
/* Main Code */
/************************************************************************/
int main(int argc, char **argv)
{
tvg::CanvasEngine tvgEngine = tvg::CanvasEngine::Sw;
if (argc > 1) {
if (!strcmp(argv[1], "gl")) tvgEngine = tvg::CanvasEngine::Gl;
}
//Initialize ThorVG Engine
if (tvgEngine == tvg::CanvasEngine::Sw) {
cout << "tvg engine: software" << endl;
} else {
cout << "tvg engine: opengl" << endl;
}
//Threads Count
auto threads = std::thread::hardware_concurrency();
//Initialize ThorVG Engine
if (tvg::Initializer::init(tvgEngine, threads) == tvg::Result::Success) {
elm_init(argc, argv);
Elm_Transit *transit = elm_transit_add();
if (tvgEngine == tvg::CanvasEngine::Sw) {
auto view = createSwView();
elm_transit_effect_add(transit, transitSwCb, view, nullptr);
} else {
auto view = createGlView();
elm_transit_effect_add(transit, transitGlCb, view, nullptr);
}
elm_transit_duration_set(transit, 5);
elm_transit_repeat_times_set(transit, -1);
elm_transit_auto_reverse_set(transit, EINA_TRUE);
elm_transit_go(transit);
elm_run();
elm_shutdown();
//Terminate ThorVG Engine
tvg::Initializer::term(tvgEngine);
} else {
cout << "engine is not supported" << endl;
}
return 0;
}

View file

@ -5,8 +5,8 @@
/* Drawing Commands */ /* Drawing Commands */
/************************************************************************/ /************************************************************************/
#define NUM_PER_LINE 4 #define NUM_PER_LINE 5
#define SIZE 200 #define SIZE 160
static int count = 0; static int count = 0;

198
src/examples/images/bones.svg Executable file
View file

@ -0,0 +1,198 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="595px" height="842px" viewBox="0 0 595 842" xml:space="preserve">
<g>
<path fill="#323239" d="M193,677c0-8.28,47.68-15,106.5-15S406,668.72,406,677
s-47.68,15-106.5,15S193,685.28,193,677z"/>
<path fill="#52FFFF" opacity=".8" d="M250.5,274c1.75,3.5,3.88,0,3.88,0s2,4.12,6,0
c4.24,3.88,6.87,0,6.87,0c4.63,4,7.25,0,7.25,0c3.88,3.75,5.75,0,5.75,0c1.87,3.88,3.75,0,3.75,0c2,6,0.75,9.08-17.25,8.75
C249.75,282.75,248.12,277.62,250.5,274z"/>
<path fill="#52FFFF" opacity=".8" d="M259,294c2.38-3,7.5-1.25,9.25,1.75
C266.67,299,258.67,300.33,259,294z"/>
<path fill="#52FFFF" opacity=".8" d="M260,286c2.38-3,6.5-2.25,8.25,0.75
C266.67,290,259.67,292.33,260,286z"/>
<path fill="#52FFFF" opacity=".8" d="M259,304c-0.25-4.12,6.62-2.12,8.25,1.75
C267.62,307.38,259.5,311.5,259,304z"/>
<path fill="#52FFFF" opacity=".8" d="M216.67,339.83c-3.4-0.97-1.67-5.83-5.17-2.16
c-1.83,4,1.83,5.75,2.5,9.08c-2.17,13.08-4.75,27.75-3.22,47.96c-1.11,2.96-6.5,0.73-7.01,6c-0.65,6.54,2.4,2.79,7.56,4.46
c3.29,1.33,1.92,3.08,6.68,0.72c2.11-7.64-3.76-6.89-3.76-9.64c-4.25-18.37,2.25-38.75,5.08-48.75c0.5-4,3.84,1.67,5.5-5.33
C225.5,337.5,221.5,341.21,216.67,339.83z"/>
<path fill="#52FFFF" opacity=".8" d="M304,342c3.62-1.38,5.38-7.88,6,0c-0.38,3.25-4,5-4,5
c3.88,15.88,6,40,6,40c-0.38,3.5,5.5,0.75,5,7c-1.62,3.5-1.25,0-5,0c-5.25,0-7.88,3.88-8-1c0.5-5.62,4.75-1.75,5-5
c0.5-6.75-1.25-24.25-5-39c-2.88-2.12-7.38,0.25-6-6C299.62,337.88,300.5,343.38,304,342z"/>
<path fill="#52FFFF" opacity=".8" d="M273.75,310.5C273.5,317.25,301,325.67,306,325
C304.75,317.25,278.5,313.5,273.75,310.5z"/>
<path fill="#52FFFF" opacity=".8" d="M250.25,310.25c0,7.5-32.25,17-31.5,15.5
C220.25,319.75,239.5,315.25,250.25,310.25z"/>
<path fill="#52FFFF" opacity=".8" d="M211.25,412.31c-1.37,2.25-5.63-1.19-5.75,2.44
c0.5,3.81,3.06,4.75,3.06,4.75s-0.37,14.19,0.69,23.5c0.13,3.62-4,4.62-1.75,7.75c1.62,1.69,2.69-3,5.88-2.69
c1.68,0.25,3,0.38,3.56-1.68c-0.44-3.44-3.25-1.5-4.19-3.5c-1.25-6.88-1.56-23.26-1.56-23.26c1.87-1,5.81-3.37,3.81-6.62
C212.75,406.5,212.75,411.06,211.25,412.31z"/>
<path fill="#52FFFF" opacity=".8" d="M313.22,404.31c-2.34,2.13-6.47-4.81-6.47,4.63
c0.28,2.72,3.92,2.06,3.92,2.06s2.71,11.81,1.77,32.69c-0.34,3-5.27,2.31-4.11,6.98c2.61,1.52,2.36-1.05,5.17-1.34
c6.5-0.5,4.5,0.34,4.5-3.16c-0.31-2.79-2.83-2.5-2.83-2.5c1.64-10.11-0.67-33.67-0.67-33.67c0.53-0.25,4.83,0.96,3.38-3.75
C316.71,402.08,314.44,403,313.22,404.31z"/>
<path fill="#52FFFF" opacity=".8" d="M214,451c0,0-9.5,2-6,26c7.5,0,14-5,14-5C221,465,214,451,214,451
z"/>
<path fill="#52FFFF" opacity=".8" d="M243.5,482.33c5.67,0.84,7.83-0.83,7.5,4.67c0.17,4-6,3-6,3
c-2.83,6.5-2,41-2,41c-0.5,5,9,2.5,8.67,7.17c-1.67,6.66-6,1.83-10.67,1c-5-0.84-6.17,7.83-10-3.17c-1.67-5,5-4,5-4s2.33-33,5-43
c-3.5-0.83-9.83-6.17-5-12C239.67,475.83,239.83,481.33,243.5,482.33z"/>
<path fill="#52FFFF" opacity=".8" d="M291,481c3.75-1.75,5.58-9,8.83-5c4,7.5-3.83,10-3.83,10
c4.75,16.25,9,43,9,43c0,5.25,6.5,3,6,9.5c-0.67,2.5-7,0.5-7,0.5s-9.67,6-10,3c-1.25-12.25,3.75-3.5,4-11c-0.25-21-8-42-8-42
s-6,3.5-6-3C283.5,480.75,286,482.5,291,481z"/>
<path fill="#52FFFF" opacity=".8" d="M306,549c6.5,0,9.33-7,9,3c0.5,5.5-5,3-5,3c1.25,11.5,2,45,2,45
l-4,1c0,0-1.25-31.25-4.75-44c-3.5-2.25-7,2.5-8.25-4C295,546.25,299.25,548.5,306,549z"/>
<path fill="#52FFFF" opacity=".8" d="M242,549c3.67,0,10.17-8.33,11,2c-0.5,3.83-6,4-6,4
c-6,14.5-2,46-2,46h-3c0,0-5-29.33-2-45c0.28-1.48-7.67,3-8-3C231.17,541.83,235.83,550.17,242,549z"/>
<path fill-rule="evenodd" fill="#52FFFF" opacity=".8" d="M290,260c1-11.75,17.5-2,18-14c0.5-13.75,9-5.5,9-27
c0.5-54.25-48-58-48-58s-46.5-0.75-49,52c-0.5,19.25,8.5,24,7,34c-0.75,13.75,14.25-2,16,9c-1.25,4.25,1.29,2.02,4.87,2.03
c1.25-1.91,1.7,0.01,2.63,0.01c1.32,0,2.38-2.04,4.25,0.01c1.79,0,3.37-2.43,5.63-0.01c4.87-2.29,4.4-0.02,6.62-0.03
c4.12-1.63,4.74-0.04,7-0.08c2.03-0.03,3.5-2.18,5.75-0.11c2.25-1.57,3.46-0.1,4.88-0.17C287.92,257.5,290,260.29,290,260z
M267,235c-4,0.25-8.25,16.5-4,14c4.25-1.5,5.5-3.75,12,0C278.75,251.75,274.25,236,267,235z M273,222c-0.75-24.5,30-24.25,31,3
C303.5,244.25,274.25,235.25,273,222z M231,213c-6.5,23.5,28,28.5,31,4C263.75,195.5,234,203.75,231,213z"/>
<path fill="#52FFFF" opacity=".8" d="M263,266c2.54,0.76,3-0.12,3-0.12s1.75-6.76-1-6.88
C260.88,259,260.5,265.25,263,266z"/>
<path fill="#52FFFF" opacity=".8" d="M271.84,266c-2.54,0.76-3-0.12-3-0.12s-1.75-6.76,1-6.88
C273.97,259,274.34,265.25,271.84,266z"/>
<path fill="#52FFFF" opacity=".8" d="M277.84,265c-2.5,0.89-3.75-5.88-1-6
C279.62,259.25,279.25,264.5,277.84,265z"/>
<path fill="#52FFFF" opacity=".8" d="M280.91,268.69c0.87-3.47-2.07-9.16,0.93-9.69
C284.25,260.5,283.75,264.5,280.91,268.69z"/>
<path fill="#52FFFF" opacity=".8" d="M286.72,262.66c-1.81-0.63-1.88-3.1-0.88-3.66
C288.12,258.88,287.95,263.08,286.72,262.66z"/>
<path fill="#52FFFF" opacity=".8" d="M255.61,266c2.2,1,3-0.12,3-0.12s1.75-6.76-1-6.88
C255.5,259.88,254.98,265.71,255.61,266z"/>
<path fill="#52FFFF" opacity=".8" d="M252.44,267.75c-0.1-4,2.47-7.19,0.17-8.75
C248.06,258.66,251.66,268.19,252.44,267.75z"/>
<path fill="#52FFFF" opacity=".8" d="M247.78,262.38c1.64-0.6,1.63-2.88,0.83-3.38
C246.33,258.88,246.55,262.82,247.78,262.38z"/>
<path fill="#52FFFF" opacity=".8" d="M263.27,269.25c2.54-0.52,2,0.08,2,0.08s1.92,3.61,0,3.67
C261.14,273,260.76,269.76,263.27,269.25z"/>
<path fill="#52FFFF" opacity=".8" d="M272.12,269.25c-1.43-0.5-3,0.08-3,0.08s-0.93,3.79,1,3.67
C272.94,273,273.09,269.58,272.12,269.25z"/>
<path fill="#52FFFF" opacity=".8" d="M278.31,270.25c-2.5-0.6-3.19,0.08-3.19,0.08
s-0.75,2.58,2.01,2.67C279.91,272.83,279.72,270.59,278.31,270.25z"/>
<path fill="#52FFFF" opacity=".8" d="M282.91,269.34c-1.97,0.32-2.37,3.23-0.78,3.66
C284.42,273.08,284.19,269.17,282.91,269.34z"/>
<path fill="#52FFFF" opacity=".8" d="M255.87,270.25c2.5-0.61,4.01,0.08,4.01,0.08s0.75,2.58-2.01,2.67
C255.09,272.83,254.46,270.59,255.87,270.25z"/>
<path fill="#52FFFF" opacity=".8" d="M252.12,269.28c1.85,0.28,2.34,3.29,0.75,3.72
C250.58,273.08,250.84,269.11,252.12,269.28z"/>
<path fill="#52FFFF" opacity=".8" d="M242,543c-4.5-0.83-9,2.17-3,3S246.4,543.81,242,543z"/>
<path fill="#52FFFF" opacity=".8" d="M306,543c-4,1.25-8.5,2.75-2,3S310,541.75,306,543z"/>
<path fill="#52FFFF" opacity=".8" d="M306.44,458.25c-2.27,6.35-0.69,8.75,1.44,10.13
C310,469.75,308.38,452.81,306.44,458.25z"/>
<path fill="#52FFFF" opacity=".8" d="M317.69,474c3.06,1.19,3,6.19,1.31,6S315.03,472.97,317.69,474z"
/>
<path fill="#52FFFF" opacity=".8" d="M320.62,481.56c2,1,2.5,4.5,0.82,4.32
C319.75,485.69,318.07,480.29,320.62,481.56z"/>
<path fill="#52FFFF" opacity=".8" d="M322.62,487.56c1.5,1.06,1.01,2.88,0.5,3.06
C322.44,490.88,321.64,486.87,322.62,487.56z"/>
<path fill="#52FFFF" opacity=".8" d="M323.69,474c3.06,1.19,3,6.19,1.31,6S321.03,472.97,323.69,474z"
/>
<path fill="#52FFFF" opacity=".8" d="M326.62,481.56c2,1,2.5,4.5,0.82,4.32
C325.75,485.69,324.07,480.29,326.62,481.56z"/>
<path fill="#52FFFF" opacity=".8" d="M326.62,487.56c1.5,1.06,1.01,2.88,0.5,3.06
C326.44,490.88,325.64,486.87,326.62,487.56z"/>
<path fill="#52FFFF" opacity=".8" d="M309,453c0,0,7.5-0.67,12.17,6.83c3,7.84,3.5,11.67,3.5,11.67
c-3,1.17-11.5-0.17-11.5-0.17C312.5,461,307.83,457.5,309,453z M315,462c-1.38,0.88,0.12,7.12,1,7
C317.12,468.88,316,461.88,315,462z M319,462c-1.38,0.88,0.12,5.12,1,5C321.12,466.88,320,461.88,319,462z"/>
<path fill="#52FFFF" opacity=".8" d="M309,477c-0.17,3.5-0.33,6.33,0,6s3.5,0.67,4-2
S309.17,473.5,309,477z"/>
<path fill="#52FFFF" opacity=".8" d="M307,470l4,1c0,0,0.33,2.5-2,2C307.83,473.33,307,470,307,470z"/>
<path fill="#52FFFF" opacity=".8" d="M208.91,408.36c-0.93-2.53-3-0.92-2.91,0
C206.5,413.33,209.55,410.08,208.91,408.36z"/>
<path fill="#52FFFF" opacity=".8" d="M313.93,399.34c-1.75-4.39-4.86-1.54-4.93,0
C308.9,401.75,314.72,401.34,313.93,399.34z"/>
<path fill="#52FFFF" opacity=".8" d="M209,479c2.38-0.59,2.06,4.69,1,5
C208.47,484.45,206.65,479.59,209,479z"/>
<path fill="#52FFFF" opacity=".8" d="M210,485c1.53-0.31,1.25,3.44,0.72,3.59
C209.19,489.04,208.2,485.37,210,485z"/>
<path fill="#52FFFF" opacity=".8" d="M211,490c1.53-0.31,1.25,3.43,0.72,3.59
C210.5,493.97,209.62,490.28,211,490z"/>
<path fill="#52FFFF" opacity=".8" d="M221.44,475c-1.53-0.31-1.25,3.43-0.72,3.59
C221.94,478.97,222.82,475.28,221.44,475z"/>
<path fill="#52FFFF" opacity=".8" d="M214,490c1.44-0.25,1.25,2.43,0.72,2.59
C213.5,492.97,213.08,490.16,214,490z"/>
<path fill="#52FFFF" opacity=".8" d="M217,477c1.81-0.56,2.44,4.69,1,5
C215.93,482.45,215.51,477.46,217,477z"/>
<path fill="#52FFFF" opacity=".8" d="M213,479c1.56-0.38,2.56,3.75,0.56,4
C211.75,483.23,211.78,479.29,213,479z"/>
<path fill="#52FFFF" opacity=".8" d="M214,485c1.38,0,1.88,4.25,0,4C212.38,488.78,212.44,485,214,485z
"/>
<path fill-rule="evenodd" fill="#52FFFF" opacity=".8" d="M266.75,442.5C288,443,294,423,302,448c5.25,20.5-6.5,15.33-16,14
c4.25,3.5,9.25,13-1,16c-17,2.5-17-10-17-10s-8.75,11.5-20,9c-9.25-1.75,7-16,7-16s-29.5,16-27-2
C232.5,422.5,246.25,442.5,266.75,442.5z M258.5,467.17c-7.33,1.5-12.67,4.5-6,6.66C258.17,475.68,265.83,465.67,258.5,467.17z
M276,467c8.5-1.5,13.87,4.63,10,7C280.83,477.17,266.64,468.65,276,467z"/>
<path fill="#52FFFF" opacity=".8" d="M255,341.33c4.77,2.03-6.85,12.3-18.5,15.67
c-8.49,2.45-13.33-4.17-13.5-7c1.17-2.17,5.29,5.02,14.25,2.25C246.49,349.39,253.35,340.63,255,341.33z"/>
<path fill="#52FFFF" opacity=".8" d="M253.33,357.67c4.78,2.02-2.68,8.21-14.33,11.58
c-8.49,2.45-8.75-1.25-10.5-5.75c-1.11-1.97,1.75,2.25,10.75,1C248.83,363.17,251.68,356.97,253.33,357.67z"/>
<path fill="#52FFFF" opacity=".8" d="M253,371.33c4.77,2.03,2.26,5.33-9.25,9.17
c-5.25,1.75-8.5-1.78-9.75-4c-1.11-1.97,1.29,1.77,10.25-1C253.49,372.64,251.35,370.63,253,371.33z"/>
<path fill="#52FFFF" opacity=".8" d="M254,382c4.77,2.02,8.01,3.41-3.5,7.25
c-5.25,1.75-9.08-0.86-10.33-3.08c-1.11-1.97,4.33,1.08,8.33-0.42c7.54-2.83,5.19-4.03,5.15-3.95
C253.64,381.81,253.72,381.88,254,382z"/>
<path fill="#52FFFF" opacity=".8" d="M268.67,343.67c-4.78,2.02,3.81,9.96,15.46,13.33
c8.49,2.45,13.33-4.17,13.5-7c-1.17-2.17-5.29,5.02-14.25,2.25C274.14,349.39,270.32,342.97,268.67,343.67z"/>
<path fill="#52FFFF" opacity=".8" d="M269.67,357c-4.78,2.02,3.31,8.88,14.96,12.25
c8.49,2.45,8.75-1.25,10.5-5.75c1.11-1.97-1.75,2.25-10.75,1C274.8,363.17,271.32,356.3,269.67,357z"/>
<path fill="#52FFFF" opacity=".8" d="M271,372c-4.77,2.02-2.63,4.66,8.88,8.5
c5.25,1.75,8.5-1.78,9.75-4c1.11-1.97-1.29,1.77-10.25-1C270.14,372.64,272.65,371.3,271,372z"/>
<path fill="#52FFFF" opacity=".8" d="M270.33,382.67c-4.77,2.02-8.71,2.74,2.8,6.58
c5.25,1.75,9.08-0.86,10.33-3.08c1.11-1.97-4.33,1.08-8.33-0.42c-7.7-2.89-4.58-3.6-4.49-3.32
C270.66,382.48,270.58,382.56,270.33,382.67z"/>
<path fill="#52FFFF" opacity=".8" d="M230,340c0.75-3,24-9,24-9s-0.21,2.86-6,7
C241,343,227.86,348.57,230,340z"/>
<path fill="#52FFFF" opacity=".8" d="M251,322c-1.67,5-9.33,7.33-13,6
C233.69,326.43,253,316.01,251,322z"/>
<path fill="#52FFFF" opacity=".8" d="M233.03,329.94c0.75,2.25-3.31,4.59-4.06,2.5
C227.22,327.56,232.41,328.09,233.03,329.94z"/>
<path fill="#52FFFF" opacity=".8" d="M219.03,331.94c0.75,2.25-3.31,4.59-4.06,2.5
C213.22,329.56,218.41,330.09,219.03,331.94z"/>
<path fill="#52FFFF" opacity=".8" d="M224.94,333.86c0.5,1.45-2.2,2.97-2.7,1.61
C221.08,332.32,224.53,332.66,224.94,333.86z"/>
<path fill="#52FFFF" opacity=".8" d="M225.94,328.86c0.5,1.45-2.2,2.97-2.7,1.61
C222.08,327.32,225.53,327.66,225.94,328.86z"/>
<path fill="#52FFFF" opacity=".8" d="M317.96,451.57c0.33,0.97-1.47,1.98-1.8,1.08
C315.38,450.55,317.69,450.77,317.96,451.57z"/>
<path fill="#52FFFF" opacity=".8" d="M305.03,334.94c0.75,2.25-3.31,4.59-4.06,2.5
C299.22,332.56,304.41,333.09,305.03,334.94z"/>
<path fill="#52FFFF" opacity=".8" d="M297.94,331.43c0.5,2.42-2.2,4.95-2.7,2.69
C294.08,328.87,297.53,329.44,297.94,331.43z"/>
<path fill="#52FFFF" opacity=".8" d="M271,332c-3,6.67,22.81,16.56,19.5,13.25
C287,341.75,272.6,328.44,271,332z"/>
<path fill="#52FFFF" opacity=".8" d="M278,323c0,1.67,9.5,15.25,12.33,11.67
C295.44,328.21,278,321.33,278,323z"/>
<path fill="#52FFFF" opacity=".8" d="M262,312c3.96-0.09,8.89,5.85,5.38,12.88
c-3,6,0.87,9.74-0.13,12.24c-4.75,7.26-1.5,12.63-2,16.63c-0.67,5.38-1.4,8.03-3.37,8c-2.4-0.04-3.96-5.84-4.13-10
c-0.69-3.95,6.84-6.37,0.37-15c-1.9-3.1,4.63-3.5-1.37-10.5C252.63,321.44,257.98,312.09,262,312z"/>
<path fill="#52FFFF" opacity=".8" d="M262,366.33c5.83-2.16,4.17,4.84,0,4.67S254.67,365,262,366.33z"
/>
<path fill="#52FFFF" opacity=".8" d="M263,376.33c4.33-1,1.15,4.1-0.33,3.84
C259.83,379.67,258.17,375.33,263,376.33z"/>
<path fill="#52FFFF" opacity=".8" d="M264,392.33c4.33-1,1.15,4.1-0.33,3.84
C260.83,395.67,259.17,391.33,264,392.33z"/>
<path fill="#52FFFF" opacity=".8" d="M264,400.33c4.33-1,1.15,4.1-0.33,3.84
C260.83,403.67,259.17,399.33,264,400.33z"/>
<path fill="#52FFFF" opacity=".8" d="M263.13,408.33c-4.34-1-1.16,4.1,0.33,3.84
C266.29,411.67,267.96,407.33,263.13,408.33z"/>
<path fill="#52FFFF" opacity=".8" d="M263.33,415.11c3.3-0.75,0.88,3.08-0.25,2.88
C260.92,417.62,259.65,414.36,263.33,415.11z"/>
<path fill="#52FFFF" opacity=".8" d="M262.67,423.11c-3.3-0.75-0.88,3.08,0.25,2.88
C265.08,425.62,266.35,422.36,262.67,423.11z"/>
<path fill="#52FFFF" opacity=".8" d="M264,431.33c4.33-1,1.15,4.1-0.33,3.84
C260.83,434.67,259.17,430.33,264,431.33z"/>
<path fill="#52FFFF" opacity=".8" d="M265,439.33c4.33-1,1.15,4.1-0.33,3.84
C261.83,442.67,260.17,438.33,265,439.33z"/>
<path fill="#0F0F19" d="M235,596l-3,1c0,0,2.67,9.5,2,14c0,0,2.94,14.97-3.39,29.83
c-0.18,0.07-0.39,0.12-0.61,0.17c-0.25,0.97-0.51,1.9-0.79,2.81c-0.38,0.73-0.78,1.46-1.21,2.19l0.58-0.25
c-4.27,12.61-10.84,19.92-11.51,31.88c-0.09,1.56,1.05,5.25,5.05,5.11c8.63,0.14,26.4,0.94,36.51,0.01
c4.12-0.37,3.73-2.98,3.83-4.37c1.35-18.65-6.37-25.35-8.46-33.38c-0.1-0.38-0.2-0.74-0.3-1.1l0.3,0.1c0,0-8.83-16.5-1-47l-4-2
L235,596z"/>
<path fill="#0F0F19" d="M396,670c-16.51-0.33-67.99-7.95-77.5-33.97
c0.33-0.02,0.5-0.03,0.5-0.03s-5.25-27,1-45l-5-1l-13,1l-5,2c0,0,5.63,48.57,5.94,48.36c0.28,7.58-2.57,12.87,0.06,39.64h25
c0,0,0.5-8.83,1-12c14.33,4.5,26.67,13.83,64,9C393,678,395.83,672,396,670z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 14 KiB

112
src/examples/images/human.svg Executable file
View file

@ -0,0 +1,112 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="595px" height="842px" viewBox="0 0 595 842" xml:space="preserve">
<g>
<path fill="#CFCFD1" d="M193,677c0-8.28,47.68-15,106.5-15S406,668.72,406,677
s-47.68,15-106.5,15S193,685.28,193,677z"/>
<path fill="#272730" d="M271,162h-3c0,0,0.95-5-3-5c-15.62,0-44,20.16-49,36.98
c-3.92,13.2-2.82,34.17-1.76,49.68c-0.62,5.93-3.74,8.68-10.24,12.3c5.5-1.12,6.88-1.37,10.88-6.05l0.12,5.05
c0.83,14.66-4.17,19.83-4,32.99c0.17,13.16,8.83,16.99,9,23.99s-6,120.96-6,120.96c47,15.99,111.17,1.41,114,2
c-11-35.99,0.88-39.24-2.75-76.04c4.26,3.69,2.44,7.75,7,7.44c-5.5-6.13,1.13-1-6.45-16.11c-0.01-2.65,0.05-4.79,0.2-6.26
c1.5-14.33,5.38-10.67,6-30.99c0.56-18.31-3.5-16.99-5-31.99c-0.27-2.7,0.27-11.72,0.62-15.62c0.88,4.63,2.5,6,7,9.12
c-4.37-5.62-4-6.87-6.05-15.68c1.97-17.47,3.91-40.77-4.57-64.79c-1.61-4.57-3.52-8.6-5.64-12.16c2.2-4.58,1.26-4.14,1.26-7.7
c0,0-1.06,3.93-2.81,3.75c-0.75-0.69-1.57-1.29-3.7-3.51c-10.1-12.15-24.63-16.56-32.59-17.94c-0.68-0.23-0.52-0.2-1.33-0.48
c0.72-2.35,5.81-4.94,5.81-4.94s-5.01,0.38-7.71,4.87c-1.07-0.02-1.86,0.03-2.29,0.13C271.17,156.83,271,162,271,162z"/>
<polygon points="295.17,337.76 293.83,394.41 299.67,373.92 309.83,388.58 "/>
<polygon points="223.67,349.43 217,386.91 225.33,370.42 229,394.91 229,353.93 "/>
<path d="M320,227.97c-6.25,54.98-36.75,64.98-41,65.98c-0.25,3,0,11.99,0,11.99l-29-2
v-11.99c-3.5-0.75-28-11.5-33-69.98C230.25,219.22,321.88,211.21,320,227.97z"/>
<path fill="#3D3D45" d="M262.38,164.12c-0.38,13.87-24.13,13.5-32.38,17.87
C242,169.99,250,163.25,262.38,164.12z"/>
<path fill="#3D3D45" d="M282,164c9-1.75,18.25,13.87,17,13.99
C296.38,169.37,271.38,167.12,282,164z"/>
<path fill="#C7BBAF" d="M252,283.95c0,0,3.67,10.66-1,16c-2,2.6-5.78,5.78-10.23,9.03
c-11.97,8.73,47.47,9.7,41.73,2.66c-3.94-4.83-6.5-8.7-6.5-8.7l-1-16.99L252,283.95z"/>
<path fill="#C7BBAF" d="M296.5,342.68c12.25,47.98,11.5,62.56,11.5,109.21
c-3.08,7.62-3.17,14.83-0.33,21.32c3,6.9-0.5,11.17,3.33,9.67c4.83-1.5-1.82-13.79,1.5-12.33c5.99,2.63,7.19,19.76,10.89,20.59
c0.92,0.48,2.55-0.52,3.48-0.31c0.44,1.42,0.82,2.36,2.13,2.04c-2-24.65-6.75-23.74-11.34-40.01
c3.01-48.62-8.91-108.68-12.91-122.93c-2.08-5.66-1.25-12.99-8.75-12.16C290.93,320.37,296.5,342.68,296.5,342.68z"/>
<path fill="#C7BBAF" d="M225.43,346.54c-7.42,49.64-12.1,61.03-7.81,108.1
c3.84,7.19,4.66,14.25,2.5,20.89c-2.28,7.03,1.63,10.85-2.32,9.77c-4.95-0.99,1.15,8.1-2.43,9.28c-0.86,0.55-2.58-0.26-3.48,0.04
c-0.29,1.42-0.56,2.37-1.9,2.19c-1.31-28.72-5.74-17.68-1.89-40.26c-6.77-55.64,5.09-107.27,7.65-122.18
C228.81,329.36,225.43,346.54,225.43,346.54z"/>
<path fill="#9F968C" d="M253,288.95v4c10.17,5.66,22,1,22,1v-4L253,288.95z"/>
<path fill="#9F968C" d="M301,360.92c0.51-0.08,10-2,10-2l-0.25-7.24l-11.25,3.12
C299.5,354.8,300.25,361.05,301,360.92z"/>
<polygon fill="#9F968C" points="210,364.92 222,368.92 223.38,361.17 211.12,357.55 "/>
<path fill="#9F968C" d="M215,469.88c-2.17,0.84,1,16,1,16S217.63,468.87,215,469.88z"/>
<path fill="#C7BBAF" d="M271,161h-3c-0.12,0,0.21,4.25-0.17,9.34
c-0.41,5.26-1.58,11.4-4.83,14.65c-20.5,14.66-32,5.5-43,25.99c-6.25-1-9.5,0.5-10,5c0,9.49,11,7.99,11,7.99s4.75,67.98,44,67.98
c43.12,0,51-61.98,51-61.98s10.12,1.63,10-7c-0.12-8.62-12-4-12-4s2.5-15.49-26-31.98c-8.17-4.67-17.55-5.95-17.43-16.45
C270.62,165.62,271,161,271,161z"/>
<path fill="#9F968C" d="M252,219.97c0.12,6.25-2.12,10.25-8.25,9.25
c-13.25-2.87-5.75-8.25-5.75-8.25S252.67,214.48,252,219.97z"/>
<path fill="#9F968C" d="M280.91,222.97c-0.13,6.25,2.12,10.25,8.25,9.25
c13.25-2.87,5.75-8.25,5.75-8.25S280.24,217.48,280.91,222.97z"/>
<path fill="#272730" d="M295,222.47c0-3.58-2.91-6.49-6.5-6.49s-6.5,2.91-6.5,6.49
c0,3.59,2.91,6.5,6.5,6.5S295,226.06,295,222.47z"/>
<path fill="#272730" d="M251,219.47c0-3.58-2.91-6.49-6.5-6.49s-6.5,2.91-6.5,6.49
c0,3.59,2.91,6.5,6.5,6.5S251,223.06,251,219.47z"/>
<path fill="#9F968C" d="M267,243.97c-3.31,0-7.88-5.44-5-5c6.5,2.12,3.38,2.12,10,0
C274.44,238.28,271,243.97,267,243.97z"/>
<path fill="#272730" d="M265.95,258.96c3.46,0,10.31,5.37,7.31,4.94
c-5.29-0.8-10.95-2-14.63-2C257.25,261.9,261.77,258.96,265.95,258.96z"/>
<path fill="#272730" d="M285,199.98c11.17,1.17,21,11,21,11c-6.2-13.37-19.09-18-19.09-18
S282,195.48,285,199.98z"/>
<path fill="#272730" d="M252.54,199.48c-10.75,0.22-23.54,7.5-23.54,7.5
c10.05-12.31,22.74-13.98,22.74-13.98S255.33,194.98,252.54,199.48z"/>
<path fill="#9F968C" d="M322,224.97c0.74-4.06-5-3-5-3S321.5,227.72,322,224.97z"/>
<path fill="#9F968C" d="M214.07,218.97c-0.74-4.06,5-2.99,5-2.99
S214.57,221.72,214.07,218.97z"/>
<path fill="#0F0F19" d="M396,669.81c-0.17,2-3,8-3,8c-37.33,4.83-49.67-4.5-64-9
c-0.5,3.16-1,11.99-1,11.99h-25c-3-30.48,1.12-33.11-0.38-42.98c4.13-2.25,13.21-3.36,15.38-3.5
C326,661.56,379.17,669.48,396,669.81z"/>
<path fill="#0F0F19" d="M254,644.82c2.09,8.02,9.81,14.72,8.46,33.36
c-0.1,1.4,0.29,4-3.83,4.38c-10.11,0.93-27.88,0.12-36.51-0.01c-4,0.13-5.14-3.56-5.05-5.11c0.75-13.39,8.9-20.94,12.93-36.62
c3-0.63,2.16-3,3.18-4.29C238.46,629.81,249.6,627.74,254,644.82z"/>
<path fill="#3F3F47" d="M231,444.89c-0.25,0.5,68-2,68-2l16,146.95l5,1
c-6.25,17.99-1,44.98-1,44.98s-8.75,0.25-17,6c2.62-20.37-5-48.98-5-48.98l5-2l-18-108.96c-20.25-1.5-31,6-31,6l-4,106.96l4,2
c-7.83,30.48,1,46.98,1,46.98s-11.75-4.25-26,2c9.67-16.33,6-34.99,6-34.99c0.67-4.5-2-13.99-2-13.99l3-1
C235,595.84,231.25,444.39,231,444.89z"/>
<path fill="#323239" d="M243,493.87c3.06-3.5,10-6.62,10-6.62v3.62
C251.44,489.81,248.44,490.87,243,493.87z"/>
<path fill="#323239" d="M284,481.88l1,4c0,0,3.94-2.19,15-1
C291.56,481.75,284,481.88,284,481.88z"/>
<path fill="#323239" d="M231,444.89c-0.25,0.5,68-2,68-2l1.88,17.31
c0,0-42.38,0.44-69.03,12.34C231.4,456.06,231.07,444.75,231,444.89z"/>
<polygon fill="#C7BBAF" points="300,516.87 304,515.87 302,518.86 306,519.86 302,521.86
300,521.86 297,522.86 297,520.86 293,519.86 297,518.86 "/>
<polygon fill="#9F968C" points="300,516.87 304,515.87 303.22,517.04 300.69,517.9
298.5,519.99 295.22,520.42 293,519.86 297,518.86 "/>
<path fill="#323239" d="M241.69,594.21c-4.31-0.87-6.69,0.63-6.69,0.63v2
C235,596.84,237.38,595.34,241.69,594.21z"/>
<path fill="#323239" d="M243.88,593.9c2.5-0.63,5.12-0.06,5.12-0.06v2
C249,595.84,247.06,594.52,243.88,593.9z"/>
<path fill="#323239" d="M302,590.84v-2c6.5-3,9.06-2.06,12.62-1c0.13,0.94,0.38,2,0.38,2
C305.38,588.84,302,590.84,302,590.84z"/>
<path fill="#3F3F47" d="M223,670.81c-2.01,2,34.67,2,34.67-0.33
C256.5,667.14,228,665.81,223,670.81z"/>
<path fill="#3F3F47" d="M246,302.94c14.67,15.83,34,3,34,3s6.91,5.03,18.99,11.04
c6.76,3.71,11.26,22.95,12.01,37.69c-7.5,1.75-15,3.25-15,3.25c0.67,24.66-4.67,35.16,5.83,98.13
c-63.66-1.66-71.83,12.83-71.83,12.83c2.67-18.32-1.5-98.63-2-103.96c-9.5,0.5-18.5-4.66-19-5c2-17.99,2.25-30.99,8.06-36.61
C223.75,318.44,240,308.94,246,302.94z"/>
<path fill="#323239" d="M246,302.94c14.67,15.83,34,3,34,3s0.79,0.81,2.38,2.13
c-3.82,7.37-26.26,15.55-39.47-2.32C244.05,304.79,245.1,303.84,246,302.94z"/>
<g>
<polygon fill="#CC3808" points="237.92,355.33 232,362.14 238.07,365.55 234.54,374.92
240.45,364.7 235.23,362.14 "/>
<polygon fill="#CC3808" points="244.68,355.33 242.14,366.4 248.9,369.81 244.52,365.55
"/>
<path fill="#CC3808" d="M248.06,366.4c0-0.96,4.22-14.47,4.22-14.47
s8.45,15.96,8.45,16.18c0,0.21-7.76-10.52-7.76-10.52S248.06,367.36,248.06,366.4z"/>
<polygon fill="#CC3808" points="257.35,355.33 257.59,355.64 264.27,363 260.73,374.07
270.87,356.18 265.8,360.44 "/>
<polygon fill="#CC3808" points="270.03,360.44 271.72,371.51 278.48,371.51
273.25,369.96 272.52,366.26 276.79,364.55 272,364.48 271.3,361.32 275.94,358.74 "/>
<path fill="#CC3808" d="M279.32,352.78v17.88l1.54-14.62l6.07,2.55l-4.23,5.26
c0,0,8.19,4.3,8.3,4.51c0.1,0.22-5.92-5.51-5.92-5.51l4.07-5.11L279.32,352.78z"/>
</g>
<path fill="#323239" d="M257,429.9c-4.08-1.19,26-12,26-12S272.5,434.4,257,429.9z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.1 KiB

View file

@ -0,0 +1,13 @@
<svg version="1.1" id="Layer_1" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient x1="29%" y1="36%" x2="77%" y2="63%" id="linearGradient">
<stop stop-color="#0000FF" offset="0%"></stop>
<stop stop-color="#FF0000" offset="100%"></stop>
</linearGradient>
<mask id="myMask">
<circle id="maskID" cx="40" cy="40" r="10" fill="white" fill-opacity="1" />
</mask>
</defs>
<rect x="0" y="0" width="64" height="64" fill="url(#linearGradient)" mask="url(#myMask)"/>
</svg>

After

Width:  |  Height:  |  Size: 619 B

8
src/examples/images/mask.svg Executable file
View file

@ -0,0 +1,8 @@
<svg version="1.1" baseProfile="basic" id="svg" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="900px" height="900px"
viewBox="0 0 900 900" xml:space="preserve">
<mask id="myMask">
<circle id="maskID" cx="450" cy="450" r="200" fill="white" fill-opacity="1" />
</mask>
<rect x="0" y="0" width="900" height="900" fill="blue" mask="url(#myMask)"/>
</svg>

After

Width:  |  Height:  |  Size: 483 B

View file

@ -34,6 +34,7 @@ source_file = [
'ClipPath.cpp', 'ClipPath.cpp',
'Masking.cpp', 'Masking.cpp',
'InvMasking.cpp', 'InvMasking.cpp',
'AnimateMasking.cpp',
] ]
foreach current_file : source_file foreach current_file : source_file