How do I display an image in App Designer and plot lines on top?

143 views (last 30 days)
I am working on an app using app designer. I need to create a few line objects inside an image. And I need to turn those lines on/off, change color, etc. Can you help?

Accepted Answer

MathWorks Support Team
MathWorks Support Team on 10 Jan 2020
To display your image in the app, use the "imshow" function, with its "Parent" property set to the target axes:
Next, use the "plot" function to plot your lines on the same axes as the image. Use the "hold" on/off commands before and after plotting to make sure your image doesn't disappear:
If you want your lines to be interactive rather than static, you can use a Line object, which allows the user to click/drag/edit the line _after _the app is run:
I have created a short example in an MLAPP file attached below. Here is the app's StartupFcn:
%display image on axes
img = imread('cameraman.tif');
imshow(img,'Parent',app.UIAxes);
hold(app.UIAxes,"on")
%remove title and axes labels
title(app.UIAxes,"");
xlabel(app.UIAxes,"");
ylabel(app.UIAxes,"");
%plot two diagonal lines on image
imgHeight = size(img,1);
imgWidth = size(img,2);
plot(app.UIAxes,0:imgWidth,0:imgHeight,'b','LineWidth',5);
plot(app.UIAxes,0:imgWidth,imgHeight:-1:0,'r','LineWidth',5);
hold(app.UIAxes,"off")
%add interactive Line object
images.roi.Line(app.UIAxes,'Color','green','LineWidth',5,...
'Position',[10 150; 150 200]);
Finally, if you want to change your lines' visibility and color, save a handle to the lines when plotting them. You can then alter the "Visible" and "Color" properties elsewhere in your code:
If you need to access these lines outside the StartupFcn, save the handles as properties of the class and access them using the "app.line1Handle" syntax in other functions.

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!