cocostudio在scrollview封装滚动条

概述cocostudio里面是没有对应scrollview封装滚动条的，在实际的项目中需要scrollview携带滚动条是很常见的需求，对此研究了一下，自己封装了一个UIScrollbar的实现，不是很完善，但大致完成了当scrollview滚动时，滚动条也对应着滚动。首先，先对需求进行一下数学分析(不是数学专业的数学分析~_~)，看下面的图解： 从这个图用数学知识分析，当scrollview的ite

cocostudio里面是没有对应scrollvIEw封装滚动条的，在实际的项目中需要scrollvIEw携带滚动条是很常见的需求，对此研究了一下，自己封装了一个UIScrollbar的实现，不是很完善，但大致完成了当scrollvIEw滚动时，滚动条也对应着滚动。首先，先对需求进行一下数学分析(不是数学专业的数学分析~_~)，看下面的图解：

从这个图用数学知识分析，当scrollvIEw的item子项往上移动一个像素的时候，由于我们的滚动条的范围是在黑色区域的高度，所以我们必须用比例，则加上总的高度为1000，黑色部分的高度为500，假设偏移量为dy，则滚动条的偏移量为dy1 = dx *(1000 - 500)/500,基于这个知识，贴上UIScrollbar的代码：

#include "UIScrollbar.h"

UIScrollbar::UIScrollbar(const char* filename)
:filePath(filename)
{

m_lastPosY = 0;

pos = 0;

}

UIScrollbar::~UIScrollbar()
{
}
//UIScrollbar的初始化，和设置UIScrollbar的纹理
UIScrollbar* UIScrollbar::create(const char* filePath)
{
UIScrollbar* Widget = new UIScrollbar(filePath);
if (Widget && Widget->init())
{
Widget->autorelease();
return Widget;
}
CC_SAFE_DELETE(Widget);
return NulL;
}


bool UIScrollbar::init()
{
bool isRet = false;
if ( !cclayer::init())
{
return isRet;
}
isRet = true;

//图片使用ImagevIEw载入（采用ccsprite也是可以的，但需要把addchild改为addNode,并且继承与Widget就可以了）

this->m_scrollbar = ImageVIEw::create();
this->m_scrollbar->loadTexture(filePath);
this->addChild(this->m_scrollbar);

//执行帧函数，每一帧都设置滚动条争取的位置
this->scheduleUpdate();
return isRet;
}
//设置scrollbar的位置，初始化的时候设置的时候要注意滚动区域的高度，设置位置的高度应该为滚动区域的Y轴坐标，
voID UIScrollbar::setposition(CCPoint pos)
{
this->m_scrollbar->setposition(pos);
}
//更新函数
voID UIScrollbar::update(float dt)
{

//获得父节点UIScrollvIEw，因为我是把uiscrollbar加入到scrollvIEw里面的，此时能产生裁剪的效果
UIScrollVIEw* svIEw = (UIScrollVIEw*)this->getParent();
if ( svIEw != NulL )
{

//uiscrollbar更新位置的逻辑

//因为我没找到获得uiscrollvIEw的偏移量的方法，所以就采用获得ScrollvIEw的子节点偏移量来获得便宜量
CCArray* array = svIEw->getChildren();
Widget* item = (Widget*)array->lastObject();
this->posy = (item->getWorldposition()).y;
cclog("posy is %f\n",posy);

//判断当前是否是有移动了，当有移动的时候才去更新Scrollbar的位置
if ( this->m_lastPosY != posy )
{

//获得偏移量
float disY = this->m_lastPosY - posy;
cclog("disY is %f\n",disY);

float y；

//获得scrollvIEw的滚动区域与可视区域的比例，以便得到scrollvIEw的可视区域的高度
float vIEwCsize = svIEw->getSizePercent().y;

//可视区域的高度
float size = svIEw->getSize().height / vIEwCsize;

//如上图所说的比例计算
float rate = (svIEw->getSize().height - size) / size;

//滚动条需要滚动的偏移量
double reaY = disY / rate;

//为什么需要+disY，这是很重要的一部份，也是坑了我一天的东西，后来想了想，其实也是很自然的东西，那是因为父节点移动了disY，所以子节点也移动了disY，

//所以当你需要设置正确位置的时候，必须是相对于整个屏幕Scrollbar是没有移动的，所以必须加上disY,保持scrollbar是相对于整个屏幕没有移动，然后在加上计算好的

//需要滚动的偏移量
y = this->m_scrollbar->getpositionY() + reaY + disY;
//必须加上相对于父节点的偏移量使子节点是处于整个视口是不动的，此时加上偏移量才是正确的
this->m_scrollbar->setpositionY(y);
this->m_lastPosY = posy;
}
}
}

当你需要使用这个的时候，只需要把这段代码设置为一个层，然后加入到UIScrollvIEw的子节点中，设置好正确的位置，就可以实现带滚动条的uiscrolllvIEw了。

总结

以上是内存溢出为你收集整理的cocostudio在scrollview封装滚动条全部内容，希望文章能够帮你解决cocostudio在scrollview封装滚动条所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。