第二人生的源码分析(九十七)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 }

 

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