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

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

 

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

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 }

 

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