This is machine translation

Translated by Microsoft
Mouseover text to see original. Click the button below to return to the English version of the page.

Note: This page has been translated by MathWorks. Click here to see
To view all translated materials including this page, select Country from the country navigator on the bottom of this page.

Image Properties

Control image component appearance and behavior

Images are UI components that allow you to display an picture, such as an icon or logo in your app. Image properties control the appearance and behavior of an image. Use dot notation to refer to a specific object and property.

uf = uifigure;
im = uiimage(uf);
im.ImageSource = 'peppers.png';

Image

expand all

Image source or file, specified as a file path or an m-by-n-by-3 truecolor image array. Supported image formats include JPEG, PNG, GIF, SVG, or m-by-n-by-3 truecolor image array.

For more information on truecolor image arrays, see Image Types.

Example: im = uiimage('ImageSource','peppers.png');

Example: im.ImageSource = 'C:\TEMP\ngc6543a.jpg';

Image scaling method, specified as one of the values listed in the table. Use this name-value pair argument to specify how you want your image to render within the component area.

The table also demonstrates each scale method with an example image. In the rendered image examples, the BackgroundColor property of the image component has been set to 'magenta'. The scaling behavior of SVG image files may vary based on how the file is defined.

ValueDescriptionExampleScales UpScales DownMaintains Aspect RatioClips Image
Original ImageRendered Image
'fit'Scales in any direction to display the image within the component area, and maintains aspect ratio without clipping.

YesYesYesNo
'fill'Scales in any direction to fill the component area, maintaining aspect ratio and clipping if necessary.

YesYesYesYes
'none'Uses the actual size of the image and maintains aspect ratio. If the component area is smaller than the image, the image is clipped.

NoNoYesYes
'scaledown'

Scales down and maintains aspect ratio without clipping.


If the original image is larger than the component area, the image scales down and renders as if the ScaleMethod was set to 'fit'. If the original image is smaller than the component area, the image does not scale down and renders as if the ScaleMethod was set to 'none'.

NoYesYesNo
'scaleup'

Scales up and maintains aspect ratio with clipping.


If the original image is smaller than the component area, the image scales up and renders as if the ScaleMethod was set to 'fit'. If the original image is larger than the component area, the image does not scale up and renders as if the ScaleMethod was set to 'none'.

YesNoYesYes
'stretch'Scales in any direction to fill the component area, without maintaining the aspect ratio and without clipping.

YesYesNoNo

Color

expand all

Background color, specified as an RGB triplet, a hexadecimal color code, or one of the color options listed in the table.

