第二人生的源码分析(九十七)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}
上面的函数,主要显示一条滑动条,然后根据是否拖动和是否有焦点输入而显示不同的颜色滑块。
阅读更多

没有更多推荐了,返回首页