110 lines
3.6 KiB
Plaintext
110 lines
3.6 KiB
Plaintext
~~Title: Image Widget PG~~
|
|
{{page>widgets_index}}
|
|
----
|
|
===== Image Widgets =====
|
|
{{ :widgets_image_tree.png }}{{ :widgets_image.png }}
|
|
|
|
The image widget can load and display an image from a disk file or a memory
|
|
region.
|
|
|
|
=== Table of Contents ===
|
|
|
|
* [[#Adding_an_Image|Adding a Image]]
|
|
* [[#Configuring_Image_Widget|Configuring Image Widget]]
|
|
* [[#Using_Image_Callbacks|Using Image Callbacks]]
|
|
|
|
=== Related Info ===
|
|
|
|
* [[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Image.html|Image Widget API]]
|
|
* [[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_image.html|An Image Example]]
|
|
|
|
==== Adding an Image ====
|
|
|
|
This object is created with ''elm_image_add()''.
|
|
|
|
<code c>
|
|
Evas_Object *image = elm_image_add(parent);
|
|
</code>
|
|
|
|
==== Configuring Image Widget ====
|
|
|
|
Various properties of the image can be tuned. First, we disable elementary
|
|
scaling so that the image does not scale but resizes on both directions.
|
|
|
|
<code c>
|
|
elm_image_no_scale_set(image, EINA_TRUE);
|
|
elm_image_resizable_set(image, EINA_TRUE, EINA_TRUE);
|
|
</code>
|
|
|
|
When scaling images, the smooth scaling algorithm can be used. It provides a
|
|
better quality image but is slower than the default algorithm.
|
|
|
|
<code c>
|
|
elm_image_smooth_set(image, EINA_TRUE);
|
|
</code>
|
|
|
|
Preloading is used to load images without blocking the user interface. This
|
|
preserves the reactivity of the user experience. The image is loaded in a
|
|
thread. It can be disabled if desired.
|
|
|
|
<code c>
|
|
elm_image_preload_disabled_set(image, EINA_TRUE);
|
|
</code>
|
|
|
|
The image can be rotated or flipped. Here we rotate our image 180 degrees.
|
|
|
|
<code c>
|
|
elm_image_orient_set(image, ELM_IMAGE_ROTATE_180);
|
|
</code>
|
|
|
|
The following orientations are available:
|
|
|
|
* ''ELM_IMAGE_ORIENT_0'': No orientation change
|
|
* ''ELM_IMAGE_ROTATE_90'': Rotate the image 90 degrees clockwise
|
|
* ''ELM_IMAGE_ROTATE_180'': Rotate the image 180 degrees clockwise
|
|
* ''ELM_IMAGE_ROTATE_270'': Rotate the image 90 degrees counter-clockwise
|
|
* ''ELM_IMAGE_FLIP_HORIZONTAL'': Flip the image horizontally
|
|
* ''ELM_IMAGE_FLIP_VERTICAL'': Flip the image vertically
|
|
* ''ELM_IMAGE_FLIP_TRANSPOSE'': Flip the image along the bottom-left to top-right line
|
|
* ''ELM_IMAGE_FLIP_TRANSVERSE'': Flip the image along the top-left to bottom-right line
|
|
|
|
If we want to keep the original aspect ration when resizing the image, we must
|
|
define how the image fits into the object's area.
|
|
|
|
<code c>
|
|
// Tell the image to keep original aspect ratio
|
|
elm_image_aspect_fixed_set(image, EINA_TRUE);
|
|
// Then let the image fit the entire object
|
|
elm_image_fill_outside_set(image, EINA_TRUE);
|
|
</code>
|
|
|
|
In this configuration, part of the image may go outside the object. If
|
|
''elm_image_fill_outside_set'' is set to ''EINA_FALSE'', the image stays inside the
|
|
limits of the parent object.
|
|
|
|
==== Using Image Callbacks ====
|
|
|
|
The image widget emits the signals below:
|
|
|
|
* ''"drop"'': The user drops an image typed object onto the object in question - the event info argument is the path to that image file
|
|
* ''"clicked"'': The user clicks the image. event_info is NULL.
|
|
|
|
Here is how to register a callback when a user clicks on the image:
|
|
|
|
<code c>
|
|
evas_object_smart_callback_add(image, "clicked", _clicked_cb, data);
|
|
|
|
// Callback function for the "clicked" signal
|
|
// This callback is called when the image is clicked
|
|
static void
|
|
_clicked_cb(void *data, Evas_Object *obj, void *event_info)
|
|
{
|
|
printf("Image clicked\n");
|
|
}
|
|
</code>
|
|
|
|
//**__[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_image.html|An Image Example]]__**//
|
|
\\
|
|
----
|
|
{{page>widgets_index}}
|