For a custom color, specify an RGB triplet or a hexadecimal color code.

  • An RGB triplet is a three-element row vector whose elements specify the intensities of the red, green, and blue components of the color. The intensities must be in the range [0,1]; for example, [0.4 0.6 0.7].

  • A hexadecimal color code is a character vector or a string scalar that starts with a hash symbol (#) followed by three or six hexadecimal digits, which can range from 0 to F. The values are not case sensitive. Thus, the color codes '#FF8800', '#ff8800', '#F80', and '#f80' are equivalent.

Alternatively, you can specify some common colors by name. This table lists the named color options, the equivalent RGB triplets, and hexadecimal color codes.

Color NameShort NameRGB TripletHexadecimal Color CodeAppearance
'red''r'[1 0 0]'#FF0000'

'green''g'[0 1 0]'#00FF00'

'blue''b'[0 0 1]'#0000FF'

'cyan' 'c'[0 1 1]'#00FFFF'

'magenta''m'[1 0 1]'#FF00FF'

'yellow''y'[1 1 0]'#FFFF00'

'black''k'[0 0 0]'#000000'

'white''w'[1 1 1]'#FFFFFF'

'none'Not applicableNot applicableNot applicableNo color

Here are the RGB triplets and hexadecimal color codes for the default colors MATLAB® uses in many types of plots.

RGB TripletHexadecimal Color CodeAppearance
[0 0.4470 0.7410]'#0072BD'

[0.8500 0.3250 0.0980]'#D95319'

[0.9290 0.6940 0.1250]'#EDB120'

[0.4940 0.1840 0.5560]'#7E2F8E'

[0.4660 0.6740 0.1880]'#77AC30'

[0.3010 0.7450 0.9330]'#4DBEEE'

[0.6350 0.0780 0.1840]'#A2142F'

Interactivity

expand all

Image visibility, specified as 'on' or 'off'. The Visible property determines whether the image is displayed on the screen. If the Visible property is set to 'off', the entire image component is hidden, but you can still set and access its properties.

To make your app start faster, set the Visible property to 'off' for all components that do not need to appear at startup.

Operational state of the image, specified as 'on' or 'off'.

  • 'on' — The image appears normal, and the app user can click the image, which triggers any ImageClickedFcn callback associated with it.

  • 'off' — The image appears dimmed, indicating that the app user cannot click the image, and that associated callbacks do not execute.

Tooltip, specified as a character vector, cell array of character vectors, string array, or 1-D categorical array. Use this property to display a message when the user hovers the pointer over the component at run time. The tooltip displays even when the component is disabled. To display multiple lines of text, specify a cell array of character vectors or a string array. Each element in the array becomes a separate line of text. If you specify this property as a categorical array, MATLAB uses the values in the array, not the full set of categories.

Position

expand all

Location and size of image component relative to the parent, specified as a four element vector of the form [left bottom width height]. This table describes each element in the vector.

ElementDescription
leftDistance from the inner left edge of the parent container to the outer left edge of the image component
bottomDistance from the inner bottom edge of the parent container to the outer bottom edge of the image component
widthDistance between the right and left outer edges of the image component
heightDistance between the top and bottom outer edges of the image component

The Position values are relative to the drawable area of the parent container. The drawable area is the area inside the borders of the container and does not include the area occupied by decorations such as a menu bar or title.

All measurements are in pixel units.

Location and size of image component, specified as a four element vector of the form [left bottom width height]. All measurements are in pixel units. This property value is identical to the Position property.

This property is read-only.

Location and size of image component, specified as a four element vector of the form [left bottom width height]. All measurements are in pixel units. This property value is identical to the Position property.

Horizontal alignment of the rendered image within the image component area, specified as 'center', 'left', or 'right'. The horizontal alignment is relative to the inside borders of the image component. Setting this property has no effect when the ScaleMethod property value is set to 'stretch'.

For example, the table shows rendered images for each HorizontalAlignment value, where the ScaleMethod property value is set to 'none' and the VerticalAlignment property has the default value, 'center'. You can implement many other combinations that are not shown here.

Horizontal Alignment ValueDescriptionRendered Image
'center'Left and right edges of the image are equally spaced from the inside-left and inside-right borders of the image component, respectively.

'left'Left edge of the image aligns with the inside-left border of the image component.

'right'Right edge of the image aligns with the inside-right border of the image component.

Vertical alignment of the rendered image within the image component area, specified as 'center', 'left', or 'right'. The vertical alignment is relative to the inside borders of the image component. Setting this property has no effect when the ScaleMethod property value is set to 'stretch'.

For example, the table shows rendered images for each VerticalAlignment value, where the ScaleMethod property value is set to 'none' and the HorizontalAlignment property has the default value, 'center'. You can implement many other combinations that are not shown here.

Vertical Alignment ValueDescriptionRendered Image
'center'Top and bottom edges of the image are equally spaced from the inside-top and inside-bottom borders of the image component, respectively.

'top'Top edge of the image aligns with the inside-top border of the image component.

'bottom'Bottom edge of the image aligns with the inside-bottom border of the image component.

Layout options, specified as an empty array GridLayoutOptions object. This property specifies options for components that are children of grid layout containers. If the image component is not a child of a grid layout container (for example, if it is a child of a figure or panel), then this property is empty and has no effect. However, if the image component is a child of a grid layout container, you can place the component in the desired row and column of the grid by setting the Row and Column properties on the GridLayoutOptions object.

For example, this code places an image component in the third row and second column of its parent grid.

g = uigridlayout([4 3]);
im = uiimage(g);
im.ImageSource = 'peppers.png';
im.ScaleMethod = 'fill';
im.Layout.Row = 3;
im.Layout.Column = 2;

To make the image span multiple rows or columns, specify the Row or Column property as a two-element vector. For example, this image spans columns 2 through 3.

im.Layout.Column = [2 3];

Callbacks

expand all

Image clicked callback, specified as one of these values:

  • A function handle.

  • A cell array in which the first element is a function handle. Subsequent elements in the cell array are the arguments to pass to the callback function.

  • A character vector containing a valid MATLAB expression (not recommended). MATLAB evaluates this expression in the base workspace.

This callback executes when the user clicks the image in the app.

This callback function can access specific information about the user's interaction with the image. MATLAB passes this information in an ImageClickedData object as the second argument to your callback function. In App Designer, the argument is called event. You can query the object's properties using dot notation. For example, event.Source returns the Image object that the user is interacting with to trigger the callback. The ImageClickedData object is not available to callback functions specified as character vectors.

The following table lists the properties of the ImageClickedData object.

PropertyValue
EventName'ImageClicked'
SourceComponent executing the callback

For more information about writing callbacks, see Write Callbacks in App Designer.

Object creation function, specified as one of these values:

  • Function handle.

  • Cell array in which the first element is a function handle. Subsequent elements in the cell array are the arguments to pass to the callback function.

  • Character vector containing a valid MATLAB expression (not recommended). MATLAB evaluates this expression in the base workspace.

For more information about specifying a callback as a function handle, cell array, or character vector, see Write Callbacks in App Designer.

This property specifies a callback function to execute when MATLAB creates the object. MATLAB initializes all property values before executing the CreateFcn callback. If you do not specify the CreateFcn property, then MATLAB executes a default creation function.

Setting the CreateFcn property on an existing component has no effect.

If you specify this property as a function handle or cell array, you can access the object that is being created using the first argument of the callback function. Otherwise, use the gcbo function to access the object.

Object deletion function, specified as one of these values:

  • Function handle.

  • Cell array in which the first element is a function handle. Subsequent elements in the cell array are the arguments to pass to the callback function.

  • Character vector containing a valid MATLAB expression (not recommended). MATLAB evaluates this expression in the base workspace.

For more information about specifying a callback as a function handle, cell array, or character vector, see Write Callbacks in App Designer.

This property specifies a callback function to execute when MATLAB deletes the object. MATLAB executes the DeleteFcn callback before destroying the properties of the object. If you do not specify the DeleteFcn property, then MATLAB executes a default deletion function.

If you specify this property as a function handle or cell array, you can access the object that is being deleted using the first argument of the callback function. Otherwise, use the gcbo function to access the object.

Callback Execution Control

expand all

Callback interruption, specified as 'on' or 'off'. The Interruptible property determines if a running callback can be interrupted.

There are two callback states to consider:

  • The running callback is the currently executing callback.

  • The interrupting callback is a callback that tries to interrupt the running callback.

Whenever MATLAB invokes a callback, that callback attempts to interrupt the running callback (if one exists). The Interruptible property of the object owning the running callback determines if interruption is allowed. The Interruptible property has two possible values:

  • 'on' — Allows other callbacks to interrupt the object's callbacks. The interruption occurs at the next point where MATLAB processes the queue, such as when there is a drawnow, figure, uifigure, getframe, waitfor, or pause command.

    • If the running callback contains one of those commands, then MATLAB stops the execution of the callback at that point and executes the interrupting callback. MATLAB resumes executing the running callback when the interrupting callback completes.

    • If the running callback does not contain one of those commands, then MATLAB finishes executing the callback without interruption.

  • 'off' — Blocks all interruption attempts. The BusyAction property of the object owning the interrupting callback determines if the interrupting callback is discarded or put into a queue.

Note

Callback interruption and execution behave differently in these situations:

  • If the interrupting callback is a DeleteFcn, CloseRequestFcn or SizeChangedFcn callback, then the interruption occurs regardless of the Interruptible property value.

  • If the running callback is currently executing the waitfor function, then the interruption occurs regardless of the Interruptible property value.

  • Timer objects execute according to schedule regardless of the Interruptible property value.

When an interruption occurs, MATLAB does not save the state of properties or the display. For example, the object returned by the gca or gcf command might change when another callback executes.

Callback queuing, specified as 'queue' or 'cancel'. The BusyAction property determines how MATLAB handles the execution of interrupting callbacks. There are two callback states to consider:

  • The running callback is the currently executing callback.

  • The interrupting callback is a callback that tries to interrupt the running callback.

Whenever MATLAB invokes a callback, that callback attempts to interrupt a running callback. The Interruptible property of the object owning the running callback determines if interruption is permitted. If interruption is not permitted, then the BusyAction property of the object owning the interrupting callback determines if it is discarded or put in the queue. These are possible values of the BusyAction property:

  • 'queue' — Puts the interrupting callback in a queue to be processed after the running callback finishes execution.

  • 'cancel' — Does not execute the interrupting callback.

This property is read-only.

Deletion status, returned as 'off' or 'on'. MATLAB sets the BeingDeleted property to 'on' when the DeleteFcn callback begins execution. The BeingDeleted property remains set to 'on' until the component object no longer exists.

Check the value of the BeingDeleted property to verify that the object is not about to be deleted before querying or modifying it.

Parent/Child

expand all

Parent container, specified as a Figure object created using the uifigure function, or one of its child containers: Tab, Panel, ButtonGroup, or GridLayout. If no container is specified, MATLAB calls the uifigure function to create a new Figure object that serves as the parent container.

Visibility of the object handle, specified as 'on', 'callback', or 'off'.

This property controls the visibility of the object in its parent's list of children. When an object is not visible in its parent's list of children, it is not returned by functions that obtain objects by searching the object hierarchy or querying properties. These functions include get, findobj, clf, and close. Objects are valid even if they are not visible. If you can access an object, you can set and get its properties, and pass it to any function that operates on objects.

HandleVisibility ValueDescription
'on'The object is always visible.
'callback'The object is visible from within callbacks or functions invoked by callbacks, but not from within functions invoked from the command line. This option blocks access to the object at the command-line, but allows callback functions to access it.
'off'The object is invisible at all times. This option is useful for preventing unintended changes to the UI by another function. Set the HandleVisibility to 'off' to temporarily hide the object during the execution of that function.

Identifiers

expand all

This property is read-only.

Type of graphics object, returned as 'uiimage'.

Object identifier, specified as a character vector or string scalar. You can specify a unique Tag value to serve as an identifier for an object. When you need access to the object elsewhere in your code, you can use the findobj function to search for the object based on the Tag value.

User data, specified as any MATLAB array. For example, you can specify a scalar, vector, matrix, cell array, character array, table, or structure. Use this property to store arbitrary data on an object.

If you are working in App Designer, create public or private properties in the app to share data instead of using the UserData property. For more information, see Share Data Within App Designer Apps.

Introduced in R2019a