Peter M. Groen / dali-demo

Commit acb0699992cbf6f0ec27b810665e1ca46a01a053

Authored by JunsuChoi
1 parent b6792215

CanvasView: Example improvement 

Add clip-path, mask exmaple view, gradient and picture example view.

Change-Id: I1f3e6239313b71f313381c4b691e35c636927d3d
Inline Side-by-side
Showing 1 changed file with 465 additions and 68 deletions
examples/canvas-view/canvas-view-example.cpp
  View file @acb0699
@@ -18,10 +18,77 @@ @@ -18,10 +18,77 @@
18 #include <dali-toolkit/dali-toolkit.h> 18 #include <dali-toolkit/dali-toolkit.h>
19 #include <dali-toolkit/devel-api/controls/canvas-view/canvas-view.h> 19 #include <dali-toolkit/devel-api/controls/canvas-view/canvas-view.h>
20 #include <dali/devel-api/adaptor-framework/canvas-renderer-drawable-group.h> 20 #include <dali/devel-api/adaptor-framework/canvas-renderer-drawable-group.h>
  21 +#include <dali/devel-api/adaptor-framework/canvas-renderer-gradient.h>
  22 +#include <dali/devel-api/adaptor-framework/canvas-renderer-linear-gradient.h>
  23 +#include <dali/devel-api/adaptor-framework/canvas-renderer-picture.h>
  24 +#include <dali/devel-api/adaptor-framework/canvas-renderer-radial-gradient.h>
21 #include <dali/devel-api/adaptor-framework/canvas-renderer-shape.h> 25 #include <dali/devel-api/adaptor-framework/canvas-renderer-shape.h>
22 26
23 using namespace Dali; 27 using namespace Dali;
24 28
  29 +namespace
  30 +{
  31 +const char* VIEW_LABEL[] = {
  32 + "BasicShapes",
  33 + "ClipPath/Mask",
  34 + "Gradient",
  35 + "Picture"};
  36 +
  37 +enum
  38 +{
  39 + BASIC_SHAPE_VIEW = 0,
  40 + CLIP_PATH_VIEW,
  41 + GRADIENT_VIEW,
  42 + PICTURE_VIEW,
  43 + NUMBER_OF_VIEWS
  44 +};
  45 +
  46 +const char* PREV_BUTTON_TEXT("Prev");
  47 +const char* LEFT_BUTTON_TEXT("Next");
  48 +
  49 +const char* IMAGES[] =
  50 + {
  51 + DEMO_IMAGE_DIR "Kid1.svg",
  52 +};
  53 +
  54 +const float COMMON_STROKE_DASH_PATTERN[] = {15.0f, 30.0f};
  55 +
  56 +/**
  57 + * @brief Create shape that have star path.
  58 + */
  59 +Dali::CanvasRenderer::Shape MakeStarShape()
  60 +{
  61 + Dali::CanvasRenderer::Shape star = Dali::CanvasRenderer::Shape::New();
  62 + star.AddMoveTo(Vector2(-1.0f, -165.0f));
  63 + star.AddLineTo(Vector2(53.0f, -56.0f));
  64 + star.AddLineTo(Vector2(174.0f, -39.0f));
  65 + star.AddLineTo(Vector2(87.0f, 45.0f));
  66 + star.AddLineTo(Vector2(107.0f, 166.0f));
  67 + star.AddLineTo(Vector2(-1.0f, 110.0f));
  68 + star.AddLineTo(Vector2(-103.0f, 166.0f));
  69 + star.AddLineTo(Vector2(-88.0f, 46.0f));
  70 + star.AddLineTo(Vector2(-174.0f, -38.0f));
  71 + star.AddLineTo(Vector2(-54.0f, -56.0f));
  72 + star.Close();
  73 + return star;
  74 +}
  75 +
  76 +/**
  77 + * @brief Create shape that have star path.
  78 + */
  79 +Dali::CanvasRenderer::Shape MakeStar2Shape()
  80 +{
  81 + Dali::CanvasRenderer::Shape star = Dali::CanvasRenderer::Shape::New();
  82 + star.AddMoveTo(Vector2(535.0f, 135.0f));
  83 + star.AddLineTo(Vector2(660.0f, 455.0f));
  84 + star.AddLineTo(Vector2(355.0f, 250.0f));
  85 + star.AddLineTo(Vector2(715.0f, 250.0f));
  86 + star.AddLineTo(Vector2(410.0f, 455.0f));
  87 + star.Close();
  88 + return star;
  89 +}
  90 +
  91 +} // namespace
25 /** 92 /**
26 * @brief This demonstrates how to display and control vector primitives using CanvasView. 93 * @brief This demonstrates how to display and control vector primitives using CanvasView.
27 * 94 *
@@ -38,11 +105,14 @@ public: @@ -38,11 +105,14 @@ public:
38 */ 105 */
39 CanvasViewController(Application& application) 106 CanvasViewController(Application& application)
40 : mApplication(application), 107 : mApplication(application),
  108 + mCanvasView(),
