第二人生的源码分析(九十七)LLSlider实现音量滑动条

由于第二人生是多媒体的程序，因此它有音乐播放和语言聊天，那么就得使用到一种滑动条来调整音量的大小，如下图所示：

那么这个音量滑动条是怎么样实现的呢？下面就来详细地分析它的实现代码，先来看看它的类继承关系，如下：

class LLSlider : public LLUICtrl

LLSlider类只继承LLUICtrl类，那么说明它拥有控件类的功能，能在界面上面显示出来。它的详细显示代码如下：

#001void 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

#027mTrackImage, track_color);

#028 gl_draw_scaled_image_with_border(track_rect.mLeft, track_rect.mBottom, 3, 3, mThumbRect.mLeft, track_rect.getHeight(),

#029

#030mTrackHighlightImage, track_color);

#031

#032

显示滑块。

#033 // Thumb

#034 if( hasMouseCapture() )

#035 {

如果正在拖动滑块，就显示拖动前的位置。

#036 gl_draw_scaled_image(mDragStartThumbRect.mLeft, mDragStartThumbRect.mBottom, mDragStartThumbRect.getWidth(),

#037mDragStartThumbRect.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(),

#047highlight_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(),

#065highlight_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}

上面的函数，主要显示一条滑动条，然后根据是否拖动和是否有焦点输入而显示不同的颜色滑块。