How do I replace a button with an icon in App Designer?

Question

Niraj Desai 2023-5-2

0
链接

此问题的直接链接

https://ww2.mathworks.cn/matlabcentral/answers/1956704-how-do-i-replace-a-button-with-an-icon-in-app-designer

回答： Amit Dhakite 2023-8-11

In App Designer, I place a button that users can press to get more information. But rather than the standard App Designer button (a rectangle with rounded corners), I would like to have a circle around a question mark. I can select Icon in the Button menu to insert a circled question mark PNG, but it is still encased in a rectangle. Is there a way of getting rid of the rectangle?

2 个评论
显示无隐藏无

Jon 2023-5-2

This has been asked before. Sounds like you can't change the shape of a button.

Please see https://www.mathworks.com/matlabcentral/answers/1580009-use-icons-of-different-shapes-for-push-button-in-appdesigner

but as @Sean de Wolski suggest there

"You could use a uiimage instead. Then set it's ImageClickedFcn instead of ButtonPushedFcn callback"

Niraj Desai 2023-5-2

Thanks for pointing that msg out. I'll try that.

请先登录，再进行评论。

请先登录，再回答此问题。

Answer 1

Amit Dhakite 2023-8-11

0
链接

此回答的直接链接

https://ww2.mathworks.cn/matlabcentral/answers/1956704-how-do-i-replace-a-button-with-an-icon-in-app-designer#answer_1286367

在 MATLAB Online 中打开

Hi Niraj,

To use a circular image as a button, and to avoid the outer rectangular covering, you can follow the steps mentioned below inside the callback function associated with the click:

Extract the x and y coordinates of the mouse click.
Initialize 3 variables, “centerX” and “centerY” representing the center, and “radius” representing the radius of the circular image.
Calculate the distance between the mouse clicked position and the center of the circle.
If the distance is smaller than the radius of the circle, it means that the mouse is clicked inside the circle, and then you can implement the desired functionality there.

Please refer to the code shown below to implement the above mentioned functionality:

% Get the coordinates of the click
rpoint = get(app.UIFigure, 'CurrentPoint'); 
clickX = rpoint(1); 
clickY = rpoint(2);
centerX = ;  % x-coordinate of the circular image's center 
centerY = ;  % y-coordinate of the circular image's center 
radius = ;    % Radius of the circular image 
distance = sqrt((clickX - centerX)^2 + (clickY - centerY)^2); 
if distance <= radius 
    % Desired functionality
end 