41 mRoundedRect(), 109 mRoundedRect(),
42 mArc(), 110 mArc(),
43 mStar(), 111 mStar(),
44 mTimer(), 112 mTimer(),
45 - mCount(0) 113 + mCount(0),
  114 + mViewCount(BASIC_SHAPE_VIEW),
  115 + mLinearGradient()
46 { 116 {
47 // Connect to the Application's Init signal 117 // Connect to the Application's Init signal
48 mApplication.InitSignal().Connect(this, &CanvasViewController::Create); 118 mApplication.InitSignal().Connect(this, &CanvasViewController::Create);
@@ -50,21 +120,19 @@ public: @@ -50,21 +120,19 @@ public:
50 120
51 ~CanvasViewController() = default; 121 ~CanvasViewController() = default;
52 122
53 - void Create(Application& application) 123 + /**
  124 + * @brief Create a view for basic shape example.
  125 + */
  126 + void CreateBasicShape()
54 { 127 {
55 - // The Init signal is received once (only) during the Application lifetime  
56 - Window window = application.GetWindow(); 128 + Window window = mApplication.GetWindow();
57 Vector2 windowSize = window.GetSize(); 129 Vector2 windowSize = window.GetSize();
58 - window.KeyEventSignal().Connect(this, &CanvasViewController::OnKeyEvent);  
59 130
60 - Toolkit::CanvasView mCanvasView = Toolkit::CanvasView::New(windowSize);  
61 - mCanvasView.SetProperty(Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER);  
62 - mCanvasView.SetProperty(Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER);  
63 - mCanvasView.SetProperty(Actor::Property::SIZE, windowSize); 131 + mTitle.SetProperty(Dali::Toolkit::TextLabel::Property::TEXT, VIEW_LABEL[BASIC_SHAPE_VIEW]);
64 132
65 Dali::CanvasRenderer::Shape canvasBackground = Dali::CanvasRenderer::Shape::New(); 133 Dali::CanvasRenderer::Shape canvasBackground = Dali::CanvasRenderer::Shape::New();
66 canvasBackground.AddRect(Rect<float>(0.0f, 0.0f, windowSize.width, windowSize.height), Vector2::ZERO); 134 canvasBackground.AddRect(Rect<float>(0.0f, 0.0f, windowSize.width, windowSize.height), Vector2::ZERO);
67 - canvasBackground.SetFillColor(Vector4(1.0f, 1.0f, 1.0f, 1.0f)); 135 + canvasBackground.SetFillColor(Color::WHITE);
68 mCanvasView.AddDrawable(canvasBackground); 136 mCanvasView.AddDrawable(canvasBackground);
69 137
70 Dali::CanvasRenderer::Shape shape1 = Dali::CanvasRenderer::Shape::New(); 138 Dali::CanvasRenderer::Shape shape1 = Dali::CanvasRenderer::Shape::New();
@@ -74,65 +142,46 @@ public: @@ -74,65 +142,46 @@ public:
74 shape1.SetStrokeWidth(10.0f); 142 shape1.SetStrokeWidth(10.0f);
75 shape1.Scale(1.2f); 143 shape1.Scale(1.2f);
76 shape1.Rotate(Degree(45.0f)); 144 shape1.Rotate(Degree(45.0f));
77 - shape1.Translate(Vector2(100.0f, 100.0f)); 145 + shape1.Translate(Vector2(100.0f, 200.0f));
78 146
79 mRoundedRect = Dali::CanvasRenderer::Shape::New(); 147 mRoundedRect = Dali::CanvasRenderer::Shape::New();
80 mRoundedRect.AddRect(Rect<float>(10.0f, 350.0f, 200.0f, 140.0f), Vector2(40.0f, 40.0f)); 148 mRoundedRect.AddRect(Rect<float>(10.0f, 350.0f, 200.0f, 140.0f), Vector2(40.0f, 40.0f));
81 - mRoundedRect.SetFillColor(Vector4(0.0f, 0.0f, 1.0f, 1.0f));  
82 - mRoundedRect.SetOpacity(0.5f);  
83 - mRoundedRect.SetStrokeColor(Vector4(1.0f, 1.0f, 0.0f, 1.0f)); 149 + mRoundedRect.SetFillColor(Color::BLUE);
  150 + mRoundedRect.SetStrokeColor(Color::YELLOW);
84 mRoundedRect.SetStrokeWidth(10.0f); 151 mRoundedRect.SetStrokeWidth(10.0f);
85 mRoundedRect.SetStrokeJoin(Dali::CanvasRenderer::Shape::StrokeJoin::MITER); 152 mRoundedRect.SetStrokeJoin(Dali::CanvasRenderer::Shape::StrokeJoin::MITER);
  153 + mRoundedRect.SetOpacity(0.5f);
86 Dali::Vector<float> dashPattern; 154 Dali::Vector<float> dashPattern;
87 - dashPattern.PushBack(15.0f);  
88 - dashPattern.PushBack(30.0f); 155 + for(auto& pattern : COMMON_STROKE_DASH_PATTERN)
  156 + {
  157 + dashPattern.PushBack(pattern);
  158 + }
89 mRoundedRect.SetStrokeDash(dashPattern); 159 mRoundedRect.SetStrokeDash(dashPattern);
90 160
91 - Dali::CanvasRenderer::Shape shape2 = Dali::CanvasRenderer::Shape::New();  
92 - shape2.AddMoveTo(Vector2(535.0f, 135.0f));  
93 - shape2.AddLineTo(Vector2(660.0f, 455.0f));  
94 - shape2.AddLineTo(Vector2(355.0f, 250.0f));  
95 - shape2.AddLineTo(Vector2(715.0f, 250.0f));  
96 - shape2.AddLineTo(Vector2(410.0f, 455.0f));  
97 - shape2.Close();  
98 - shape2.SetFillRule(Dali::CanvasRenderer::Shape::FillRule::EVEN_ODD);  
99 - shape2.SetFillColor(Vector4(1.0f, 0.0f, 0.0f, 1.0f)); 161 + Dali::CanvasRenderer::Shape shape2 = MakeStar2Shape();
  162 + shape2.SetFillColor(Color::RED);
100 shape2.SetOpacity(0.5f); 163 shape2.SetOpacity(0.5f);
101 - shape2.SetStrokeColor(Vector4(1.0f, 0.0f, 1.0f, 1.0f));  
102 - shape2.SetStrokeWidth(20.0f); 164 + shape2.SetStrokeColor(Color::MAGENTA);
  165 + shape2.SetStrokeWidth(10.0f);
  166 + shape2.SetFillRule(Dali::CanvasRenderer::Shape::FillRule::EVEN_ODD);
103 shape2.SetStrokeJoin(Dali::CanvasRenderer::Shape::StrokeJoin::ROUND); 167 shape2.SetStrokeJoin(Dali::CanvasRenderer::Shape::StrokeJoin::ROUND);
104 - shape2.Transform(Matrix3(0.6f, 0.0f, 20.0f, 0.0f, 0.6f, -50.0f, 0.0f, 0.0f, 1.0f)); 168 + shape2.Transform(Matrix3(0.6f, 0.0f, 20.0f, 0.0f, 0.6f, 50.0f, 0.0f, 0.0f, 1.0f));
105 169
106 mArc = Dali::CanvasRenderer::Shape::New(); 170 mArc = Dali::CanvasRenderer::Shape::New();
107 mArc.AddArc(Vector2(100.0f, 650.0f), 80.0f, 10.0f, 0.0f, true); 171 mArc.AddArc(Vector2(100.0f, 650.0f), 80.0f, 10.0f, 0.0f, true);
108 mArc.AddArc(Vector2(100.0f, 650.0f), 80.0f, 10.0f, 0.0f, true); 172 mArc.AddArc(Vector2(100.0f, 650.0f), 80.0f, 10.0f, 0.0f, true);
109 mArc.SetOpacity(0.5f); 173 mArc.SetOpacity(0.5f);
110 - mArc.SetStrokeColor(Vector4(0.0f, 1.0f, 0.0f, 1.0f)); 174 + mArc.SetStrokeColor(Color::LIME);
111 mArc.SetStrokeWidth(10.0f); 175 mArc.SetStrokeWidth(10.0f);
112 mArc.SetStrokeCap(Dali::CanvasRenderer::Shape::StrokeCap::ROUND); 176 mArc.SetStrokeCap(Dali::CanvasRenderer::Shape::StrokeCap::ROUND);
113 mCanvasView.AddDrawable(mArc); 177 mCanvasView.AddDrawable(mArc);
114 178
115 - mStar = Dali::CanvasRenderer::Shape::New();  
116 - mStar.AddMoveTo(Vector2(-1.0f, -165.0f));  
117 - mStar.AddLineTo(Vector2(53.0f, -56.0f));  
118 - mStar.AddLineTo(Vector2(174.0f, -39.0f));  
119 - mStar.AddLineTo(Vector2(87.0f, 45.0f));  
120 - mStar.AddLineTo(Vector2(107.0f, 166.0f));  
121 - mStar.AddLineTo(Vector2(-1.0f, 110.0f));  
122 - mStar.AddLineTo(Vector2(-103.0f, 166.0f));  
123 - mStar.AddLineTo(Vector2(-88.0f, 46.0f));  
124 - mStar.AddLineTo(Vector2(-174.0f, -38.0f));  
125 - mStar.AddLineTo(Vector2(-54.0f, -56.0f));  
126 -  
127 - mStar.Close();  
128 -  
129 - mStar.SetFillColor(Vector4(0.0f, 1.0f, 1.0f, 1.0f));  
130 - mStar.SetStrokeColor(Vector4(0.5f, 1.0f, 0.5f, 1.0f)); 179 + mStar = MakeStarShape();
  180 + mStar.SetFillColor(Color::CYAN);
  181 + mStar.SetStrokeColor(Color::DARK_GRAY);
131 mStar.SetStrokeWidth(30.0f); 182 mStar.SetStrokeWidth(30.0f);
132 - mStar.SetStrokeCap(Dali::CanvasRenderer::Shape::StrokeCap::ROUND);  
133 mStar.Scale(0.6f); 183 mStar.Scale(0.6f);
134 - mStar.Translate(Vector2(350.0f, 450.0f));  
135 - mStar.SetOpacity(0.5f); 184 + mStar.Translate(Vector2(350.0f, 500.0f));
136 185
137 mCanvasView.AddDrawable(mStar); 186 mCanvasView.AddDrawable(mStar);
138 187
@@ -148,34 +197,357 @@ public: @@ -148,34 +197,357 @@ public:
148 197
149 mCanvasView.AddDrawable(mGroup2); 198 mCanvasView.AddDrawable(mGroup2);
150 199
151 - mTimer = Timer::New(1000.0f / 32.0f);  
152 - mTimer.TickSignal().Connect(this, &CanvasViewController::tick);  
153 mTimer.Start(); 200 mTimer.Start();
154 201
155 window.Add(mCanvasView); 202 window.Add(mCanvasView);
156 } 203 }
157 204
158 /** 205 /**
  206 + * @brief Create a view for clip-path and mask example.
  207 + */
  208 + void CreateClipPathAndMask()
  209 + {
  210 + Window window = mApplication.GetWindow();
  211 + Vector2 windowSize = window.GetSize();
  212 +
  213 + mTitle.SetProperty(Dali::Toolkit::TextLabel::Property::TEXT, VIEW_LABEL[CLIP_PATH_VIEW]);
  214 +
  215 + Dali::CanvasRenderer::Shape canvasBackground = Dali::CanvasRenderer::Shape::New();
  216 + canvasBackground.AddRect(Rect<float>(0.0f, 0.0f, windowSize.width, windowSize.height), Vector2::ZERO);
  217 + canvasBackground.SetFillColor(Color::WHITE);
  218 + mCanvasView.AddDrawable(canvasBackground);
  219 +
  220 + Dali::CanvasRenderer::Shape shape1 = Dali::CanvasRenderer::Shape::New();
  221 + shape1.AddRect(Rect<float>(-50.0f, -50.0f, 100.0f, 100.0f), Vector2::ZERO);
  222 + shape1.SetFillColor(Vector4(0.0f, 0.5f, 0.0f, 0.5f));
  223 + shape1.SetStrokeColor(Vector4(0.5f, 0.0f, 0.0f, 0.5f));
  224 + shape1.SetStrokeWidth(10.0f);
  225 + shape1.Scale(1.2f);
  226 + shape1.Rotate(Degree(45.0f));
  227 + shape1.Translate(Vector2(100.0f, 200.0f));
  228 +
  229 + Dali::CanvasRenderer::Shape shape2 = MakeStar2Shape();
  230 + shape2.SetFillRule(Dali::CanvasRenderer::Shape::FillRule::EVEN_ODD);
  231 + shape2.SetFillColor(Color::RED);
  232 + shape2.SetOpacity(0.5f);
  233 + shape2.SetStrokeColor(Color::MAGENTA);
  234 + shape2.SetStrokeWidth(10.0f);
  235 + shape2.SetStrokeJoin(Dali::CanvasRenderer::Shape::StrokeJoin::ROUND);
  236 + shape2.Transform(Matrix3(0.6f, 0.0f, 20.0f, 0.0f, 0.6f, 50.0f, 0.0f, 0.0f, 1.0f));
  237 +
  238 + mStar = MakeStarShape();
  239 + mStar.Scale(0.6f);
  240 + mStar.SetFillColor(Color::CYAN);
  241 + mStar.Translate(Vector2(240.0f, 240.0f));
  242 +
  243 + Dali::CanvasRenderer::DrawableGroup group1;
  244 + group1 = Dali::CanvasRenderer::DrawableGroup::New();
  245 + group1.AddDrawable(shape1);
  246 + group1.AddDrawable(shape2);
  247 + group1.SetClipPath(mStar);
  248 + mCanvasView.AddDrawable(group1);
  249 +
  250 + Dali::CanvasRenderer::Shape shape3 = Dali::CanvasRenderer::Shape::New();
  251 + shape3.AddRect(Rect<float>(140.0f, 500.0f, 200.0f, 140.0f), Vector2(40.0f, 40.0f));
  252 + shape3.SetFillColor(Color::BLUE);
  253 + shape3.SetOpacity(0.5f);
  254 + shape3.SetStrokeColor(Color::YELLOW);
  255 + shape3.SetStrokeWidth(10.0f);
  256 + shape3.SetStrokeJoin(Dali::CanvasRenderer::Shape::StrokeJoin::MITER);
  257 + Dali::Vector<float> dashPattern;
  258 + for(auto& pattern : COMMON_STROKE_DASH_PATTERN)
  259 + {
  260 + dashPattern.PushBack(pattern);
  261 + }
  262 + shape3.SetStrokeDash(dashPattern);
  263 +
  264 + mArc = Dali::CanvasRenderer::Shape::New();
  265 + mArc.AddArc(Vector2(240.0f, 550.0f), 100.0f, 10.0f, 0.0f, true);
  266 + mArc.AddArc(Vector2(240.0f, 550.0f), 100.0f, 10.0f, 0.0f, true);
  267 + mArc.SetOpacity(0.5f);
  268 + mArc.SetFillColor(Color::GREEN);
  269 +
  270 + shape3.SetMask(mArc, Dali::CanvasRenderer::Drawable::MaskType::ALPHA);
  271 + mCanvasView.AddDrawable(shape3);
  272 +
  273 + mTimer.Start();
  274 +
  275 + window.Add(mCanvasView);
  276 + }
  277 +
  278 + /**
  279 + * @brief Create a view for gradient example.
  280 + */
  281 + void CreateGradient()
  282 + {
  283 + Window window = mApplication.GetWindow();
  284 + Vector2 windowSize = window.GetSize();
  285 + mTitle.SetProperty(Dali::Toolkit::TextLabel::Property::TEXT, VIEW_LABEL[GRADIENT_VIEW]);
  286 +
  287 + Dali::CanvasRenderer::Shape canvasBackground = Dali::CanvasRenderer::Shape::New();
  288 + canvasBackground.AddRect(Rect<float>(0.0f, 0.0f, windowSize.width, windowSize.height), Vector2::ZERO);
  289 + canvasBackground.SetFillColor(Color::WHITE);
  290 + mCanvasView.AddDrawable(canvasBackground);
  291 +
  292 + Dali::Vector<float> dashPattern;
  293 + for(auto& pattern : COMMON_STROKE_DASH_PATTERN)
  294 + {
  295 + dashPattern.PushBack(pattern);
  296 + }
  297 +
  298 + Dali::Vector<Dali::CanvasRenderer::Gradient::ColorStop> radialGradientStops;
  299 + radialGradientStops.PushBack({0.0f, Color::LIGHT_SEA_GREEN});
  300 + radialGradientStops.PushBack({1.0f, Color::BLUE_VIOLET});
  301 +
  302 + Dali::CanvasRenderer::RadialGradient radialGradient = Dali::CanvasRenderer::RadialGradient::New();
  303 + radialGradient.SetBounds(Vector2(240, 170), 70);
  304 + radialGradient.SetColorStops(radialGradientStops);
  305 + radialGradient.SetSpread(Dali::CanvasRenderer::Gradient::Spread::REFLECT);
  306 +
  307 + Dali::CanvasRenderer::Shape roundedRect = Dali::CanvasRenderer::Shape::New();
  308 + roundedRect.AddRect(Rect<float>(50.0f, 100.0f, 380.0f, 140.0f), Vector2(40.0f, 40.0f));
  309 + roundedRect.SetStrokeColor(Color::YELLOW);
  310 + roundedRect.SetStrokeWidth(10.0f);
  311 + roundedRect.SetStrokeJoin(Dali::CanvasRenderer::Shape::StrokeJoin::MITER);
  312 + roundedRect.SetStrokeDash(dashPattern);
  313 + roundedRect.SetFillGradient(radialGradient);
  314 + mCanvasView.AddDrawable(roundedRect);
  315 +
  316 + Dali::CanvasRenderer::RadialGradient radialGradient2 = Dali::CanvasRenderer::RadialGradient::New();
  317 + radialGradient2.SetBounds(Vector2(240, 320), 70);
  318 + radialGradient2.SetColorStops(radialGradientStops);
  319 + radialGradient2.SetSpread(Dali::CanvasRenderer::Gradient::Spread::REPEAT);
  320 +
  321 + Dali::CanvasRenderer::Shape roundedRect2 = Dali::CanvasRenderer::Shape::New();
  322 + roundedRect2.AddRect(Rect<float>(50.0f, 250.0f, 380.0f, 140.0f), Vector2(40.0f, 40.0f));
  323 + roundedRect2.SetStrokeColor(Color::YELLOW);
  324 + roundedRect2.SetStrokeWidth(10.0f);
  325 + roundedRect2.SetStrokeJoin(Dali::CanvasRenderer::Shape::StrokeJoin::MITER);
  326 + roundedRect2.SetStrokeDash(dashPattern);
  327 + roundedRect2.SetFillGradient(radialGradient2);
  328 + mCanvasView.AddDrawable(roundedRect2);
  329 +
  330 + Dali::Vector<Dali::CanvasRenderer::Gradient::ColorStop> stops;
  331 + stops.PushBack({0.0f, Color::RED});
  332 + stops.PushBack({0.5f, Color::BLUE});
  333 + stops.PushBack({1.0f, Color::GREEN});
  334 +
  335 + mLinearGradient = Dali::CanvasRenderer::LinearGradient::New();
  336 + mLinearGradient.SetBounds(Vector2(-100, -100), Vector2(100, 100));
  337 + mLinearGradient.SetColorStops(stops);
  338 +
  339 + Dali::Vector<Dali::CanvasRenderer::Gradient::ColorStop> strokeLinearGradientStops;
  340 + strokeLinearGradientStops.PushBack({0.0f, Color::SLATE_BLUE});
  341 + strokeLinearGradientStops.PushBack({1.0f, Color::MAROON});
  342 +
  343 + Dali::CanvasRenderer::LinearGradient strokeLinearGradient = Dali::CanvasRenderer::LinearGradient::New();
  344 + strokeLinearGradient.SetBounds(Vector2(-100, -100), Vector2(100, 100));
  345 + strokeLinearGradient.SetColorStops(strokeLinearGradientStops);
  346 +
  347 + Dali::CanvasRenderer::Shape star = MakeStarShape();
  348 + star.SetStrokeWidth(30.0f);
  349 + star.SetStrokeCap(Dali::CanvasRenderer::Shape::StrokeCap::ROUND);
  350 + star.Translate(Vector2(240.0f, 600.0f));
  351 + star.SetFillGradient(mLinearGradient);
  352 + star.SetStrokeGradient(strokeLinearGradient);
  353 + mCanvasView.AddDrawable(star);
  354 +
  355 + window.Add(mCanvasView);
  356 +
  357 + mTimer.Start();
  358 + }
  359 +
  360 + /**
  361 + * @brief Create a view for picture example.
  362 + */
  363 + void CreatePicture()
  364 + {
  365 + Window window = mApplication.GetWindow();
  366 + Vector2 windowSize = window.GetSize();
  367 + mTitle.SetProperty(Dali::Toolkit::TextLabel::Property::TEXT, VIEW_LABEL[PICTURE_VIEW]);
  368 +
  369 + Dali::CanvasRenderer::Shape canvasBackground = Dali::CanvasRenderer::Shape::New();
  370 + canvasBackground.AddRect(Rect<float>(0.0f, 0.0f, windowSize.width, windowSize.height), Vector2::ZERO);
  371 + canvasBackground.SetFillColor(Color::WHITE);
  372 + mCanvasView.AddDrawable(canvasBackground);
  373 +
  374 + Dali::CanvasRenderer::Picture picture = Dali::CanvasRenderer::Picture::New();
  375 + picture.Load(IMAGES[0]);
  376 + picture.Translate(Vector2(100, 100));
  377 + picture.SetSize(Vector2(200, 200));
  378 + mCanvasView.AddDrawable(picture);
  379 +
  380 + window.Add(mCanvasView);
  381 + }
  382 +
  383 + /**
  384 + * @brief Clean up the specified number of view.
  385 + * @param[in] viewCnt The number of view.
  386 + */
  387 + void ResetView(int viewCnt)
  388 + {
  389 + Window window = mApplication.GetWindow();
  390 + mCanvasView.RemoveAllDrawables();
  391 + window.Remove(mCanvasView);
  392 + mTimer.Stop();
  393 + }
  394 +
  395 + /**
  396 + * @brief Change to the specified number of view.
  397 + * @param[in] viewCnt The number of view.
  398 + */
  399 + void ChangeView(int viewCnt)
  400 + {
  401 + switch(viewCnt)
  402 + {
  403 + case BASIC_SHAPE_VIEW:
  404 + {
  405 + CreateBasicShape();
  406 + break;
  407 + }
  408 + case CLIP_PATH_VIEW:
  409 + {
  410 + CreateClipPathAndMask();
  411 + break;
  412 + }
  413 + case GRADIENT_VIEW:
  414 + {
  415 + CreateGradient();
  416 + break;
  417 + }
  418 + case PICTURE_VIEW:
  419 + {
  420 + CreatePicture();
  421 + break;
  422 + }
  423 + }
  424 + mPrevButton.RaiseToTop();
  425 + mNextButton.RaiseToTop();
  426 + mTitle.RaiseToTop();
  427 + }
  428 +
  429 + /**
  430 + * @brief Create a view and set up the button and timer, and title.
  431 + */
  432 + void Create(Application& application)
  433 + {
  434 + // The Init signal is received once (only) during the Application lifetime
  435 + Window window = application.GetWindow();
  436 + Vector2 windowSize = window.GetSize();
  437 + window.KeyEventSignal().Connect(this, &CanvasViewController::OnKeyEvent);
  438 +
  439 + mPrevButton = Toolkit::PushButton::New();
  440 + mPrevButton.SetProperty(Toolkit::Button::Property::LABEL, PREV_BUTTON_TEXT);
  441 + mPrevButton.SetProperty(Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_LEFT);
  442 + mPrevButton.SetProperty(Actor::Property::PARENT_ORIGIN, ParentOrigin::TOP_LEFT);
  443 + window.Add(mPrevButton);
  444 + mPrevButton.ClickedSignal().Connect(this, &CanvasViewController::OnPrevButtonClicked);
  445 +
  446 + mNextButton = Toolkit::PushButton::New();
  447 + mNextButton.SetProperty(Toolkit::Button::Property::LABEL, LEFT_BUTTON_TEXT);
  448 + mNextButton.SetProperty(Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_RIGHT);
  449 + mNextButton.SetProperty(Actor::Property::PARENT_ORIGIN, ParentOrigin::TOP_RIGHT);
  450 + window.Add(mNextButton);
  451 + mNextButton.ClickedSignal().Connect(this, &CanvasViewController::OnNextButtonClicked);
  452 +
  453 + mCanvasView = Toolkit::CanvasView::New();
  454 + mCanvasView.SetProperty(Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER);
  455 + mCanvasView.SetProperty(Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER);
  456 + mCanvasView.SetProperty(Actor::Property::SIZE, windowSize);
  457 +
  458 + mTitle = Toolkit::TextLabel::New(VIEW_LABEL[BASIC_SHAPE_VIEW]);
  459 + mTitle[Actor::Property::ANCHOR_POINT] = AnchorPoint::TOP_CENTER;
  460 + mTitle[Actor::Property::PARENT_ORIGIN] = Vector3(0.5f, 0.0f, 0.5f);
  461 + mTitle[Toolkit::TextLabel::Property::HORIZONTAL_ALIGNMENT] = "CENTER";
  462 + mTitle[Toolkit::TextLabel::Property::VERTICAL_ALIGNMENT] = "CENTER";
  463 + mTitle[Toolkit::TextLabel::Property::TEXT_COLOR] = Color::BLACK;
  464 + window.Add(mTitle);
  465 +
  466 + mTimer = Timer::New(1000.0f / 32.0f);
  467 + mTimer.TickSignal().Connect(this, &CanvasViewController::tick);
  468 +
  469 + ChangeView(mViewCount);
  470 +
  471 + mPrevButton.RaiseToTop();
  472 + mNextButton.RaiseToTop();
  473 + mTitle.RaiseToTop();
  474 + }
  475 +
  476 + /**
  477 + * @brief Called when prev button clicked.
  478 + *
  479 + * Change to previous view.
  480 + */
  481 + bool OnPrevButtonClicked(Toolkit::Button button)
  482 + {
  483 + ResetView(mViewCount);
  484 + mViewCount--;
  485 + if(mViewCount < BASIC_SHAPE_VIEW)
  486 + {
  487 + mViewCount = NUMBER_OF_VIEWS - 1;
  488 + }
  489 + ChangeView(mViewCount);
  490 + return true;
  491 + }
  492 +
  493 + /**
  494 + * @brief Called when prev button clicked.
  495 + *
  496 + * Change to next view.
  497 + */
  498 + bool OnNextButtonClicked(Toolkit::Button button)
  499 + {
  500 + ResetView(mViewCount);
  501 + mViewCount++;
  502 + if(mViewCount >= NUMBER_OF_VIEWS)
  503 + {
  504 + mViewCount = 0;
  505 + }
  506 + ChangeView(mViewCount);
  507 + return true;
  508 + }
  509 +
  510 + /**
159 * @brief Called when set time. 511 * @brief Called when set time.
160 * 512 *
161 * Change transformation every call to make it look like vector animation. 513 * Change transformation every call to make it look like vector animation.
162 */ 514 */
163 bool tick() 515 bool tick()
164 { 516 {
165 - mRoundedRect.ResetPath();  
166 - mRoundedRect.AddRect(Rect<float>(10.0f, 350.0f, 200.0f, 140.0f), Vector2(float(mCount % 80), float(mCount % 80))); 517 + if(mViewCount == BASIC_SHAPE_VIEW)
  518 + {
  519 + mRoundedRect.ResetPath();
  520 + mRoundedRect.AddRect(Rect<float>(10.0f, 350.0f, 200.0f, 140.0f), Vector2(float(mCount % 80), float(mCount % 80)));
  521 +
  522 + mArc.ResetPath();
  523 + mArc.AddArc(Vector2(100.0f, 650.0f), 80.0f, 10.0f, float(mCount % 180), true);
  524 + mArc.AddArc(Vector2(100.0f, 650.0f), 80.0f, 10.0f + float(mCount % 180), float(mCount % 180) / 2.0f, true);
167 525
168 - mArc.ResetPath();  
169 - mArc.AddArc(Vector2(100.0f, 650.0f), 80.0f, 10.0f, float(mCount % 180), true);  
170 - mArc.AddArc(Vector2(100.0f, 650.0f), 80.0f, 10.0f + float(mCount % 180), float(mCount % 180) / 2.0f, true); 526 + mStar.Rotate(Degree(mCount * 2.0f));
  527 + mStar.Scale(0.6f + (!((mCount / 100) & 0x1) ? float(mCount % 100) * 0.01f : 1 - (float(mCount % 100) * 0.01f)));
171 528
172 - mStar.Rotate(Degree(mCount * 2.0f));  
173 - mStar.Scale(float(mCount % 100) * 0.01f + 0.6f); 529 + mGroup1.Scale(float(mCount % 50) * 0.005f + 0.8f);
174 530
175 - mGroup1.Scale(float(mCount % 50) * 0.005f + 0.8f); 531 + mGroup2.SetOpacity(1.0f - float(mCount % 50) * 0.015f);
  532 + }
  533 + else if(mViewCount == CLIP_PATH_VIEW)
  534 + {
  535 + mArc.ResetPath();
  536 + mArc.AddArc(Vector2(240.0f, 550.0f), 100.0f, 10.0f, float(mCount % 180), true);
  537 + mArc.AddArc(Vector2(240.0f, 550.0f), 100.0f, 10.0f + float(mCount % 180), float(mCount % 180) / 2.0f, true);
176 538
177 - mGroup2.SetOpacity(1.0f - float(mCount % 50) * 0.015f); 539 + mStar.Rotate(Degree(mCount * 2.0f));
  540 + mStar.Scale(0.6f + (!((mCount / 100) & 0x1) ? float(mCount % 100) * 0.01f : 1 - (float(mCount % 100) * 0.01f)));
  541 + }
  542 + else if(mViewCount == GRADIENT_VIEW)
  543 + {
  544 + Dali::Vector<Dali::CanvasRenderer::Gradient::ColorStop> stops;
  545 + stops.PushBack({0.0f, Vector4(1.0f, 0.0f, 0.0f, 1.0f)});
  546 + stops.PushBack({!((mCount / 100) & 0x1) ? float(mCount % 100) / 100.0f : 1 - (float(mCount % 100) / 100.0f), Vector4(0.0f, 0.0f, 1.0f, 1.0f)});
  547 + stops.PushBack({1.0f, Vector4(0.0f, 1.0f, 1.0f, 1.0f)});
178 548
  549 + mLinearGradient.SetColorStops(stops);
  550 + }
179 mCount++; 551 mCount++;
180 return true; 552 return true;
181 } 553 }
@@ -183,7 +555,6 @@ public: @@ -183,7 +555,6 @@ public:
183 /** 555 /**
184 * @brief Called when any key event is received. 556 * @brief Called when any key event is received.
185 * 557 *
186 - * Will use this to quit the application if Back or the Escape key is received  
187 * @param[in] event The key event information 558 * @param[in] event The key event information
188 */ 559 */
189 void OnKeyEvent(const KeyEvent& event) 560 void OnKeyEvent(const KeyEvent& event)
@@ -194,18 +565,44 @@ public: @@ -194,18 +565,44 @@ public:
194 { 565 {
195 mApplication.Quit(); 566 mApplication.Quit();
196 } 567 }
  568 + else if(IsKey(event, Dali::DALI_KEY_CURSOR_LEFT))
  569 + {
  570 + ResetView(mViewCount);
  571 + mViewCount--;
  572 + if(mViewCount < BASIC_SHAPE_VIEW)
  573 + {
  574 + mViewCount = NUMBER_OF_VIEWS - 1;
  575 + }
  576 + ChangeView(mViewCount);
  577 + }
  578 + else if(IsKey(event, Dali::DALI_KEY_CURSOR_RIGHT))
  579 + {
  580 + ResetView(mViewCount);
  581 + mViewCount++;
  582 + if(mViewCount >= NUMBER_OF_VIEWS)
  583 + {
  584 + mViewCount = BASIC_SHAPE_VIEW;
  585 + }
  586 + ChangeView(mViewCount);
  587 + }
197 } 588 }
198 } 589 }
199 590
200 private: 591 private:
201 - Application& mApplication;  
202 - Dali::CanvasRenderer::Shape mRoundedRect;  
203 - Dali::CanvasRenderer::Shape mArc;  
204 - Dali::CanvasRenderer::Shape mStar;  
205 - Dali::CanvasRenderer::DrawableGroup mGroup1;  
206 - Dali::CanvasRenderer::DrawableGroup mGroup2;  
207 - Timer mTimer;  
208 - int mCount; 592 + Application& mApplication;
  593 + Toolkit::CanvasView mCanvasView;
  594 + Dali::CanvasRenderer::Shape mRoundedRect;
  595 + Dali::CanvasRenderer::Shape mArc;
  596 + Dali::CanvasRenderer::Shape mStar;
  597 + Dali::CanvasRenderer::DrawableGroup mGroup1;
  598 + Dali::CanvasRenderer::DrawableGroup mGroup2;
  599 + Timer mTimer;
  600 + int mCount;
  601 + int mViewCount;
  602 + Dali::CanvasRenderer::LinearGradient mLinearGradient;
  603 + Toolkit::PushButton mPrevButton;
  604 + Toolkit::PushButton mNextButton;
  605 + Toolkit::TextLabel mTitle;
209 }; 606 };
210 607
211 int DALI_EXPORT_API main(int argc, char** argv) 608 int DALI_EXPORT_API main(int argc, char** argv)