DrawableButton的使用技巧及示例

buttons-demo

DrawableButton:可绘制按钮,即:可以显示图形或图像的按钮。所显示的图形或图像为Drawable类的堆对象,而非Image对象。Drawable对象可通过该类的静态函数来获取(图像文件、图像数据、SVG图像、图像数据输入流、ValueTree所持有的数据等),或者直接使用Drawable的派生类对象。

DrawableButton可设置显示样式(同时显示文本和图像、仅显示图像或文本)。样式枚举:
 ImageFitted 显示图像时,自动调整大小和中心位置,以适应图像
 ImageRaw 以常规大小和位置来显示图像。需确保图像的大小和位置无误
 ImageAboveTextLabel 图像位于按钮文本的上方。按钮文本实则绘制的文本标签
 ImageOnButtonBackground 图像位于常规外形的按钮之上(圆角按钮)

重要成员函数
 DrawableButton (文本名称, 样式) 构造函数
 setImages () 设置按钮在不同状态下所显示的图像
 setButtonStyle () 设置按钮的样式
 setBackgroundColours () 设置按钮开启和正常状态下的背景颜色

注意:DrawableButton可绘制按钮具有开关属性时,开启状态下具有背景色。

由于Drawable可使用并绘制Path轨迹,而Drawable的对象又是本类所显示的图形或图像,因此,如果打算让本类显示Path形状,通常先进行轨迹描述。以上图为例(该图是笔者(Running)编写的一款软件的二级操作界面。该界面为内测阶段的“草稿”),此处给出这几个DrawableButton的实际代码(均位于内容组件的构造函数中,发布时略有删改)。其中,播放按钮具有开关式属性:

// first, give them a DrawablePath and a Path..
DrawablePath drawPath;
Path p;

// back button..
p.clear();
p.addLineSegment (Line<float> (0.0f, 0.0f, 0.0f, 20.0f), 5.0f);
p.addTriangle (5.0f, 10.0f, 20.0f, 0.0f, 20.0f, 20.0f);
drawPath.setPath (p);
drawPath.setFill (Colours::black);

backBt = new DrawableButton (String::empty, 
             DrawableButton::ImageOnButtonBackground);

addAndMakeVisible (backBt);
backBt->setConnectedEdges (Button::ConnectedOnLeft | 
                           Button::ConnectedOnRight);    
backBt->setImages (&drawPath);
backBt->addListener (this);
backBt->setBounds (timeSld->getRight() + 30, 15, 30, 30);

// back/play button..
p.clear();
p.addTriangle (0.0f, 10.0f, 9.0f, 0.0f, 9.0f, 20.0f);
p.addTriangle (11.0f, 0.0f, 21.0f, 10.0f, 11.0f, 20.0f);
drawPath.setPath (p);
drawPath.setFill (Colours::black);
backPlayBt = new DrawableButton ("", DrawableButton::
                                 ImageOnButtonBackground);

addAndMakeVisible (backPlayBt);
backPlayBt->setConnectedEdges (Button::ConnectedOnLeft | 
			       Button::ConnectedOnRight);

backPlayBt->setImages (&drawPath);
backPlayBt->addListener (this);
backPlayBt->setBounds (backBt->getRight() + 5, 15, 30, 30);

// help button..
p.clear();
p.addStar (Point(), 5, 16.0f, 30.0f);
drawPath.setPath (p);
drawPath.setFill (Colours::red);
helpBt = new DrawableButton (String::empty, 
		 DrawableButton::ImageOnButtonBackground);

addAndMakeVisible (helpBt);
helpBt->setConnectedEdges (Button::ConnectedOnLeft | 
 			   Button::ConnectedOnRight);
helpBt->setImages (&drawPath);
helpBt->addListener (this);
helpBt->setBounds (backAndPlayBt->getRight() + 5, 15, 30, 30);

// stop button..
p.clear();
p.addRectangle (5.0f, 5.0f, 20.0f, 20.0f);
drawPath.setPath (p);
drawPath.setFill (Colours::black);
stopBt = new DrawableButton (String::empty, 
		DrawableButton::ImageOnButtonBackground);

addAndMakeVisible(stopBt);
stopBt->setConnectedEdges (Button::ConnectedOnLeft | 
			   Button::ConnectedOnRight);
stopBt->setImages (&drawPath);
stopBt->addListener (this);
stopBt->setBounds(helpBt->getRight() + 5, 15, 30, 30);    

// paly button..
p.clear();
p.addTriangle (1.0f, 0.0f, 20.0f, 10.0f, 1.0f, 20.0f);
drawPath.setPath (p);
drawPath.setFill (Colours::black);
playBt = new DrawableButton (String::empty, 
		  DrawableButton::ImageOnButtonBackground);

addAndMakeVisible (playBt);
playBt->setConnectedEdges (Button::ConnectedOnLeft | 
		           Button::ConnectedOnRight);    
playBt->setClickingTogglesState (true);
playBt->setImages (&drawPath);
playBt->setBackgroundColours (Colours::lightgrey, Colours::darksalmon);
playBt->addListener (this);
playBt->setToggleState (true, false);
playBt->setBounds (stopBt->getRight() + 5, 15, 30, 30);

// ...

 带有小键盘的可绘制按钮:

// keyboard button..
p.clear();
p.addLineSegment (Line<float> (5.0f, 0.0f, 5.0f, 30.0f), 1.0f);
p.addLineSegment (Line<float> (15.0f, 0.0f, 15.0f, 30.0f), 1.0f);
p.addLineSegment (Line<float> (25.0f, 0.0f, 25.0f, 30.0f), 1.0f);
p.addLineSegment (Line<float> (5.0f, 0.0f, 5.0f, 20.0f), 10.0f);
p.addLineSegment (Line<float> (25.0f, 0.0f, 25.0f, 20.0f), 10.0f);
drawPath.setPath (p);
drawPath.setFill (Colours::black);
keybdBt = new DrawableButton (String::empty, 
			rawableButton::ImageOnButtonBackground);

addAndMakeVisible (keybdBt);
keybdBt->setConnectedEdges (Button::ConnectedOnLeft | 
			    Button::ConnectedOnRight);
keybdBt->setImages (&drawPath);
keybdBt->setClickingTogglesState (true);
keybdBt->setBackgroundColours (Colours::lightgrey, Colours::darksalmon);
keybdBt->addListener (this);
keybdBt->setBounds (backAndPlayBt->getRight() + 5, 5, 30, 30);
keybdBt->setToggleState (true, false);

另外一个小技巧,使用图像数据的可绘制按钮:

/* 参数Drawable对象须由程序员手工销毁。为避免类中还需声明Drawable对象,因此最好的办法是声明一个OwnedArray数组,由该数组自行管理 */
setupBt->setImages (Drawable::createFromImageData (BinaryData::setup_gif, 
		    BinaryData::setup_gifSize));

// 设置DrawableButton的背景色
setupBt->setBackgroundColours (Colours::lightgrey, 
                               Colours::lightyellow);