X-Git-Url: http://review.tizen.org/git/?a=blobdiff_plain;f=docs%2Fcontent%2Fshared-javascript-and-cpp-documentation%2Fvisuals.md;h=eaaaed53a721707071626d8cd0ec3a9b5f0a5d47;hb=dc256c60aaab03a8d7319b9257549d32f6a5b22d;hp=457d8e1312e12c981fe00fb9e3eff7e54ceb0223;hpb=69c1b01cea4af86aa3e5ba0087485c9bd76942ca;p=platform%2Fcore%2Fuifw%2Fdali-toolkit.git diff --git a/docs/content/shared-javascript-and-cpp-documentation/visuals.md b/docs/content/shared-javascript-and-cpp-documentation/visuals.md index 457d8e1..eaaaed5 100644 --- a/docs/content/shared-javascript-and-cpp-documentation/visuals.md +++ b/docs/content/shared-javascript-and-cpp-documentation/visuals.md @@ -30,7 +30,7 @@ Visuals have a **transform** field in the property map to allow layouting within | Dali::Toolkit::Visual::Transform::Property::OFFSET | offset | VECTOR2 | No | The offset of the visual. | | Dali::Toolkit::Visual::Transform::Property::SIZE | size | VECTOR2 | No | The size of the visual. | | Dali::Toolkit::Visual::Transform::Property::OFFSET_SIZE_MODE | offsetSizeMode | VECTOR4 | No | Whether the size or offset components are Relative or Absolute [More info](@ref offset-size-mode)| -| Dali::Toolkit::Visual::Transform::Property::ORIGIN | origin | INTEGER or STRING | No | The origin of the visual within the control's area. [More info](@ref align-type)] | +| Dali::Toolkit::Visual::Transform::Property::ORIGIN | origin | INTEGER or STRING | No | The origin of the visual within the control's area. [More info](@ref align-type) | | Dali::Toolkit::Visual::Transform::Property::ANCHOR_POINT | anchorPoint | INTEGER or STRING | No | The anchor point of the visual. [More info](@ref align-type)| @@ -282,6 +282,7 @@ Depending on the extension of the image, a different visual is provided to rende + [Normal (Quad)](@ref image-visual) + [N-Patch](@ref n-patch-visual) + [SVG](@ref svg-visual) + + [Animated Image]( @ref animated-image-visual ) ___________________________ @@ -440,6 +441,45 @@ control.background = url : "path-to-image.svg" }; ~~~ + +___________________________________________________________________________________________________ + +## Animated Image Visual {#animated-image-visual} + +Renders an animated image into the visual's quad geometry. Currently, only the GIF format is supported. + +![ ](../assets/img/visuals/animated-image-visual.gif) +![ ](animated-image-visual.gif) + +#### Properties Supported + +**VisualType:** Dali::Toolkit::Visual::IMAGE, "IMAGE" + +| Property | String | Type | Required | Description | +|-------------------------------------------|--------|:-------:|:--------:|----------------------------------| +| Dali::Toolkit::ImageVisual::Property::URL | url | STRING | Yes | The URL of the animated image. | + +#### Usage + +~~~{.cpp} +// C++ +Dali::Toolkit::Control control = Dali::Toolkit::Control::New(); + +control.SetProperty( Control::Property::BACKGROUND, + Property::Map().Add( Visual::Property::TYPE, Dali::Toolkit::Visual::IMAGE ) + .Add( Dali::Toolkit::ImageVisual::Property::URL, "path-to-image.gif" ) ); +~~~ + +~~~{.js} +// JavaScript +var control = new dali.Control( "Control" ); + +control.background = +{ + visualType : "IMAGE", + url : "path-to-image.gif" +}; +~~~ ___________________________________________________________________________________________________ ## Border Visual {#border-visual}