Clear Filters
Clear Filters

Drawing on UI Axes in MATLAB app designer

22 views (last 30 days)
I am trying to figure out how a user can draw on Axes in app designer using their mouse. The app just has a button labelled "Draw" and an Axes.
When the user clicks "Draw" they should be allowed to draw something on the axis. I will want to implement another button that says "Finished Drawing" where the user can no longer edit their drawing and also another button "Clear" where they can erase what they have drawn.
I have tried various things but none of them allow me to use my mouse to draw on the axes.
I'm also not sure what needs to be defined as a function and what needs to be a callback for the button/ axis.
I have tried to use this code but it doesn't work.
% Button pushed function: DrawButton
function DrawButtonPushed(app, event)
app.DrawButton.ButtonPushedFcn = @(btn,event) drawOnAxes(app);
% Button down function: UIAxes
function UIAxesButtonDown(app, event)
app.axes1.ValueChangedFcn = @(src, event) drawOnAxes(app.UIAxes);
function drawOnAxes(app)
% Enable drawing on the UI Axes
hold(app.UIAxes, 'on');
% Listen for mouse button down event
app.UIAxes.ButtonDownFcn = @(ax,event) startDrawing(ax);
function startDrawing(ax)
% Get the current point where the mouse button was pressed
currentPoint = ax.CurrentPoint(1, 1:2);
% Create a line object
line(ax, 'XData', currentPoint(1), 'YData', currentPoint(2), 'Color', 'r');
% Listen for mouse movement event
ax.WindowButtonMotionFcn = @(ax,event) continueDrawing(ax);
% Listen for mouse button up event
ax.WindowButtonUpFcn = @(ax,event) stopDrawing(ax);
function continueDrawing(ax)
% Get the current point where the mouse is
currentPoint = ax.CurrentPoint(1, 1:2);
% Get the line object
lineObj = findobj(ax, 'Type', 'line');
% Update the line object with the current point
set(lineObj, 'XData', [get(lineObj, 'XData'), currentPoint(1)], 'YData', [get(lineObj, 'YData'), currentPoint(2)]);
function stopDrawing(ax)
% Remove the mouse movement and button up listeners
ax.WindowButtonMotionFcn = '';
ax.WindowButtonUpFcn = '';

Accepted Answer

Voss on 29 Mar 2024
Here's a simple demo app you can use to draw.
After clicking the Draw button, left-click-and-drag on the axes to draw in black, or right-click-and-drag to draw in red.
Play with it and look at the code to see how it works.
Gabriela on 29 Mar 2024
Great thank you!
If I wanted to allow the user to draw with more colours, would this be possible using the "radio button group" component?
Voss on 29 Mar 2024
You're welcome!
Sure, you can have several pre-set colors and associate each color to a radiobutton in a buttongroup.
Another option would be to use the built-in MATLAB color selector tool uisetcolor to present the user with lots of colors to choose from:

Sign in to comment.

More Answers (2)

Image Analyst
Image Analyst on 28 Mar 2024
There is a family of "draw" functions, like drawpolygon, drawfreehand, drawline, etc. Use one of them. See attached demos if you need an example.

Mario Malic
Mario Malic on 28 Mar 2024
I made an example, adapted from Adam's answer.
I am a little bit confused by your code, your procedure makes sense and is better in terms of clarity. But you are actually defining the callback
app.DrawButton.ButtonPushedFcn = @(btn,event) drawOnAxes(app);
instead of calling it. You should create a callback, by right clicking on the button component and just write this in it
do the same for the other callbacks.


Find more on Migrate GUIDE Apps in Help Center and File Exchange

Community Treasure Hunt

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

Start Hunting!