JUCE学习笔记02-Slider与Rectangle的使用

JUCE学习笔记02——Slider与Rectangle的使用

知识点：

1、Slider类基础
2、Rectangle的更多用法

目标：

绘制能自适应窗口的Slider

内容：

一、简单绘制旋钮

创建Slider对象，并添加至组件

 private:
    	Slider dial1;
        JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainComponent)

MainComponent::MainComponent()
{
	addAndMakeVisible(dial1);
    setSize (600, 400);
}

设置Slider样式（这里使用旋钮）

MainComponent::MainComponent()
{
	setSize(600, 400);
	addAndMakeVisible(dial1);
	dial1.setSliderStyle(Slider::SliderStyle::Rotary); 
}

设置文本框

MainComponent::MainComponent()
{
	setSize(600, 400);
	addAndMakeVisible(dial1);
	dial1.setSliderStyle(Slider::SliderStyle::Rotary); 
     
     //设置文本框，参数分别是：文本框位置、是否可输入、宽度、高度
	dial1.setTextBoxStyle(Slider::TextBoxBelow, false, 100, 30);
}

设置Slider的位置

void MainComponent::resized()
{
	dial1.setBounds(getLocalBounds());
}

运行效果：

二、分割区域绘制多个旋钮

使用矩形分割4个区域，paint（）方法中绘制矩形查看

private:
	Rectangle<int> mainCptArea;  //组件划为一个大矩形
	Rectangle<int> leftUp;      //分4个小矩形区域
	Rectangle<int> leftDown;
	Rectangle<int> rightUp;
	Rectangle<int> rightDown;

void MainComponent::resized()
{
	mainCptArea = getLocalBounds();
	leftUp = mainCptArea.removeFromLeft(getWidth() / 2).removeFromTop(getHeight() / 2);
	mainCptArea = getLocalBounds();
	leftDown = mainCptArea.removeFromLeft(getWidth() / 2).removeFromBottom(getHeight() / 2);
	mainCptArea= getLocalBounds();
	rightUp = mainCptArea.removeFromRight(getWidth() / 2).removeFromTop(getHeight() / 2);
	mainCptArea = getLocalBounds();
	rightDown = mainCptArea.removeFromRight(getWidth() / 2).removeFromBottom(getHeight() / 2);
}

void MainComponent::paint (Graphics& g)
{	
	g.setColour(Colours::blue);
	g.drawRect(leftUp);
	g.setColour(Colours::red);
	g.drawRect(leftDown);
	g.setColour(Colours::green);
	g.drawRect(rightUp);
	g.setColour(Colours::yellow);
	g.drawRect(rightDown);
}

运行效果：

创建4个Slider

private:
	Slider dial1;
	Slider dial2;
	Slider dial3;
	Slider dial4;

设置Slider样式、文本框等并添加至组件中

MainComponent::MainComponent()
{
	setSize(600, 600);

	addAndMakeVisible(dial1);
	dial1.setSliderStyle(Slider::SliderStyle::Rotary); 
	dial1.setTextBoxStyle(Slider::TextBoxBelow, false, 100, 30);

	addAndMakeVisible(dial2);
	dial2.setSliderStyle(Slider::SliderStyle::Rotary);
	dial2.setTextBoxStyle(Slider::TextBoxBelow, false, 100, 30);

	addAndMakeVisible(dial3);
	dial3.setSliderStyle(Slider::SliderStyle::Rotary);
	dial3.setTextBoxStyle(Slider::TextBoxBelow, false, 100, 30);

	addAndMakeVisible(dial4);
	dial4.setSliderStyle(Slider::SliderStyle::Rotary);
	dial4.setTextBoxStyle(Slider::TextBoxBelow, false, 100, 30);
}

设置各个Slider位置

void MainComponent::resized()
{
	dial1.setBounds(leftUp);
	dial2.setBounds(leftDown);
	dial3.setBounds(rightUp);
	dial4.setBounds(rightDown);
}

运行效果：

完整代码：

//MainComponent.h
#pragma once

#include "../JuceLibraryCode/JuceHeader.h"

//==============================================================================
/*
    This component lives inside our window, and this is where you should put all
    your controls and content.
*/
class MainComponent   : public Component
{
public:
    //==============================================================================
    MainComponent();
    ~MainComponent();

    //==============================================================================
    void paint (Graphics&) override;
    void resized() override;

private:
	Slider dial1;
	Slider dial2;
	Slider dial3;
	Slider dial4;
	Rectangle<int> mainCptArea;
	Rectangle<int> leftUp;
	Rectangle<int> leftDown;
	Rectangle<int> rightUp;
	Rectangle<int> rightDown;
    JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainComponent)
};

MainComponent.cpp
#include "MainComponent.h"

//==============================================================================
MainComponent::MainComponent()
{
	setSize(600, 600);

	addAndMakeVisible(dial1);
	dial1.setSliderStyle(Slider::SliderStyle::Rotary); 
	dial1.setTextBoxStyle(Slider::TextBoxBelow, false, 100, 30);

	addAndMakeVisible(dial2);
	dial2.setSliderStyle(Slider::SliderStyle::Rotary);
	dial2.setTextBoxStyle(Slider::TextBoxBelow, false, 100, 30);

	addAndMakeVisible(dial3);
	dial3.setSliderStyle(Slider::SliderStyle::Rotary);
	dial3.setTextBoxStyle(Slider::TextBoxBelow, false, 100, 30);

	addAndMakeVisible(dial4);
	dial4.setSliderStyle(Slider::SliderStyle::Rotary);
	dial4.setTextBoxStyle(Slider::TextBoxBelow, false, 100, 30);
	
}

MainComponent::~MainComponent()
{
}

//==============================================================================
void MainComponent::paint (Graphics& g)
{	
	g.setColour(Colours::blue);
	g.drawRect(leftUp);
	g.setColour(Colours::red);
	g.drawRect(leftDown);
	g.setColour(Colours::green);
	g.drawRect(rightUp);
	g.setColour(Colours::yellow);
	g.drawRect(rightDown);
}

void MainComponent::resized()
{
	mainCptArea = getLocalBounds();
	leftUp = mainCptArea.removeFromLeft(getWidth() / 2).removeFromTop(getHeight() / 2);
	mainCptArea = getLocalBounds();
	leftDown = mainCptArea.removeFromLeft(getWidth() / 2).removeFromBottom(getHeight() / 2);
	mainCptArea= getLocalBounds();
	rightUp = mainCptArea.removeFromRight(getWidth() / 2).removeFromTop(getHeight() / 2);
	mainCptArea = getLocalBounds();
	rightDown = mainCptArea.removeFromRight(getWidth() / 2).removeFromBottom(getHeight() / 2);
	
	dial1.setBounds(leftUp);
	dial2.setBounds(leftDown);
	dial3.setBounds(rightUp);
	dial4.setBounds(rightDown);
}