How to create a transparent, rectangular patch with rounded corners?

It would be helpful to create a transparent, rectangular patch with rounded corners. This could be acheived with something like this:

h = rectangle('Position', [x1, y1, x2, y2], ...
                'Curvature', 0.2, ...
                'FaceColor', 'r', ...
                'EdgeColor', 'r');

Unfortunately, rectangle properties do not include FaceAlpha and EdgeAlpha. Patch objects do, so I thought that I could get the XData and YData properties of the rectangle object from which to create a patch object. No dice; wasn't able to find these properties.

Again, the desired features are: transparency + rounded corners + face color

[H W]

IN YOU FIGURE, you select the input rectange, open Attribute checker, set the facealpha. ok!

Answer 1

[Chris L'Esperance]

This seems like a relatively efficient way to build the polygon which can be plotted as a line or patch. If this is unneccesarily complex, please feel free to point out.

figure;
axis equal
hold on

X = [300, 600];
Y = [100, 200];
radius = 0.05;
edge_color = 'k';

% compute the dx
dx = X(1,2) - X(1,1);

% compute the dy
dy = Y(1,2) - Y(1,1);

% reduce X and Y by radius
X_reduced = [X(1,1) + (radius .* dx), ...
    X(1,2) - (radius .* dx)];

Y_reduced = [Y(1,1) + (radius .* dx), ...
    Y(1,2) - (radius .* dx)];

d_theta = pi/50;

theta = 0:d_theta:pi/2;

% initialize the complete series
x_rect = [];
y_rect = [];

% for each corner solve the circle equation
for vertex=1:4

    % start at top right vertex, the arc that we want to first will run
    % from 0 to pi/2 radians
    
    % we cycle through the vertices in a counter-clockwise sense so that
    % as we increment theta by pi/2, we arrive at the arc corresponding
    % to the rounded corner

    if (vertex == 1)
        % top right
        x = max(X_reduced); y = max(Y_reduced);
    elseif (vertex == 2)
        % top left
        x = min(X_reduced); y = max(Y_reduced);
    elseif (vertex == 3)
        % bottom left
        x = min(X_reduced); y = min(Y_reduced);
    elseif (vertex == 4)
        % bottom right
        x = max(X_reduced); y = min(Y_reduced);
    end

    % plot circle arc
    xunit = (radius .* dx) * cos(theta) + x;
    yunit = (radius .* dx) * sin(theta) + y;

    % add current sector to series
    x_rect = cat(2, x_rect, xunit);
    y_rect = cat(2, y_rect, yunit);

    % increment theta
    theta = theta + pi/2;

end

% close the polygon
x_rect = cat(2, x_rect, x_rect(1,1));
y_rect = cat(2, y_rect, y_rect(1,1));

plot(x_rect, y_rect, ...
    'Color', edge_color);

Answer 2

[Jon]

You can use the rectangle function if you give the color as a triple instead of a string and add a fourth argument which specifices the alpha. Here, the alpha is 0.7.

h = rectangle('Position', [x1, y1, x2, y2], ...
                'Curvature', 0.2, ...
                'FaceColor', [1, 0, 0, 0.7], ...
                'EdgeColor', [1, 0, 0, 0.7]);

[Santiago Vázquez]

Thank you very much, this works perfect for me.

[Carlos Herrera]

This worked great. Thank you!

Answer 3

[Jan]

A rectangle object does not have XData and YData properties and it does not allow to set the transparency by Alpha blending. This means clearly, that you cannot use rectangle to solve your problem, although it looks almost like you want it.

All you need is to define the XData and YData according to your inputs. The equations for the rounded corners can be obtained by some simple equations. I'm not sure, how the "Curvature" of rectangle objects is defined. It should be easy to find the required circles, but it is a tedius work.

[Chris L'Esperance]

Thanks! Getting confirmation that there wasn't an obvious solution was helpful.

Answer 4

[Walter Roberson]

See http://mathworld.wolfram.com/Superellipse.html

Answer 5

[H W]

IN YOU FIGURE, you select the input rectange, open Attribute checker, set the facealpha. ok!

[Walter Roberson]

rectangle() objects do not have a FaceAlpha property; https://www.mathworks.com/help/matlab/ref/matlab.graphics.primitive.rectangle-properties.html