フィルターのクリア

Imshow in App Designer (Image size doesn't fit)

41 ビュー (過去 30 日間)
Erdal Schranz
Erdal Schranz 2017 年 10 月 10 日
コメント済み: Francis Burton 2021 年 3 月 7 日
Hey Guys,
the size of imshow in app designer doesn't fit, when I start the application (see picture and code below). Is it possible, that the image have the same size as the UiAxes in app designer?
function startupFcn(app)
imshow('Flower.jpg','parent',app.UIAxes)
end
Thank you very much for your help. Best regards Erdal
  1 件のコメント
Varun Gunda
Varun Gunda 2017 年 10 月 16 日
Can you share more information on what exactly you are trying to do? The explanation is not clear.
May be this code helps you out in displaying image as you are looking for:
RGB = imread('Flower.jpg');
ax = uiaxes(app.UIFigure,'Position',[10 10 390 390]);
image(RGB,'Parent',ax);
set(ax,'visible','off');
Also, check the dimensions of the 'Flower.jpg' which gets reflected on the app.

サインインしてコメントする。

採用された回答

Duncan Lilley
Duncan Lilley 2017 年 10 月 18 日
Hello,
From my understanding of your question, you wish to display an image which will take up the entire space within the figure in an App Designer app. Consider the following code:
% Fill figure with axes and remove tick labels
app.UIAxes.Position = [0 0 app.UIFigure.Position(3:4)];
% Remove title, axis labels, and tick labels
title(app.UIAxes, []);
xlabel(app.UIAxes, []);
ylabel(app.UIAxes, []);
app.UIAxes.XAxis.TickLabels = {};
app.UIAxes.YAxis.TickLabels = {};
% Display image and stretch to fill axes
I = imshow('Flower.jpg', 'Parent', app.UIAxes, ...
'XData', [1 app.UIAxes.Position(3)], ...
'YData', [1 app.UIAxes.Position(4)]);
% Set limits of axes
app.UIAxes.XLim = [0 I.XData(2)];
app.UIAxes.YLim = [0 I.YData(2)];
This programmatically resizes and repositions the axes to fill the entire figure window. It then removes the axes title as well as the axis labels and tick labels for each axis, allowing the axes to fill the figure as much as possible.
Then, the image is displayed, and instructed to stretch to fill the axes by setting the 'XData' and 'YData' properties.
Finally, the limits of the axes are set so that no additional space is padded around the image.
If, instead of filling the entire figure, you just wish to fill the entire axes with the image, you should be able to just remove the first line.
  3 件のコメント
Syed Muhammad Ali Minhal
Syed Muhammad Ali Minhal 2021 年 1 月 30 日
your explanation has been very useful to me. Thanks again
% Fill figure with axes and remove tick labels
app.UIAxes.Position = [0 0 app.UIFigure.Position(3:4)];
% Remove title, axis labels, and tick labels
title(app.UIAxes, []);
xlabel(app.UIAxes, []);
ylabel(app.UIAxes, []);
app.UIAxes.XAxis.TickLabels = {};
app.UIAxes.YAxis.TickLabels = {};
% Display image and stretch to fill axes
I = imshow('Flower.jpg', 'Parent', app.UIAxes, ...
'XData', [1 app.UIAxes.Position(3)], ...
'YData', [1 app.UIAxes.Position(4)]);
% Set limits of axes
app.UIAxes.XLim = [0 I.XData(2)];
app.UIAxes.YLim = [0 I.YData(2)];
Daniel Dickinson
Daniel Dickinson 2021 年 2 月 23 日
@Duncan Lilley Thank you for your answer, you helped me figure out how to get my code to work.
However, I don't believe that what you posted above is exactly correct. In R2020a, a call to imshow appears to reset the TickLabels properties of the axes. That is, although I have set the labels to {} before calling imshow, they are reset to default values after the call and so the image still doesn't fill the whole available space.
This code worked for me in R2020a:
% Remove title and axis labels
title(app.UIAxes, []);
xlabel(app.UIAxes, []);
ylabel(app.UIAxes, []);
% Display image and stretch to fill axes
I = imshow('Flower.jpg', 'Parent', app.UIAxes, ...
'XData', [1 app.UIAxes.Position(3)], ...
'YData', [1 app.UIAxes.Position(4)]);
% Remove tick labels
app.UIAxes.XAxis.TickLabels = {};
app.UIAxes.YAxis.TickLabels = {};
% Set limits of axes
app.UIAxes.XLim = [0 I.XData(2)];
app.UIAxes.YLim = [0 I.YData(2)];
Can anyone help me understand why imshow resets the tick labels and if there is an option to stop it from doing so?

サインインしてコメントする。

その他の回答 (3 件)

Melinda Toth-Zubairi
Melinda Toth-Zubairi 2019 年 3 月 26 日
If your goal is just to display a static image, starting R2019a you can use the uiimage function to create an image component in your App Designer app.
See the following related answer for more information:
  3 件のコメント
Eric Sargent
Eric Sargent 2020 年 12 月 9 日
Royi, what is the limitation(s) you're running into?
Francis Burton
Francis Burton 2021 年 3 月 7 日
It isn't possible to capture mouse down events in a uiimage in App Designer apps, so clicking and dragging inside an image - e.g. to draw a rubber band box for selection of points in the image - isn't possible at the moment. WindowButtonDownFcn events are intercepted/filtered when the mouse is inside the image.
So one is obliged to use UIAxes instead. This doesn't intercept mouse events in the app figure window. However, drawing images using imshow is still problemmatic I have found, using the code above. Setting the size (in pixels) of the axes to that of the image doesn't result in one-to-one pixel correspondence i.e.truesize behaviour. There is still a border around the image itself, albeit a narrow one.
There may also be performance issues with UIAxes compared to (UI)Image. Changing the image and refreshing the display seems to be slower with imshow vs setting Image.ImageSource.

サインインしてコメントする。


Erdal Schranz
Erdal Schranz 2017 年 10 月 17 日
Dear Varun,
thank you for the answer. I have also tried your code but it doesn't work. Here is a new picture which should explain the problem better.
Design View:
Run Application:
The picture of the flower doesn't fit in the frame of the uiAxes. Is it possible, that the image automatically adjust to the whole frame, so no grey background is visible.
Best regards Erdal

Erdal Schranz
Erdal Schranz 2017 年 10 月 20 日
Dear Duncan,
thank you for the answer. This solution works fine :-)
Best regards Erdal

カテゴリ

Help Center および File ExchangeDevelop Apps Using App Designer についてさらに検索

Community Treasure Hunt

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

Start Hunting!

Translated by