JUCE框架教程（3）—— Component Class&Graphics入门

JUCE框架教程（3）—— Component Class

前言
Graphic文档: https://docs.juce.com/develop/classGraphics.html
Component文档: https://docs.juce.com/develop/classComponent.html

首先，我们创建一个GUI项目取名为sample，并通过projucer的加号按钮添加一个名为Blue的组件

在MainComponent.h里添加blue

private:
	Blue blue;
1
2

在MainComponent.cpp文件里，可以对我们的UI界面进行更改。

MainComponent::MainComponent()
{
    addAndMakeVisible(blue);
    setSize (400, 300);
}
1
2
3
4
5

在MainComponent这个函数里，我们使用addAndMakeVisible()注册了blue组件，使用setSize()确定了页面的宽度和长度。

void MainComponent::paint (juce::Graphics& g)
{
    //the backgroundColor
    g.fillAll (juce::Colours::pink);

    g.setFont (juce::Font (32.0f));
    //g.fillEllipse(getWidth() / 2 - 100, getHeight() / 2 - 100, 200, 200);
    g.setColour (juce::Colours::black);
    g.drawText ("AirGain", getLocalBounds(), juce::Justification::centred, true);
}
1
2
3
4
5
6
7
8
9
10

在ptaint这个函数里，我们定义了一个名为g的Graphics类。
通过fillAll 改变背景颜色，setFont修改字体大小，setColour设置字体颜色，drawText写字。

//define child components
void MainComponent::resized()
{
    blue.setBounds(0, 0, getWidth(), getHeight()/3);
}
1
2
3
4
5

在resized这个函数中，可以用来定义子组件（我们之前注册的Blue组件）。通过setBounds来确定这个子组件在页面中显示的位置。

此时的Blue.cpp:

#include 
#include "Blue.h"

//==============================================================================
Blue::Blue()
{
    // In your constructor, you should add any child components, and
    // initialise any special settings that your component needs.

}

Blue::~Blue()
{
}

void Blue::paint (juce::Graphics& g)
{
    g.fillAll(juce::Colours::skyblue);
}

void Blue::resized()
{
  
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

我们单纯地把Blue组件的背景色设置成了蓝色。

最终，编译项目，得到以下的页面：

以上是JUCE组件和Graphics的基本操作，更多操作请查看JUCE官方文档