X-Git-Url: http://review.tizen.org/git/?a=blobdiff_plain;f=docs%2Fcontent%2Fshared-javascript-and-cpp-documentation%2Fcontrol-renderers.md;h=1e796563ffc16cf25c4c680adcb01ed4c62c523a;hb=2194846d573d4c38d9f3a9fca0a5f47edd359959;hp=43f0d16d9e440571925c80e135c68288404ca67b;hpb=1acdb36279de888dcef999e0e0e1460babdd983a;p=platform%2Fcore%2Fuifw%2Fdali-toolkit.git 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..1e79656 100644 --- a/docs/content/shared-javascript-and-cpp-documentation/control-renderers.md +++ b/docs/content/shared-javascript-and-cpp-documentation/control-renderers.md @@ -12,9 +12,10 @@ 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) + + [Mesh](@ref mesh-renderer) + + [Primitive](@ref primitive-renderer) Controls can provide properties that allow users to specify the renderer type. Setting renderer properties are done via a property map. @@ -31,11 +32,11 @@ Renders a solid color to the control's quad. ### Properties Supported -**RendererType:** "color" +**RendererType:** "COLOR" | Property Name | Type | Required | Description | |---------------|:-------:|:--------:|---------------------------| -| blendColor | VECTOR4 | Yes | The solid color required. | +| mixColor | VECTOR4 | Yes | The solid color required. | ### Usage @@ -44,8 +45,8 @@ Renders a solid color to the control's quad. Dali::Toolkit::Control control = Dali::Toolkit::Control::New(); Dali::Property::Map map; -map[ "rendererType" ] = "color"; -map[ "blendColor" ] = Color::RED; +map[ "rendererType" ] = "COLOR"; +map[ "mixColor" ] = Color::RED; control.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map ); ~~~ @@ -56,8 +57,8 @@ var control = new dali.Control( "Control" ); control.background = { - rendererType : "color", - blendColor : dali.COLOR_RED + rendererType : "COLOR", + mixColor : dali.COLOR_RED }; ~~~ ___________________________________________________________________________________________________ @@ -74,20 +75,20 @@ Both Linear and Radial gradients are supported. ### Properties Supported -**RendererType:** "gradient" +**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. | +| [units](@ref gradient-renderer-units) | STRING | No | *OBJECT_BOUNDING_BOX* or *USER_SPACE*. Default: *OBJECT_BOUNDING_BOX*. | +| [spreadMethod](@ref gradient-renderer-spread-method) | STRING | No | *PAD*, *REFLECT* or *REPEAT*. 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} @@ -95,10 +96,10 @@ Defines the coordinate system for the attributes: + Start (x1, y1) and End (x2 and y2) points of a line if using a linear gradient. + Center point (cx, cy) and radius (r) of a circle if using a radial gradient. -| Value | Description | -|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------| -| objectBoundingBox | *Default*. Uses the normals for the start, end & center points, i.e. top-left is (-0.5, -0.5) and bottom-right it (0.5, 0.5). | -| userSpace | Uses the user coordinates for the start, end & center points, i.e. in a 200 by 200 control, top-left is (0, 0) and bottom-right is (200, 200). | +| Value | Description | +|---------------------|------------------------------------------------------------------------------------------------------------------------------------------------| +| OBJECT_BOUNDING_BOX | *Default*. Uses the normals for the start, end & center points, i.e. top-left is (-0.5, -0.5) and bottom-right is (0.5, 0.5). | +| USER_SPACE | Uses the user coordinates for the start, end & center points, i.e. in a 200 by 200 control, top-left is (0, 0) and bottom-right is (200, 200). | ### Spread Method {#gradient-renderer-spread-method} @@ -106,9 +107,9 @@ Indicates what happens if the gradient starts or ends inside the bounds of the t | Value | Description | |---------|------------------------------------------------------------------------------------------------------| -| pad | *Default*. Uses the terminal colors of the gradient to fill the remainder of the quad. | -| reflect | Reflect the gradient pattern start-to-end, end-to-start, start-to-end etc. until the quad is filled. | -| repeat | Repeat the gradient pattern start-to-end, start-to-end, start-to-end until the quad is filled. | +| PAD | *Default*. Uses the terminal colors of the gradient to fill the remainder of the quad. | +| REFLECT | Reflect the gradient pattern start-to-end, end-to-start, start-to-end etc. until the quad is filled. | +| REPEAT | Repeat the gradient pattern start-to-end, start-to-end, start-to-end etc. until the quad is filled. | ### Usage @@ -118,9 +119,9 @@ Indicates what happens if the gradient starts or ends inside the bounds of the t 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[ "rendererType" ] = "GRADIENT"; +map[ "startPosition" ] = Vector2( 0.5f, 0.5f ); +map[ "endPosition" ] = Vector2( -0.5f, -0.5f ); Dali::Property::Array stopOffsets; stopOffsets.PushBack( 0.0f ); @@ -128,7 +129,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 +137,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 ); ~~~ @@ -147,11 +148,11 @@ 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 : [ + rendererType : "GRADIENT", + 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 ], @@ -167,9 +168,9 @@ control.background = 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[ "rendererType" ] = "GRADIENT"; +map[ "center" ] = Vector2( 0.5f, 0.5f ); +map[ "radius" ] = 1.414f; Dali::Property::Array stopOffsets; stopOffsets.PushBack( 0.0f ); @@ -177,7 +178,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 +186,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 ); ~~~ @@ -196,11 +197,11 @@ 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 : [ + rendererType : "GRADIENT", + 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,34 +212,46 @@ 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. + ![ ](../assets/img/renderers/image-renderer.png) ![ ](renderers/image-renderer.png) -### Properties Supported +#### Properties Supported -**RendererType:** "image" +**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. | +| Property Name | Type | Required | Description | +|------------------------------------------------------|:--------:|:--------:|----------------------------------------------------------------------------------------------------------------| +| 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_FILTER* 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++ Dali::Toolkit::Control control = Dali::Toolkit::Control::New(); Dali::Property::Map map; -map[ "rendererType" ] = "image"; -map[ "imageUrl" ] = "path-to-image.jpg"; +map[ "rendererType" ] = "IMAGE"; +map[ "url" ] = "path-to-image.jpg"; control.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map ); ~~~ @@ -249,29 +262,29 @@ var control = new dali.Control( "Control" ); control.background = { - rendererType : "image", - imageUrl : "path-to-image.jpg" + rendererType : "IMAGE", + 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. ![ ](../assets/img/renderers/n-patch-renderer.png) ![ ](renderers/n-patch-renderer.png) -### 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++ @@ -279,8 +292,8 @@ 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.9.png"; control.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map ); ~~~ @@ -291,8 +304,79 @@ var control = new dali.Control( "Control" ); control.background = { - rendererType : "nPatch", - imageUrl : "path-to-image.9.png" + 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 + +