cocos2d-js 中scrollview详解

来源:互联网 发布:上市公司研发费用数据 编辑:程序博客网 时间:2024/05/23 12:29
/****开头的一些废话:1、多思考,善于思考2、懂得变通3、多多查询API    首先复制一段 API中的源码:(UIScrollView.js)这段代码可以看出  scrollview中的容器是一个node,并且他的位置是:代码最后一行,算了 有人可能不会仔细看,最后一行的意思就是容器节点的锚点默认是(0,0);然后,x位置是0,y的位置是scrollview的高减去容器的高;这样设置的意义是容器如果设置的很大的话,就会把空间想向下方延伸!!!***/_initRenderer: function () {    ccui.Layout.prototype._initRenderer.call(this);    this._innerContainer = new ccui.Layout();    this._innerContainer.setColor(cc.color(255,255,255));    this._innerContainer.setOpacity(255);    this._innerContainer.setCascadeColorEnabled(true);    this._innerContainer.setCascadeOpacityEnabled(true);    this.addProtectedChild(this._innerContainer, 1, 1);},_onSizeChanged: function () {    ccui.Layout.prototype._onSizeChanged.call(this);    var locSize = this._contentSize;    this._topBoundary = locSize.height;    this._rightBoundary = locSize.width;    var bounceBoundaryParameterX = locSize.width / 3;    var bounceBoundaryParameterY = locSize.height / 3;    this._bounceTopBoundary = locSize.height - bounceBoundaryParameterY;    this._bounceBottomBoundary = bounceBoundaryParameterY;    this._bounceLeftBoundary = bounceBoundaryParameterX;    this._bounceRightBoundary = locSize.width - bounceBoundaryParameterX;    var innerSize = this._innerContainer.getContentSize();    this._innerContainer.setContentSize(cc.size(Math.max(innerSize.width, locSize.width), Math.max(innerSize.height, locSize.height)));    /****此处可以这样进行修改,把容器类的位置设置成(0,0)     *     这样的好处是把  最开出现的东西 显示为容器最低端的节点,可以在开始的时候     * 实现往下滑动,这样的实现了容器的空间是向上进行延伸的。     *     * 若不改动的话,最开始显示的是容器最顶端的东西,这可以向下滑动     *这就是两种效果,看你需要什么样的效果,就怎么改!!!     * ****/    this._innerContainer.setPosition(0,0);//this._innerContainer.setPosition(0, locSize.height - this._innerContainer.getContentSize().height);},//还有一点需要讲一下,scrollview添加子节点的时候,返回的是容器的添加://API源码:addChild: function (widget, zOrder, tag) {    if(!widget)        return false;    zOrder = zOrder || widget.getLocalZOrder();    tag = tag || widget.getTag();//此处返回的是容器添加节点, scrollview 的size只是需要显示的区域的大小    return this._innerContainer.addChild(widget, zOrder, tag);},/**** * 以下是我所编写的源码: * *****///新建一个节点,在节点上添加scrollviewinit:function(){    //初始化一个node    var Node = new cc.Node()    Node.attr({        anchorX:0,        anchorY:0,        x:0,        y:0    })    this.addChild(Node,2);    this._Node = Node;}BothScrollview:function(){    var scrollView = new ccui.ScrollView();    //设置方向    scrollView.setDirection(ccui.ScrollView.DIR_VERTICAL);    //触摸的属性    scrollView.setTouchEnabled(true);    //弹回的属性    // scrollView.setBounceEnabled(true);    //滑动的惯性    scrollView.setInertiaScrollEnabled(true);    scrollView.setBackGroundImageScale9Enabled(true);    //设置背景    scrollView.setBackGroundImage(res.Bghong_jpg);    //设置scrollview的大小,相当于是显示的区域    scrollView.setContentSize(cc.size(640, 1140));    //设置容器的大小 这个容器就是存放scrollview添加的节点,需要设置他的位置,上面已经讲清楚    scrollView.setInnerContainerSize(cc.size( 640,6840));    //可以添加触摸事件监听器    scrollView.addTouchEventListener(this.scrollviewCall,this)    //锚点默认是 (0,0)    scrollView.setAnchorPoint(0,0)    scrollView.x = 0    scrollView.y = 0    //自己新建一个节点    this._Node.addChild(scrollView);    //layer的锚点默认是(0,0),现在设置ImageView    var imageBg = new ccui.ImageView(res.liuheyi_jpg);    imageBg.setAnchorPoint(0,0);    imageBg.setPosition(0,0);    scrollView.addChild(imageBg,1);    //添加按钮层    var  buttonlayer = new ButtonLayer();    buttonlayer.setPosition(0,0);    buttonlayer.setContentSize(cc.size(600,6840))    scrollView.addChild(buttonlayer,3)    //本示例引擎的版本是 3.8.1},
0 0
原创粉丝点击