juce实现自定义控件

Jons伯恩特

于 2025-05-28 15:44:28 发布

阅读量160

点赞数 2

分类专栏： JUCE 文章标签： juce C++

本文链接：https://blog.csdn.net/huangyifei_1111/article/details/148285538

版权

JUCE 专栏收录该内容

2 篇文章

订阅专栏

实现自定义控件

1.实现效果如下仅是demo

请添加图片描述

2.实现功能代码

1)在工程中添加资源文件

请添加图片描述

2)实现按钮类

//ImageButton.h文件
class ImageButton  : public juce::TextButton
{
public:
    ImageButton(const juce::String& buttonName, const juce::Image& normalImage, const juce::Image& overImage, const juce::Image& downImage);
  
    ~ImageButton() override;
    
    void paintButton(juce::Graphics& g, bool isMouseOverButton, bool isButtonDown) override;

private:
    juce::Image normalImage, overImage, downImage;
    JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (ImageButton)
};

// ImageButton.cpp

#include <JuceHeader.h>
#include "ImageButton.h"

//==============================================================================
ImageButton::ImageButton(const juce::String& buttonName, const juce::Image& normalImage, const juce::Image& overImage, const juce::Image& downImage)
    : juce::TextButton(buttonName, {})
    , normalImage(normalImage)
    , overImage(overImage)
    , downImage(downImage)
{
}

ImageButton::~ImageButton()
{
}
// 绘制图片
void ImageButton::paintButton(juce::Graphics& g, bool isMouseOverButton, bool isButtonDown)
{
    juce::Image imageToDraw = normalImage;

    if (isMouseOverButton)
        imageToDraw = overImage;
    else if (isButtonDown)
        imageToDraw = downImage;
    
    g.drawImageWithin(imageToDraw,0, 0, getWidth(), getHeight(),juce::RectanglePlacement(36));
}

3)在自定义控件中添加该按钮

// CustomButton.h
#pragma once
#include <JuceHeader.h>

class ImageButton;
//==============================================================================
/*
*/
class CustomButton  : public juce::Component,
    public juce::Button::Listener
{
public:
    CustomButton();
    ~CustomButton() override;

    void paint (juce::Graphics&) override;
    void resized() override;
    
    void buttonClicked(juce::Button*) override;
private:
    std::unique_ptr<ImageButton> ptr_close; // 添加的按钮
    JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (CustomButton)
};

#include <JuceHeader.h>
#include "CustomButton.h"
#include "ImageButton.h"
//==============================================================================
CustomButton::CustomButton():ptr_close(new ImageButton("start", 
                                                        juce::ImageFileFormat::loadFrom(BinaryData::clear_png, BinaryData::clear_pngSize),
                                                        juce::ImageFileFormat::loadFrom(BinaryData::clear_png, BinaryData::clear_pngSize),
                                                        juce::ImageFileFormat::loadFrom(BinaryData::clear_png, BinaryData::clear_pngSize)))
{
    addAndMakeVisible(*ptr_close); // 使按钮显示
    ptr_close->addListener(this); // 添加按钮监听click事件
    setSize(60,40); // 设置自定义控件 
}

CustomButton::~CustomButton()
{
}

void CustomButton::paint (juce::Graphics& g)
{
	// 绘制自定义控件
    g.fillAll (getLookAndFeel().findColour (juce::ResizableWindow::backgroundColourId));   // clear the background

    g.setColour (juce::Colours::red);
    g.drawRect (getLocalBounds(), 1);   // draw an outline around the component

    g.setColour (juce::Colours::white);
    g.setFont (14.0f);
    g.drawText ("CustomButton", getLocalBounds(),
               juce::Justification::centred, true);   // draw some placeholder text
}

void CustomButton::resized()
{
   	// 设置按钮的位置和大小
    juce::Rectangle<int> area = getLocalBounds();
    ptr_close->setBounds(area.removeFromRight(20).removeFromTop(20));
}
// 按钮自定义事件
void CustomButton::buttonClicked(juce::Button* button)
{
    if (button == ptr_close.get())
    {
        printf("hello");
    }
}

3)在主窗口中添加自定义控件

// MainComponent.h
#pragma once

#include <JuceHeader.h>
#include "CustomButton.h"

class MainComponent  : public juce::Component
{
public:
    //==============================================================================
    MainComponent();
    ~MainComponent() override;

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

private:
    //==============================================================================
    // Your private member variables go here...

    CustomButton custom_button;
    JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainComponent)
};

#include "MainComponent.h"

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

    addAndMakeVisible(custom_button); // 按钮设置显示
}

MainComponent::~MainComponent()
{
}

//==============================================================================
void MainComponent::paint (juce::Graphics& g)
{
}

void MainComponent::resized()
{
	// 设置自定义控件的位置和大小
    auto area = getLocalBounds();
    custom_button.setBounds(area.removeFromRight(60).removeFromTop(40));
}