由于第二人生是多媒体的程序,因此它有音乐播放和语言聊天,那么就得使用到一种滑动条来调整音量的大小,如下图所示:
那么这个音量滑动条是怎么样实现的呢?下面就来详细地分析它的实现代码,先来看看它的类继承关系,如下:
class LLSlider : public LLUICtrl
LLSlider类只继承
LLUICtrl类,那么说明它拥有控件类的功能,能在界面上面显示出来。它的详细显示代码如下:
#001 void LLSlider::draw()
#002 {
判断是否可见。
#003
if( getVisible() )
#004
{
//更新滑块的大小。
#005
// since thumb image might still be decoding, need thumb to accomodate image size
#006
updateThumbRect();
#007
#008
// Draw background and thumb.
#009
#010
// drawing solids requires texturing be disabled
#011
LLGLSNoTexture no_texture;
#012
#013
LLRect rect(mDragStartThumbRect);
#014
根据不同的比率来显示不同的颜色界面。
#015
F32 opacity = getEnabled() ? 1.f : 0.3f;
#016
LLColor4 center_color = (mThumbCenterColor % opacity);
#017
LLColor4 track_color = (mTrackColor % opacity);
#018
计算
TRACK的大小。
#019
// Track
#020
LLRect track_rect(mThumbImage->getWidth() / 2,
#021
getLocalRect().getCenterY() + (mTrackImage->getHeight() / 2),
#022
getRect().getWidth() - mThumbImage->getWidth() / 2,
#023
getLocalRect().getCenterY() - (mTrackImage->getHeight() / 2) );
#024
显示滑动条的边框。
#025
gl_draw_scaled_image_with_border(track_rect.mLeft, track_rect.mBottom, 3, 3, track_rect.getWidth(), track_rect.getHeight(),
#026
#027 mTrackImage, track_color);
#028
gl_draw_scaled_image_with_border(track_rect.mLeft, track_rect.mBottom, 3, 3, mThumbRect.mLeft, track_rect.getHeight(),
#029
#030 mTrackHighlightImage, track_color);
#031
#032
显示滑块。
#033
// Thumb
#034
if( hasMouseCapture() )
#035
{
如果正在拖动滑块,就显示拖动前的位置。
#036
gl_draw_scaled_image(mDragStartThumbRect.mLeft, mDragStartThumbRect.mBottom, mDragStartThumbRect.getWidth(),
#037 mDragStartThumbRect.getHeight(),
#038
#039
mThumbImage, mThumbCenterColor % 0.3f);
#040
如果有焦点,就显示动画。
#041
if (hasFocus())
#042
{
#043
F32 lerp_amt = gFocusMgr.getFocusFlashAmt();
#044
LLRect highlight_rect = mThumbRect;
#045
highlight_rect.stretch(llround(lerp(1.f, 3.f, lerp_amt)));
#046
gl_draw_scaled_image_with_border(highlight_rect.mLeft, highlight_rect.mBottom, 0, 0, highlight_rect.getWidth(),
#047 highlight_rect.getHeight(),
#048
#049
mThumbImage, gFocusMgr.getFocusColor(), TRUE);
#050
}
#051
在新位置显示滑块。
#052
gl_draw_scaled_image(mThumbRect.mLeft, mThumbRect.mBottom, mThumbRect.getWidth(), mThumbRect.getHeight(),
#053
#054
mThumbImage, mThumbOutlineColor);
#055
#056
}
#057
else
#058
{
没有拖动的显示。
#059
if (hasFocus())
#060
{
#061
F32 lerp_amt = gFocusMgr.getFocusFlashAmt();
#062
LLRect highlight_rect = mThumbRect;
#063
highlight_rect.stretch(llround(lerp(1.f, 3.f, lerp_amt)));
#064
gl_draw_scaled_image_with_border(highlight_rect.mLeft, highlight_rect.mBottom, 0, 0, highlight_rect.getWidth(),
#065 highlight_rect.getHeight(),
#066
#067
mThumbImage, gFocusMgr.getFocusColor(), TRUE);
#068
}
#069
#070
gl_draw_scaled_image(mThumbRect.mLeft, mThumbRect.mBottom, mThumbRect.getWidth(), mThumbRect.getHeight(),
#071
#072
mThumbImage, center_color);
#073
}
#074
LLUICtrl::draw();
#075
}
#076 }
上面的函数,主要显示一条滑动条,然后根据是否拖动和是否有焦点输入而显示不同的颜色滑块。