From 23128b3c70d064a3fb27d0e2031025ea8297aa1e Mon Sep 17 00:00:00 2001 From: JunsuChoi Date: Wed, 23 Dec 2020 15:34:33 +0900 Subject: [PATCH] Implements CanvasView Example This is an example of Dali::Toolkit::CanvasView. This example create a CanvasView control, create a Dali::CanvasRenderer::Shape and add it. Basic Primitves (rect, circle, arc) can draw and various shapes can draw using path command. Change-Id: I6f8c1dd262051d856c24cb51bb7dfacb4763d34b --- com.samsung.dali-demo.xml | 3 + examples-reel/dali-examples-reel.cpp | 1 + examples/canvas-view/canvas-view-example.cpp | 201 +++++++++++++++++++++++++++ resources/po/en_GB.po | 3 + resources/po/en_US.po | 3 + shared/dali-demo-strings.h | 2 + 6 files changed, 213 insertions(+) create mode 100644 examples/canvas-view/canvas-view-example.cpp diff --git a/com.samsung.dali-demo.xml b/com.samsung.dali-demo.xml index 8cf0fc8..622c301 100644 --- a/com.samsung.dali-demo.xml +++ b/com.samsung.dali-demo.xml @@ -55,6 +55,9 @@ + + + diff --git a/examples-reel/dali-examples-reel.cpp b/examples-reel/dali-examples-reel.cpp index 1f43d21..5d137cb 100644 --- a/examples-reel/dali-examples-reel.cpp +++ b/examples-reel/dali-examples-reel.cpp @@ -45,6 +45,7 @@ int DALI_EXPORT_API main(int argc, char** argv) demo.AddExample(Example("bloom-view.example", DALI_DEMO_STR_TITLE_BLOOM_VIEW)); demo.AddExample(Example("builder.example", DALI_DEMO_STR_TITLE_SCRIPT_BASED_UI)); demo.AddExample(Example("buttons.example", DALI_DEMO_STR_TITLE_BUTTONS)); + demo.AddExample(Example("canvas-view.example", DALI_DEMO_STR_TITLE_CANVAS_VIEW)); demo.AddExample(Example("clipping.example", DALI_DEMO_STR_TITLE_CLIPPING)); demo.AddExample(Example("clipping-draw-order.example", DALI_DEMO_STR_TITLE_CLIPPING_DRAW_ORDER)); demo.AddExample(Example("color-transition.example", DALI_DEMO_STR_TITLE_COLOR_TRANSITION)); diff --git a/examples/canvas-view/canvas-view-example.cpp b/examples/canvas-view/canvas-view-example.cpp new file mode 100644 index 0000000..16e95e3 --- /dev/null +++ b/examples/canvas-view/canvas-view-example.cpp @@ -0,0 +1,201 @@ +/* + * Copyright (c) 2021 Samsung Electronics Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + */ + +#include +#include +#include + +using namespace Dali; + +/** + * @brief This demonstrates how to display and control vector primitives using CanvasView. + * + * - It displays various types of shapes. Rectangle, circle, path, etc. + * - Each shape can be set to fill color, stroke color, width, etc + * and can change the transfomation(rotate, scale, translate) + */ +class CanvasViewController : public ConnectionTracker +{ +public: + /** + * @brief Constructor. + * @param[in] application A reference to the Application class + */ + CanvasViewController(Application& application) + : mApplication(application), + mRoundedRect(), + mArc(), + mStar(), + mTimer(), + mCount(0) + { + // Connect to the Application's Init signal + mApplication.InitSignal().Connect(this, &CanvasViewController::Create); + } + + ~CanvasViewController() = default; + + void Create(Application& application) + { + // The Init signal is received once (only) during the Application lifetime + Window window = application.GetWindow(); + Vector2 windowSize = window.GetSize(); + window.KeyEventSignal().Connect(this, &CanvasViewController::OnKeyEvent); + + Toolkit::CanvasView mCanvasView = Toolkit::CanvasView::New(windowSize); + mCanvasView.SetProperty(Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER); + mCanvasView.SetProperty(Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER); + mCanvasView.SetProperty(Actor::Property::SIZE, windowSize); + + Dali::CanvasRenderer::Shape canvasBackground = Dali::CanvasRenderer::Shape::New(); + canvasBackground.AddRect(Rect(0.0f, 0.0f, windowSize.width, windowSize.height), Vector2::ZERO); + canvasBackground.SetFillColor(Vector4(1.0f, 1.0f, 1.0f, 1.0f)); + mCanvasView.AddDrawable(canvasBackground); + + Dali::CanvasRenderer::Shape shape1 = Dali::CanvasRenderer::Shape::New(); + shape1.AddRect(Rect(-50.0f, -50.0f, 100.0f, 100.0f), Vector2::ZERO); + shape1.SetFillColor(Vector4(0.0f, 0.5f, 0.0f, 0.5f)); + shape1.SetStrokeColor(Vector4(0.5f, 0.0f, 0.0f, 0.5f)); + shape1.SetStrokeWidth(10.0f); + shape1.Scale(1.2f); + shape1.Rotate(Degree(45.0f)); + shape1.Translate(Vector2(100.0f, 100.0f)); + + mCanvasView.AddDrawable(shape1); + + mRoundedRect = Dali::CanvasRenderer::Shape::New(); + mRoundedRect.AddRect(Rect(10.0f, 350.0f, 200.0f, 140.0f), Vector2(40.0f, 40.0f)); + mRoundedRect.SetFillColor(Vector4(0.0f, 0.0f, 1.0f, 1.0f)); + mRoundedRect.SetOpacity(0.5f); + mRoundedRect.SetStrokeColor(Vector4(1.0f, 1.0f, 0.0f, 1.0f)); + mRoundedRect.SetStrokeWidth(10.0f); + mRoundedRect.SetStrokeJoin(Dali::CanvasRenderer::Shape::StrokeJoin::MITER); + Dali::Vector dashPattern; + dashPattern.PushBack(15.0f); + dashPattern.PushBack(30.0f); + mRoundedRect.SetStrokeDash(dashPattern); + mCanvasView.AddDrawable(mRoundedRect); + + Dali::CanvasRenderer::Shape shape2 = Dali::CanvasRenderer::Shape::New(); + shape2.AddMoveTo(Vector2(535.0f, 135.0f)); + shape2.AddLineTo(Vector2(660.0f, 455.0f)); + shape2.AddLineTo(Vector2(355.0f, 250.0f)); + shape2.AddLineTo(Vector2(715.0f, 250.0f)); + shape2.AddLineTo(Vector2(410.0f, 455.0f)); + shape2.Close(); + shape2.SetFillRule(Dali::CanvasRenderer::Shape::FillRule::EVEN_ODD); + shape2.SetFillColor(Vector4(1.0f, 0.0f, 0.0f, 1.0f)); + shape2.SetOpacity(0.5f); + shape2.SetStrokeColor(Vector4(1.0f, 0.0f, 1.0f, 1.0f)); + shape2.SetStrokeWidth(20.0f); + shape2.SetStrokeJoin(Dali::CanvasRenderer::Shape::StrokeJoin::ROUND); + shape2.Transform(Matrix3(0.6f, 0.0f, 20.0f, 0.0f, 0.6f, -50.0f, 0.0f, 0.0f, 1.0f)); + mCanvasView.AddDrawable(shape2); + + mArc = Dali::CanvasRenderer::Shape::New(); + mArc.AddArc(Vector2(100.0f, 650.0f), 80.0f, 10.0f, 0.0f, true); + mArc.AddArc(Vector2(100.0f, 650.0f), 80.0f, 10.0f, 0.0f, true); + mArc.SetOpacity(0.5f); + mArc.SetStrokeColor(Vector4(0.0f, 1.0f, 0.0f, 1.0f)); + mArc.SetStrokeWidth(10.0f); + mArc.SetStrokeCap(Dali::CanvasRenderer::Shape::StrokeCap::ROUND); + mCanvasView.AddDrawable(mArc); + + mStar = Dali::CanvasRenderer::Shape::New(); + mStar.AddMoveTo(Vector2(-1.0f, -165.0f)); + mStar.AddLineTo(Vector2(53.0f, -56.0f)); + mStar.AddLineTo(Vector2(174.0f, -39.0f)); + mStar.AddLineTo(Vector2(87.0f, 45.0f)); + mStar.AddLineTo(Vector2(107.0f, 166.0f)); + mStar.AddLineTo(Vector2(-1.0f, 110.0f)); + mStar.AddLineTo(Vector2(-103.0f, 166.0f)); + mStar.AddLineTo(Vector2(-88.0f, 46.0f)); + mStar.AddLineTo(Vector2(-174.0f, -38.0f)); + mStar.AddLineTo(Vector2(-54.0f, -56.0f)); + + mStar.Close(); + + mStar.SetFillColor(Vector4(0.0f, 1.0f, 1.0f, 1.0f)); + mStar.SetStrokeColor(Vector4(0.5f, 1.0f, 0.5f, 1.0f)); + mStar.SetStrokeWidth(30.0f); + mStar.SetStrokeCap(Dali::CanvasRenderer::Shape::StrokeCap::ROUND); + mStar.Scale(0.6f); + mStar.Translate(Vector2(350.0f, 450.0f)); + mStar.SetOpacity(0.5f); + + mCanvasView.AddDrawable(mStar); + + mTimer = Timer::New(1000.0f / 32.0f); + mTimer.TickSignal().Connect(this, &CanvasViewController::tick); + mTimer.Start(); + + window.Add(mCanvasView); + } + + /** + * @brief Called when set time. + * + * Change transformation every call to make it look like vector animation. + */ + bool tick() + { + mRoundedRect.ResetPath(); + mRoundedRect.AddRect(Rect(10.0f, 350.0f, 200.0f, 140.0f), Vector2(float(mCount % 80), float(mCount % 80))); + + mArc.ResetPath(); + mArc.AddArc(Vector2(100.0f, 650.0f), 80.0f, 10.0f, float(mCount % 180), true); + mArc.AddArc(Vector2(100.0f, 650.0f), 80.0f, 10.0f + float(mCount % 180), float(mCount % 180) / 2.0f, true); + + mStar.Rotate(Degree(mCount * 2.0f)); + mStar.Scale(float(mCount % 100) * 0.01f + 0.6f); + mCount++; + return true; + } + + /** + * @brief Called when any key event is received. + * + * Will use this to quit the application if Back or the Escape key is received + * @param[in] event The key event information + */ + void OnKeyEvent(const KeyEvent& event) + { + if(event.GetState() == KeyEvent::DOWN) + { + if(IsKey(event, Dali::DALI_KEY_ESCAPE) || IsKey(event, Dali::DALI_KEY_BACK)) + { + mApplication.Quit(); + } + } + } + +private: + Application& mApplication; + Dali::CanvasRenderer::Shape mRoundedRect; + Dali::CanvasRenderer::Shape mArc; + Dali::CanvasRenderer::Shape mStar; + Timer mTimer; + int mCount; +}; + +int DALI_EXPORT_API main(int argc, char** argv) +{ + Application application = Application::New(&argc, &argv); + CanvasViewController test(application); + application.MainLoop(); + return 0; +} diff --git a/resources/po/en_GB.po b/resources/po/en_GB.po index 8fd4410..1d472d2 100755 --- a/resources/po/en_GB.po +++ b/resources/po/en_GB.po @@ -28,6 +28,9 @@ msgstr "Bubbles" msgid "DALI_DEMO_STR_TITLE_BUTTONS" msgstr "Buttons" +msgid "DALI_DEMO_STR_TITLE_CANVAS_VIEW" +msgstr "Canvas view" + msgid "DALI_DEMO_STR_TITLE_CALL_ACTIVE" msgstr "Call Active" diff --git a/resources/po/en_US.po b/resources/po/en_US.po index ea7c328..729b67f 100755 --- a/resources/po/en_US.po +++ b/resources/po/en_US.po @@ -28,6 +28,9 @@ msgstr "Bubbles" msgid "DALI_DEMO_STR_TITLE_BUTTONS" msgstr "Buttons" +msgid "DALI_DEMO_STR_TITLE_CANVAS_VIEW" +msgstr "Canvas view" + msgid "DALI_DEMO_STR_TITLE_CALL_ACTIVE" msgstr "Call Active" diff --git a/shared/dali-demo-strings.h b/shared/dali-demo-strings.h index 1f411e3..b0c7861 100644 --- a/shared/dali-demo-strings.h +++ b/shared/dali-demo-strings.h @@ -45,6 +45,7 @@ extern "C" #define DALI_DEMO_STR_TITLE_BLOOM_VIEW dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_BLOOM_VIEW") #define DALI_DEMO_STR_TITLE_BUBBLES dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_BUBBLES") #define DALI_DEMO_STR_TITLE_BUTTONS dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_BUTTONS") +#define DALI_DEMO_STR_TITLE_CANVAS_VIEW dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_CANVAS_VIEW") #define DALI_DEMO_STR_TITLE_CALL_ACTIVE dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_CALL_ACTIVE") #define DALI_DEMO_STR_TITLE_CARD_ACTIVE dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_CARD_ACTIVE") #define DALI_DEMO_STR_TITLE_CLIPPING dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_CLIPPING") @@ -150,6 +151,7 @@ extern "C" #define DALI_DEMO_STR_TITLE_BLOOM_VIEW "Bloom" #define DALI_DEMO_STR_TITLE_BUBBLES "Bubbles" #define DALI_DEMO_STR_TITLE_BUTTONS "Buttons" +#define DALI_DEMO_STR_TITLE_CANVAS_VIEW "Canvas View" #define DALI_DEMO_STR_TITLE_CALL_ACTIVE "Call Active" #define DALI_DEMO_STR_TITLE_CARD_ACTIVE "Card Active" #define DALI_DEMO_STR_TITLE_CLIPPING "Clipping" -- 2.7.4