关于cocos2dx -js中使用scrollview的心得

项目需要做一个滚动显示长图片的功能,跟公司大牛请教后得知cocos有个控件叫scrollview,遂学习了一下,记录一些坑.....

上代码先:

var cache = cc.SpriteFrameCache.getInstance();    cache.addSpriteFrames("img/c.plist");    var img =  cc.SpriteFrameCache.getInstance().getSpriteFrame("r_p.png");    var sp = cc.Sprite.createWithSpriteFrame(img);    sp.setAnchorPoint( cc.p (0,0) );    var offset = sp.getContentSize().height - 300;    sp.setPosition(cc.p( 0, 0));    sp.setVisible(true);    var container = cc.LayerRGBA.create();    var color = new cc.c3b(255, 0, 0);  // 设置颜色    container.setColor(color);    container.setAnchorPoint( cc.p (0,0) );    container.addChild(sp);    container.setPosition( cc.p (0,300)) ;    container.setVisible(true);    var scroll_card = cc.ScrollView.create();    scroll_card.setContainer(container);    scroll_card.setContentSize(cc.size(512,1200));    scroll_card.setViewSize(cc.size(512,300));    scroll_card.setPosition(cc.p(100,100));    scroll_card.setDirection(cc.SCROLLVIEW_DIRECTION_VERTICAL);    scroll_card.setVisible(true);    scroll_card.setBounceable(true);    scroll_card.setContentOffset(cc.p(150,0) , false);

然后add进场景中就OK了

坑1.js的版本没有addchild,只能new一个层,然后加入进内容

坑2.内容的size,要和图片的尺寸相当,否则上下界判断时会有问题

坑3.内容的偏移,尽量不要有偏移,上面代码里的x轴偏移加上了也没看出啥效果,但是Y轴的偏移加一个数就能看出图片下界向上移了,但是偏移只是第一次显示的效果,一旦拖动,上下界就跟偏移没关系了.

坑4.内容的锚点,内容层作为坑1的产物必然也有坑,层的坐标感觉没有影响,改了几个值后效果都那样,然后是锚点,开始拖动图片后还没到下界就弹回了,分析不是内容尺寸问题,而是锚点设置的不对,但是将这个内容层的锚点设置为00后仍然没有解决问题.....所以引出坑5

坑5,精灵的锚点,生成一个精灵后,他的锚点是(0.5,0.5),然后在内容层里他的锚点直接位于了内容层的(0,0),所以下方的一半图片拖不上来了.所以要先把精灵的锚点设成(0,0)!

坑6.javascript语言还是不会啊....