X-Git-Url: http://review.tizen.org/git/?p=platform%2Fcore%2Fuifw%2Fdali-toolkit.git;a=blobdiff_plain;f=docs%2Fcontent%2Fshared-javascript-and-cpp-documentation%2Fcontrol-renderers.md;h=b19b5ddb900df4bb17aeb0da7db07763acf7c1c5;hp=43f0d16d9e440571925c80e135c68288404ca67b;hb=6991753931a9a5b8a6b253c5e9e1541556239d1b;hpb=864042717041b6d9ad114b2e2f360f5f07c7682b
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..b19b5dd 100644
--- a/docs/content/shared-javascript-and-cpp-documentation/control-renderers.md
+++ b/docs/content/shared-javascript-and-cpp-documentation/control-renderers.md
@@ -12,8 +12,7 @@ Additionaly, they respond to actor size and color change, while also providing c
DALi provides the following renderers:
+ [Color](@ref color-renderer)
+ [Gradient](@ref gradient-renderer)
- + [Image](@ref image-renderer)
- + [N-Patch](@ref n-patch-renderer)
+ + [Image](@ref image-renderers)
+ [Border](@ref border-renderer)
Controls can provide properties that allow users to specify the renderer type.
@@ -35,7 +34,7 @@ Renders a solid color to the control's quad.
| Property Name | Type | Required | Description |
|---------------|:-------:|:--------:|---------------------------|
-| blendColor | VECTOR4 | Yes | The solid color required. |
+| mixColor | VECTOR4 | Yes | The solid color required. |
### Usage
@@ -45,7 +44,7 @@ Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
Dali::Property::Map map;
map[ "rendererType" ] = "color";
-map[ "blendColor" ] = Color::RED;
+map[ "mixColor" ] = Color::RED;
control.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map );
~~~
@@ -57,7 +56,7 @@ var control = new dali.Control( "Control" );
control.background =
{
rendererType : "color",
- blendColor : dali.COLOR_RED
+ mixColor : dali.COLOR_RED
};
~~~
___________________________________________________________________________________________________
@@ -76,18 +75,18 @@ Both Linear and Radial gradients are supported.
**RendererType:** "gradient"
-| Property Name | Type | Required | Description |
-|--------------------------------------------------------------|:----------------:|:----------:|-------------------------------------------------------------------|
-| gradientStartPosition | VECTOR2 | For Linear | The start position of the linear gradient. |
-| gradientEndPosition | VECTOR2 | For Linear | The end position of the linear gradient. |
-| gradientCenter | VECTOR2 | For Radial | The center point of the gradient. |
-| gradientRadius | FLOAT | For Radial | The size of the radius. |
-| gradientStopOffset | ARRAY of FLOAT | Yes | All the stop offsets. |
-| gradientStopColor | ARRAY of VECTOR4 | Yes | The color at those stop offsets. |
-| [gradientUnits](@ref gradient-renderer-units) | STRING | No | *objectBoundingBox* or *userSpace*. Default: *objectBoundingBox*. |
-| [gradientSpreadMethod](@ref gradient-renderer-spread-method) | STRING | No | *pad*, *repeat* or *reflect*. Default: *pad* |
+| Property Name | Type | Required | Description |
+|--------------------------------------------------------------|:----------------:|:----------:|-------------------------------------------------------------------------|
+| startPosition | VECTOR2 | For Linear | The start position of the linear gradient. |
+| endPosition | VECTOR2 | For Linear | The end position of the linear gradient. |
+| center | VECTOR2 | For Radial | The center point of the gradient. |
+| radius | FLOAT | For Radial | The size of the radius. |
+| stopOffset | ARRAY of FLOAT | No | All the stop offsets. If not supplied default is 0.0 and 1.0 |
+| stopColor | ARRAY of VECTOR4 | Yes | The color at those stop offsets. At least 2 required to show a gradient |
+| [gradientUnits](@ref gradient-renderer-units) | STRING | No | *objectBoundingBox* or *userSpace*. Default: *objectBoundingBox*. |
+| [gradientSpreadMethod](@ref gradient-renderer-spread-method) | STRING | No | *pad*, *repeat* or *reflect*. Default: *pad* |
-If the *gradientStopOffset* and *gradientStopColor* arrays do not have the same number of elements, then the minimum of the two is used as the stop points.
+If the *stopOffset* and *stopColor* arrays do not have the same number of elements, then the minimum of the two is used as the stop points.
### Units {#gradient-renderer-units}
@@ -119,8 +118,8 @@ Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
Dali::Property::Map map;
map[ "rendererType" ] = "gradient";
-map[ "gradientStartPosition" ] = Vector2( 0.5f, 0.5f );
-map[ "gradientEndPosition" ] = Vector2( -0.5f, -0.5f );
+map[ "startPosition" ] = Vector2( 0.5f, 0.5f );
+map[ "endPosition" ] = Vector2( -0.5f, -0.5f );
Dali::Property::Array stopOffsets;
stopOffsets.PushBack( 0.0f );
@@ -128,7 +127,7 @@ stopOffsets.PushBack( 0.3f );
stopOffsets.PushBack( 0.6f );
stopOffsets.PushBack( 0.8f );
stopOffsets.PushBack( 1.f );
-map[ "gradientStopOffset" ] = stopOffsets;
+map[ "stopOffset" ] = stopOffsets;
Dali::Property::Array stopColors;
stopColors.PushBack( Vector4( 129.f, 198.f, 193.f, 255.f )/255.f );
@@ -136,7 +135,7 @@ stopColors.PushBack( Vector4( 196.f, 198.f, 71.f, 122.f )/255.f );
stopColors.PushBack( Vector4( 214.f, 37.f, 139.f, 191.f )/255.f );
stopColors.PushBack( Vector4( 129.f, 198.f, 193.f, 150.f )/255.f );
stopColors.PushBack( Color::YELLOW );
-map[ "gradientStopColor" ] = stopColors;
+map[ "stopColor" ] = stopColors;
control.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map );
~~~
@@ -148,10 +147,10 @@ var control = new dali.Control( "Control" );
control.background =
{
rendererType : "gradient",
- gradientStartPosition : [ 0.5, 0.5 ],
- gradientEndPosition : [ -0.5, -0.5 ],
- gradientStopOffset : [ 0.0, 0.3, 0.6, 0.8, 1.0 ],
- gradientStopColor : [
+ startPosition : [ 0.5, 0.5 ],
+ endPosition : [ -0.5, -0.5 ],
+ stopOffset : [ 0.0, 0.3, 0.6, 0.8, 1.0 ],
+ stopColor : [
[ 129 / 255, 198 / 255, 193 / 255, 255 / 255 ],
[ 196 / 255, 198 / 255, 71 / 255, 122 / 255 ],
[ 214 / 255, 37 / 255, 139 / 255, 191 / 255 ],
@@ -168,8 +167,8 @@ Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
Dali::Property::Map map;
map[ "rendererType" ] = "gradient";
-map[ "gradientCenter" ] = Vector2( 0.5f, 0.5f );
-map[ "gradientRadius" ] = 1.414f;
+map[ "center" ] = Vector2( 0.5f, 0.5f );
+map[ "radius" ] = 1.414f;
Dali::Property::Array stopOffsets;
stopOffsets.PushBack( 0.0f );
@@ -177,7 +176,7 @@ stopOffsets.PushBack( 0.3f );
stopOffsets.PushBack( 0.6f );
stopOffsets.PushBack( 0.8f );
stopOffsets.PushBack( 1.f );
-map[ "gradientStopOffset" ] = stopOffsets;
+map[ "stopOffset" ] = stopOffsets;
Dali::Property::Array stopColors;
stopColors.PushBack( Vector4( 129.f, 198.f, 193.f, 255.f )/255.f );
@@ -185,7 +184,7 @@ stopColors.PushBack( Vector4( 196.f, 198.f, 71.f, 122.f )/255.f );
stopColors.PushBack( Vector4( 214.f, 37.f, 139.f, 191.f )/255.f );
stopColors.PushBack( Vector4( 129.f, 198.f, 193.f, 150.f )/255.f );
stopColors.PushBack( Color::YELLOW );
-map[ "gradientStopColor" ] = stopColors;
+map[ "stopColor" ] = stopColors;
control.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map );
~~~
@@ -197,10 +196,10 @@ var control = new dali.Control( "Control" );
control.background =
{
rendererType : "gradient",
- gradientCenter : [ 0.5, 0.5 ],
- gradientRadius : 1.414,
- gradientStopOffset : [ 0.0, 0.3, 0.6, 0.8, 1.0 ],
- gradientStopColor : [
+ center : [ 0.5, 0.5 ],
+ radius : 1.414,
+ stopOffset : [ 0.0, 0.3, 0.6, 0.8, 1.0 ],
+ stopColor : [
[ 129 / 255, 198 / 255, 193 / 255, 255 / 255 ],
[ 196 / 255, 198 / 255, 71 / 255, 122 / 255 ],
[ 214 / 255, 37 / 255, 139 / 255, 191 / 255 ],
@@ -211,26 +210,38 @@ control.background =
~~~
___________________________________________________________________________________________________
-## Image Renderer {#image-renderer}
+## Image Renderers {#image-renderers}
Renders an image into the control's quad.
+Depending on the extension of the image, different renderer is provided to render the image onto the screen.
+
+ + [Normal](@ref image-renderer)
+ + [N-Patch](@ref n-patch-renderer)
+ + [SVG](@ref svg-renderer)
+
+___________________________
+
+### Normal {#image-renderer}
+
+Renders a raster image ( jpg, png etc.) into the control's quad.
+
-### Properties Supported
+#### Properties Supported
**RendererType:** "image"
| Property Name | Type | Required | Description |
|--------------------|:--------:|:--------:|-------------------------------------------------------------------------------------------------------------------------------------------------|
-| imageUrl | STRING | Yes | The URL of the image. |
-| [imageFittingMode](@ref resourceimagescaling-fittingmode) | STRING | No | *shrinkToFit*, *scaleToFill*, *fitWidth* or *fitHeight*. Default: *shrinkToFit*. |
-| [imageSamplingMode](@ref resourceimagescaling-scaling) | STRING | No | *box*, *nearest*, *linear*, *boxThenNearest*, *boxThenLinear*, *noFilter* or *dontCare*. Default: *box*. |
-| imageDesiredWidth | INT | No | The desired image width. Will use actual image width if not specified. |
-| imageDesiredHeight | INT | No | The desired image height. Will use actual image height if not specified. |
+| url | STRING | Yes | The URL of the image. |
+| [fittingMode](@ref resourceimagescaling-fittingmode) | STRING | No | *SHRINK_TO_FIT*, *SCALE_TO_FILL*, *FIT_WIDTH* or *FIT_HEIGHT*. Default: *SHRINK_TO_FIT*. |
+| [samplingMode](@ref resourceimagescaling-scaling) | STRING | No | *BOX*, *NEAREST*, *LINEAR*, *BOX_THEN_NEAREST*, *BOX_THEN_LINEAR*, *NO_FILTERr* or *DONT_CARE*. Default: *BOX*. |
+| desiredWidth | INT | No | The desired image width. Will use actual image width if not specified. |
+| desiredHeight | INT | No | The desired image height. Will use actual image height if not specified. |
-### Usage
+#### Usage
~~~{.cpp}
// C++
@@ -238,7 +249,7 @@ Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
Dali::Property::Map map;
map[ "rendererType" ] = "image";
-map[ "imageUrl" ] = "path-to-image.jpg";
+map[ "url" ] = "path-to-image.jpg";
control.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map );
~~~
@@ -250,28 +261,98 @@ var control = new dali.Control( "Control" );
control.background =
{
rendererType : "image",
- imageUrl : "path-to-image.jpg"
+ url : "path-to-image.jpg"
};
~~~
___________________________________________________________________________________________________
-## N-Patch Renderer {#n-patch-renderer}
+### N-Patch {#n-patch-renderer}
Renders an n-patch or a 9-patch image into the control's quad.
-### Properties Supported
+#### Properties Supported
-**RendererType:** "nPatch"
+**RendererType:** "image"
| Property Name | Type | Required | Description |
|---------------|:-------:|:--------:|----------------------------------|
-| imageUrl | STRING | Yes | The URL of the n-patch image. |
+| url | STRING | Yes | The URL of the n-patch image. |
| borderOnly | BOOLEAN | No | If true, only draws the borders. |
-### Usage
+#### Usage
+
+~~~{.cpp}
+// C++
+Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
+
+Dali::Property::Map map;
+
+map[ "rendererType" ] = "image";
+map[ "url" ] = "path-to-image.9.png";
+
+control.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map );
+~~~
+
+~~~{.js}
+// JavaScript
+var control = new dali.Control( "Control" );
+
+control.background =
+{
+ rendererType : "image",
+ url : "path-to-image.9.png"
+};
+~~~
+
+___________________________________________________________________________________________________
+
+### SVG {#svg-renderer}
+
+Renders a svg image into the control's quad.
+
+#### Features: SVG Tiny 1.2 specification
+
+**supported:**
+
+ * basic shapes
+ * paths
+ * solid color fill
+ * gradient color fill
+ * solid color stroke
+
+**not supported:**
+
+ * gradient color stroke
+ * dash array stroke
+ * view box
+ * text
+ * clip path
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+#### Properties Supported
+
+**RendererType:** "image"
+
+| Property Name | Type | Required | Description |
+|---------------|:-------:|:--------:|----------------------------------|
+| url | STRING | Yes | The URL of the SVG image. |
+
+#### Usage
~~~{.cpp}
// C++
@@ -279,9 +360,10 @@ Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
Dali::Property::Map map;
-map[ "rendererType" ] = "nPatch";
-map[ "imageUrl" ] = "path-to-image.9.png";
+map[ "rendererType" ] = "image";
+map[ "url" ] = "path-to-image.svg";
+control.SetSize( 200.f, 200.f );
control.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map );
~~~
@@ -291,8 +373,8 @@ var control = new dali.Control( "Control" );
control.background =
{
- rendererType : "nPatch",
- imageUrl : "path-to-image.9.png"
+ rendererType : "image",
+ url : "path-to-image.svg"
};
~~~
___________________________________________________________________________________________________