[JUCE API] Costomizing the Rotary Slide(1)

First of all, I devided the section of the rotary slide, in order to draw the Knob, dial, track and the stuffs like that.

1. BoundSlider

void MyLookAndFeel::drawRotarySlider (juce::Graphics& g,
                                       int x, int y, int width, int height,
                                       float sliderPosProportional,
                                       float rotaryStartAngle,
                                       float rotaryEndAngle,
                                       juce::Slider& inSlider)
{
    // 1. boundlocal
    const juce::Rectangle<float> boundSlider (x, y, width, height);
    
    g.setColour(juce::Colours::red);
    g.drawRect(boundSlider);
}

• A boundSlider was created bades on the default size from the pure virtual function drawRotarySlider().
• As functions of juce::Graphics's class, setcolour() and drawRect() set the graphic's color and draw the rectangle.

2. BoundSquare

    //2. boundSquare
    const float length = width > height ? height : width;
    const float lengthSquare = length * 0.85f;
    
    const juce::Rectangle<float> boundSquare = boundSlider.withSizeKeepingCentre(lengthSquare, lengthSquare);
    g.setColour(juce::Colours::green);
    g.drawRect(boundSquare);

• BoundSlider isn't a perfect square, the shorter side is used to make a new perfect square (reduced to 85%)
• Juce::Rectangle's funcion withSizeKeepingCenter() keep the center of the input rectangle and make a new rectangle based on the input length.

3. BoundKnob

// 3. boundKnob
    const juce::Rectangle<float> boundKnob = boundSquare.reduced(boundSquare.getWidth() * 0.15f);
    g.setColour(juce::Colours::blue);
    g.drawRect(boundKnob);

• This area invovles only knob.
• Juce::Rectangle's funcion reduced() crates the new rectangle that is only modified the scale and kept the center of rectangle.

4. DropShadow

    // 4. drobShadow
    juce::Path path;
    path.addEllipse(boundKnob);
    
    juce::DropShadow dropshadow(MyColors::RotaryKnob::dropShadow, 10.0f, {0,3});
    dropshadow.drawForPath(g, path);

• Juce::Path represents a drawable shape, which is made of lines and curves.
• Juce::DropShadow's constructor takes the parameter in order of color, blury radius and offset.
• I set the DropShadow's offet to add 3 units along the Y-axis.

---

	g.setColour(MyColors::RotaryKnob::outline);
    g.fillEllipse(boundKnob);

• As a using FillEllipse(), I made a circle that is inscribed in a rectangle.

5. Gradient

    // 5. Gradient
    const juce::Rectangle<float> boundInner = boundKnob.reduced(boundKnob.getWidth() * 0.05f);
    
    const juce::ColourGradient gradient (MyColors::RotaryKnob::gradientTop, 0.0f, boundInner.getY(),
                                         MyColors::RotaryKnob::gradientBottom, 0.0f, boundInner.getBottom(), false);
    
    g.setGradientFill(gradient);
    g.fillEllipse(boundInner);

• Juce::ColorGradient's constructor takes some parameters that defines a gradient by specifing the start and end colors, their positions, whether it's linear or radial.
• SetGradientFill() as similar as setColour(), but it takes the gradient.