Draw gradient filled rectangle with rounded corners on one side

General JUCE discussion
1

Looking for tips on how to do this, please. If there was no gradient I would be able to just overlap a rounded and non-rounded rectangle.

Cheers.

2

You can create a path, draw the rectangle combining lineTo and addArc.
Once you are done, use fillPath():

void paint (Graphics& g) override
{
    const float radius = 10.0f;
    const float x = 10.0f;   // example values
    const float y = 10.0f;
    const float w = 100.0f;
    const float h = 100.0f;

    Path p;
    p.startNewSubPath (x, y);
    p.lineTo (x + w - radius, y);
    p.addArc (x + w - radius, y, radius, radius, 0.0f, MathConstants<float>::halfPi);
    p.lineTo (x + w, y + h - radius);
    p.addArc (x + w - radius, y + h - radius, radius, radius, MathConstants<float>::halfPi, MathConstants<float>::pi);
    p.lineTo (x, y + h);
    p.closeSubPath();
    g.setGradientFill ( /* ... */ );  // your job
    g.fillPath (p);
}

Not tested, good luck

4 Likes
3

Cheers Daniel, much appreciated.

4

There’s also a method in Path that lets you specify which corners to round

https://docs.juce.com/master/classPath.html#ae99d7f45ea1ba9481a82d9e8ac3b76ab

2 Likes
5

can you please let me know how to create button like given image. when i click it will fill the color on selected item.
button

6

You can achieve that out of the box. Just add a few Buttons (ie.: TextButton), place them near each other, and set their, ConnectedEdges, Toggle related stuff and a Radio Group ID with the same arbitrary number.

// ADD THESE TO YOUR CLASS MEMBERS
TextButton buttonA3;
TextButton buttonC5;

// AND THESE TO YOUR CONSTRUCTOR
buttonA3.setButtonText("A3");
buttonA3.setBounds(10, 10, 30, 30);
buttonA3.setConnectedEdges(Button::ConnectedEdgeFlags::ConnectedOnRight);
buttonA3.setClickingTogglesState(true);
buttonA3.setRadioGroupId(123);
buttonA3.setToggleState(true, NotificationType::dontSendNotification);
addAndMakeVisible(buttonA3);

buttonC5.setButtonText("C5");
buttonC5.setBounds(buttonA3.getRight(), 10, 30, 30);
buttonC5.setConnectedEdges(Button::ConnectedEdgeFlags::ConnectedOnLeft);
buttonC5.setClickingTogglesState(true);
buttonC5.setRadioGroupId(123);
addAndMakeVisible(buttonC5);
2 Likes
7

Thank You sir for your answers.
I also tried using this way.

for (int i = 0; i < 2; ++i)
{
auto* tb = ((i==0) ? addToList(new TextButton (“A3”)) : addToList (new TextButton (“C3”)));

         tb->setClickingTogglesState (true);
         tb->setRadioGroupId (34567);
         tb->setColour (TextButton::textColourOffId,  Colours::black);
         tb->setColour (TextButton::textColourOnId,   Colours::black);
         tb->setColour (TextButton::buttonColourId,   Colours::white);
         tb->setColour (TextButton::buttonOnColourId, Colours::orange);
         tb->setColour (TextButton::buttonNormal, Colours::white);

         tb->setBounds (80 + i * 80, 220, 80, 80);
         tb->setConnectedEdges (((i != 0) ? Button::ConnectedOnLeft : 0)
                                | ((i != 1) ? Button::ConnectedOnRight : 0));



         if (i == 0)
             tb->setToggleState (true, dontSendNotification);
     }

Can you please ask me the best way to set bounds for the buttons in center of an screen? and also i want to change the border color also. how can i do it?

8

To operate with Component Bounds in JUCE there are plenty of ways. For simple layout like this case I would use the “manual” way I mentioned before. You can find tons of helpful methods in the Rectangle class. For example:

// Create the overall maximum bounds
Retangle<int> buttonBounds(0, 0, 440, 80); 

 // Position the rect in the center of the parent Component
buttonBounds.setCentre(getLocalBounds().getCentre());

// Set the first button's bounds to the left half of the rect
btnLeft.setBounds(buttonBounds.removeFromLeft(buttonBounds.getWidth() / 2));

// Now buttonBounds contains the remaining (right) half, so just call
btnRight.setBounds(buttonBounds);

For more complex and/or responsive, dynamic layouts you can use the FlexBox or Grid classes, they’re implementing the according CSS rules, but are a bit trickier to work with.

And to change the look of your Button, there’s a concept, called LookAndFeel. Actually it’s a way to skin your Components. It contains all the actual drawing code, and the various Components (Buttons, Sliders, Labels, etc) call the appropriate methods on this LookAndFeel instance. This way you can replace the default LookAndFeel of any Component, or the overall default Look, with your own subclass. It sounds a bit confusing for the first time, but I found it a really nice way to decouple the actual look from the logic. And this way you can also let the user to choose his/her preferred “skin” runtime.

I suggest you to check the JuceDemo project, if you haven’t yet. It demonstrates all the JUCE features in a nice, easy to understand way.

Good luck! :wink:

9

Yes sir i got your point. For change the color of border or bounds, can you please post the method which i have to use it. i also applied LookAndFell_v4 class but unable to change the border of my code. thank you