*
* @code
* Property::Map imageProperty;
- * imageProperty.Insert("imageUrl", "source-image-url.png");
- * imageProperty.Insert("imageFittingMode", "scaleToFill");
- * imageProperty.Insert("fitWidth", 240);
- * imageProperty.Insert("fitHeight", 240);
+ * imageProperty.Insert("url", "source-image-url.png");
+ * imageProperty.Insert("fittingMode", "SCALE_TO_FILL");
+ * imageProperty.Insert("desiredWidth", 240);
+ * imageProperty.Insert("desiredHeight", 240);
* Dali::Toolkit::ImageView myImageView = Dali::Toolkit::ImageView::New();
* myImageView.SetProperty( Control::Property::IMAGE, imageProperty);
*
* The fitting modes and a suggested use-case for each are as follows:
* <ol>
- * <li> "shrinkToFit" Full-screen image display: Limit loaded image resolution to device resolution but show all of image.
- * <li> "scaleToFill" Thumbnail gallery grid: Limit loaded image resolution to screen tile, filling whole tile but losing a few pixels to match the tile shape.
- * <li> "fitWidth" Image columns: Limit loaded image resolution to column.
- * <li> "fitHeight" Image rows: Limit loaded image resolution to row height.
+ * <li> "SHRINK_TO_FIT" Full-screen image display: Limit loaded image resolution to device resolution but show all of image.
+ * <li> "SCALE_TO_FILL" Thumbnail gallery grid: Limit loaded image resolution to screen tile, filling whole tile but losing a few pixels to match the tile shape.
+ * <li> "FIT_WIDTH" Image columns: Limit loaded image resolution to column.
+ * <li> "FIT_HEIGHT" Image rows: Limit loaded image resolution to row height.
* </ol>
*
* The dali-demo project contains a full example under
* <h2 class="pg">Changing the image</h2>
* The Image View can be changed by calling Dali::Toolkit::ImageView::SetImage methods or by changing the IMAGE property.
* @code
- * myImageActor.SetImage( newImage );
+ * myImageView.SetImage( newImage );
* @endcode
*
*/
*
* Property::Map customShader;
*
- * customShader.Insert(“vertex-shader”, VERTEX_SHADER); //if this is not set then the default ImageView vertex shader will be used
- * customShader.Insert(“fragment-shader”, FRAGMENT_SHADER); //if this is not set then the default ImageView fragment shader will be used
+ * customShader.Insert(“vertexShader”, VERTEX_SHADER); //if this is not set then the default ImageView vertex shader will be used
+ * customShader.Insert(“fragmentShader”, FRAGMENT_SHADER); //if this is not set then the default ImageView fragment shader will be used
*
* Property::Map map;
* map.Insert(“shader”, customShader);
* @code
* int X_SUB_DIVISIONS = 20;
* int Y_SUB_DIVISIONS = 20;
- * customShader.Insert(“subdivide-grid-x”, X_SUB_DIVISIONS); //optional number of times to subdivide the grid horizontally, don’t add if you just want to use a quad
- * customShader.Insert(“subdivide-grid-y”, Y_SUB_DIVISIONS); //optional number of times to subdivide the grid vertically, don’t add if you just want to use a quad
+ * customShader.Insert(“subdivideGridX”, X_SUB_DIVISIONS); //optional number of times to subdivide the grid horizontally, don’t add if you just want to use a quad
+ * customShader.Insert(“subdivideGridY”, Y_SUB_DIVISIONS); //optional number of times to subdivide the grid vertically, don’t add if you just want to use a quad
*
* //shader hints can be an array or a string
* optional array of shader hints
*
* Property::Array shaderHints;
- * shaderHints.PushBack(“requires-self-depth-test”);
- * shaderHints.PushBack(“output-is-transparent”);
- * shaderHints.PushBack(“output-is-opaque”);
- * shaderHints.PushBack(“modifies-geometry”);
+ * shaderHints.PushBack(“requiresSelfDepthTest”);
+ * shaderHints.PushBack(“outputIsTransparent”);
+ * shaderHints.PushBack(“outputIsOpaque”);
+ * shaderHints.PushBack(“modifiesGeometry”);
* customShader.Insert(“hints”, shaderHints);
*
* //or optional single shader hint as a string
- * //customShader.Insert(“hints”, “output-is-transparent”);
+ * //customShader.Insert(“hints”, “outputIsTransparent”);
* @endcode
*
* The value of a uniform can be set on the imageView
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)
Controls can provide properties that allow users to specify the renderer type.
~~~
___________________________________________________________________________________________________
-## 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++
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 );
~~~
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::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 );
~~~
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
+
<div style="width:300px">
</div>
+
-### Properties Supported
+#### Properties Supported
-**RendererType:** "svg"
+**RendererType:** "image"
| Property Name | Type | Required | Description |
|---------------|:-------:|:--------:|----------------------------------|
-| imageUrl | STRING | Yes | The URL of the SVG image. |
+| url | STRING | Yes | The URL of the SVG image. |
-### Usage
+#### Usage
~~~{.cpp}
// C++
Dali::Property::Map map;
-map[ "rendererType" ] = "svg";
-map[ "imageUrl" ] = "path-to-image.svg";
+map[ "rendererType" ] = "image";
+map[ "url" ] = "path-to-image.svg";
control.SetSize( 200.f, 200.f );
control.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map );
control.background =
{
- rendererType : "svg",
- imageUrl : "path-to-image.svg"
+ rendererType : "image",
+ url : "path-to-image.svg"
};
~~~
___________________________________________________________________________________________________
projects / platform / core / uifw / dali-toolkit.git / commitdiff