X-Git-Url: http://review.tizen.org/git/?a=blobdiff_plain;f=docs%2Fcontent%2Fshared-javascript-and-cpp-documentation%2Fcontrol-renderers.md;h=010a385886b5f4e608f772e10521f837d9ad2e8d;hb=526ca8a3ad82b0a08c0f0580284f28f0d647098d;hp=2b1c27200b2f6a336b187d4282a07c29c6371140;hpb=6084b902e588a8ed1b8ec0dd7aacae8775006ef6;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 2b1c272..010a385 100644 --- a/docs/content/shared-javascript-and-cpp-documentation/control-renderers.md +++ b/docs/content/shared-javascript-and-cpp-documentation/control-renderers.md @@ -12,10 +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) - + [SVG](@ref svg-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. @@ -32,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 @@ -45,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 ); ~~~ @@ -57,8 +57,8 @@ var control = new dali.Control( "Control" ); control.background = { - rendererType : "color", - blendColor : dali.COLOR_RED + rendererType : "COLOR", + mixColor : dali.COLOR_RED }; ~~~ ___________________________________________________________________________________________________ @@ -75,18 +75,18 @@ Both Linear and Radial gradients are supported. ### Properties Supported -**RendererType:** "gradient" +**RendererType:** "GRADIENT" -| 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* | +| 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 *stopOffset* and *stopColor* arrays do not have the same number of elements, then the minimum of the two is used as the stop points. @@ -96,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} @@ -107,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 @@ -119,7 +119,7 @@ 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[ "rendererType" ] = "GRADIENT"; map[ "startPosition" ] = Vector2( 0.5f, 0.5f ); map[ "endPosition" ] = Vector2( -0.5f, -0.5f ); @@ -148,7 +148,7 @@ var control = new dali.Control( "Control" ); control.background = { - rendererType : "gradient", + rendererType : "GRADIENT", startPosition : [ 0.5, 0.5 ], endPosition : [ -0.5, -0.5 ], stopOffset : [ 0.0, 0.3, 0.6, 0.8, 1.0 ], @@ -168,7 +168,7 @@ control.background = Dali::Toolkit::Control control = Dali::Toolkit::Control::New(); Dali::Property::Map map; -map[ "rendererType" ] = "gradient"; +map[ "rendererType" ] = "GRADIENT"; map[ "center" ] = Vector2( 0.5f, 0.5f ); map[ "radius" ] = 1.414f; @@ -197,7 +197,7 @@ var control = new dali.Control( "Control" ); control.background = { - rendererType : "gradient", + rendererType : "GRADIENT", center : [ 0.5, 0.5 ], radius : 1.414, stopOffset : [ 0.0, 0.3, 0.6, 0.8, 1.0 ], @@ -212,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 ); ~~~ @@ -250,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++ @@ -280,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 ); ~~~ @@ -292,17 +304,35 @@ 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 Renderer {#svg-renderer} +### 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 +