From: Xiangyin Ma Date: Tue, 22 Mar 2016 18:47:13 +0000 (+0000) Subject: Programming guide of SVG Renderer X-Git-Tag: dali_1.1.27~1 X-Git-Url: http://review.tizen.org/git/?p=platform%2Fcore%2Fuifw%2Fdali-toolkit.git;a=commitdiff_plain;h=cb79ad02730f356835bcb061e1cc92d3bfe70c0d Programming guide of SVG Renderer Change-Id: I1ce2607ebd5ba4fcc7ff40fbe3795620f3c034e1 --- diff --git a/docs/content/images/renderers/svg-renderer.svg b/docs/content/images/renderers/svg-renderer.svg new file mode 100755 index 0000000..b7d5476 --- /dev/null +++ b/docs/content/images/renderers/svg-renderer.svg @@ -0,0 +1,491 @@ + + + +image/svg+xml diff --git a/docs/content/programming-guide/image-view.h b/docs/content/programming-guide/image-view.h index 5822da5..63a1030 100644 --- a/docs/content/programming-guide/image-view.h +++ b/docs/content/programming-guide/image-view.h @@ -24,6 +24,11 @@ * Dali::Toolkit::ImageView myImageView = ImageView::New( "source-image-url.9.png" ); * @endcode * + * A path to a svg image file: + * @code + * Dali::Toolkit::ImageView myImageView = ImageView::New( "source-image-url.svg" ); + * @endcode + * *

Loading from a Image handle

* Dali::Image is an abstract base class with multiple derived classes. * diff --git a/docs/content/shared-javascript-and-cpp-documentation/control-renderers.md b/docs/content/shared-javascript-and-cpp-documentation/control-renderers.md index 43f0d16..6966e42 100644 --- a/docs/content/shared-javascript-and-cpp-documentation/control-renderers.md +++ b/docs/content/shared-javascript-and-cpp-documentation/control-renderers.md @@ -14,6 +14,7 @@ DALi provides the following renderers: + [Gradient](@ref gradient-renderer) + [Image](@ref image-renderer) + [N-Patch](@ref n-patch-renderer) + + [SVG](@ref svg-renderer) + [Border](@ref border-renderer) Controls can provide properties that allow users to specify the renderer type. @@ -295,6 +296,58 @@ control.background = imageUrl : "path-to-image.9.png" }; ~~~ + +___________________________________________________________________________________________________ + +## SVG Renderer {#svg-renderer} + +Renders a svg image into the control's quad. + +
+ +![ ](../assets/img/renderers/svg-renderer.svg) + +
+ +
+ +![ ](renderers/svg-renderer.svg) + +
+ +### Properties Supported + +**RendererType:** "svg" + +| Property Name | Type | Required | Description | +|---------------|:-------:|:--------:|----------------------------------| +| imageUrl | STRING | Yes | The URL of the SVG image. | + +### Usage + +~~~{.cpp} +// C++ +Dali::Toolkit::Control control = Dali::Toolkit::Control::New(); + +Dali::Property::Map map; + +map[ "rendererType" ] = "svg"; +map[ "imageUrl" ] = "path-to-image.svg"; + +control.SetSize( 200.f, 200.f ); +control.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map ); +~~~ + +~~~{.js} +// JavaScript +var control = new dali.Control( "Control" ); + +control.background = +{ + rendererType : "svg", + imageUrl : "path-to-image.svg" +}; +~~~ ___________________________________________________________________________________________________ ## Border Renderer {#border-renderer}