cocos2d-x CCScale9Sprite实例

cocos2d-x CCScale9Sprite实例

复制代码
    // 只是简单获取一下图形大小
         CCSprite* tmp = CCSprite::create("extensions/background.png");
        CCSize size = tmp->getContentSize();
        CCRect fullRect = CCRectMake(0,0, size.width, size.height);
        CCRect insetRect = CCRectMake(3,3,size.width-6, size.height-6);
        CCLog("wh:%f,%f", size.width, size.height);
        tmp->release();
 // 调用CCScale9Sprite
        CCScale9Sprite* backGround = CCScale9Sprite::create("extensions/background.png", fullRect, insetRect ); 
        backGround->setPreferredSize(CCSizeMake(300, 30));
        backGround->setPosition(ccp(10, 230));
        backGround->setAnchorPoint(CCPointZero);
        addChild(backGround);
复制代码

加入图片是圆角图片,圆角半径为3,图片大小为16x16,则rectInsets最好设置为(3,3,10,10); 其中,3,3是中间区域的起点,10,10是中间区域的宽高,10是16-2*3的结果.

注意:在测试中发现,如果想要setPreferredSize()或者setContentSize()在收缩图片时生效,则只能用

 CCScale9Sprite::create("extensions/background.png", fullRect, insetRect ) 这个构造函数,用
 CCScale9Sprite::create("extensions/background.png") 或者
CCScale9Sprite::create(insetRect,"extensions/background.png", )
这两个create函数构造出来的CCScale9Sprite都无法按照理想中的收缩,但拉伸是没问题的!

BUG原因:

CCScale9Sprite* CCScale9Sprite::create(CCRect capInsets, const char* file)的实现有误,应该将该函数中的

if ( pReturn && pReturn->initWithFile(file,capInsets) )
{
pReturn->autorelease();
return pReturn;
}

改为

if ( pReturn && pReturn->initWithFile(capInsets, file) )
{
pReturn->autorelease();
return pReturn;
}

即可


对应官网的CCControlExtention。可以通过TestCpp的EntentionTest查看效果。

http://cocos2d-x.org/projects/cocos2d-x/wiki/CCControlExtension

以下内容使用了扩展库,因此要添加库路径和命名空间
#include "cocos-ext.h" 
USING_NS_CC_EXT;

并在属性中配置extension路径,加入libextensions.lib库

CCScale9Sprite——九宫格Sprite
按照九宫格的方式缩放图片的工具,和android的9patch一样作用。可以使得按钮变得漂亮起来。但不能处理点击事件。
例子:

  1.                 CCSize  screenSize = CCDirector::sharedDirector()->getWinSize();  CCRect rect = CCRectMake(0,0,15,32);         //从原始图片中读取的范围,参数分别为坐标x,y和宽度,高度
  2.   CCRect rect_inside = CCRectMake(4,4,7,24);   //原始图片中,可变的部分,即用来放大的。参数解释同上(x,y,width,height)。
  3.   CCSize rect_9Size = CCSizeMake(screenSize.width/2,screenSize.height/2);
  4.   CCScale9Sprite* button = cocos2d::extension::CCScale9Sprite::create("button.png", rect,rect_inside);
  5.    //button->setContentSize(CCSizeMake(screenSize.width, 57));
  6.    button->setPreferredSize(rect_9Size);      //希望得到的最终按钮大小
  7.    button->setPosition(ccp(screenSize.width/2, screenSize.height/ 2.0f));
  8.    addChild(button);
复制代码

注意CCScale9Sprite::Create,如果没有输入rect,实际是是把图片按九宫格等比划分为9份。底调用了的层代码如下。没有输入rect,就默认rect为CCRectZero

看看定义const CCRect CCRectZero = CCRectMake(0,0,0,0);   即,0大小的Rect。可以参照CCControlButton的例子,它是直接调用create(char* file)的。

  1. bool CCScale9Sprite::initWithFile(const char* file, CCRect rect,  CCRect capInsets)
  2. {
  3.     CCAssert(file != NULL, "Invalid file for sprite");
  4.     
  5.     CCSpriteBatchNode *batchnode = CCSpriteBatchNode::create(file, 9);
  6.     bool pReturn = this->initWithBatchNode(batchnode, rect, capInsets);
  7.     return pReturn;
  8. }
复制代码
  1. bool CCScale9Sprite::initWithBatchNode(CCSpriteBatchNode* batchnode, CCRect rect, bool rotated, CCRect capInsets)
  2. {
  3.     if(batchnode)
  4.     {
  5.         this->updateWithBatchNode(batchnode, rect, rotated, capInsets);
  6.         this->setAnchorPoint(ccp(0.5f, 0.5f));
  7.     }
  8.     this->m_positionsAreDirty = true;
  9.     
  10.     return true;
  11. }
复制代码

20130626145022031.jpg  这就是button.png,可以在cocos2d-x的项目中搜到,是一个渐变图。放大后效果

20130626145121937.jpg 

CCControlButton——事件按钮
与CCScale9Sprite不同,Button控件可以处理事件,且该控件需要传入CCScale9Sprite作为参数。
控制事件CCControlEvent,可以处理很多动作细节。

ControlButtonTest_Styling.png 

CCControl.h中定义如下

  1. /** Number of kinds of control event. */
  2. #define kControlEventTotalNumber 9
  3. /** Kinds of possible events for the control objects. */
  4. enum 
  5. {
  6.     CCControlEventTouchDown           = 1 << 0,    // A touch-down event in the control.
  7.     CCControlEventTouchDragInside     = 1 << 1,    // An event where a finger is dragged inside the bounds of the control.
  8.     CCControlEventTouchDragOutside    = 1 << 2,    // An event where a finger is dragged just outside the bounds of the control. 
  9.     CCControlEventTouchDragEnter      = 1 << 3,    // An event where a finger is dragged into the bounds of the control.
  10.     CCControlEventTouchDragExit       = 1 << 4,    // An event where a finger is dragged from within a control to outside its bounds.
  11.     CCControlEventTouchUpInside       = 1 << 5,    // A touch-up event in the control where the finger is inside the bounds of the control. 
  12.     CCControlEventTouchUpOutside      = 1 << 6,    // A touch-up event in the control where the finger is outside the bounds of the control.
  13.     CCControlEventTouchCancel         = 1 << 7,    // A system event canceling the current touches for the control.
  14.     CCControlEventValueChanged        = 1 << 8      // A touch dragging or otherwise manipulating a control, causing it to emit a series of different values.
  15. };
  16. typedef unsigned int CCControlEvent;
  17. /** The possible state for a control.  */
  18. enum 
  19. {
  20.     CCControlStateNormal       = 1 << 0, // The normal, or default state of a control—that is, enabled but neither selected nor highlighted.
  21.     CCControlStateHighlighted  = 1 << 1, // Highlighted state of a control. A control enters this state when a touch down, drag inside or drag enter is performed. You can retrieve and set this value through the highlighted property.
  22.     CCControlStateDisabled     = 1 << 2, // Disabled state of a control. This state indicates that the control is currently disabled. You can retrieve and set this value through the enabled property.
  23.     CCControlStateSelected     = 1 << 3  // Selected state of a control. This state indicates that the control is currently selected. You can retrieve and set this value through the selected property.
  24. };
  25. typedef unsigned int CCControlState;/** Number of kinds of control event. */
  26. #define kControlEventTotalNumber 9
复制代码

使用例子:(记得在头文件声明时引入头文件、命名控件,配置CCControl.h的路径,因为用到了CCControlEvent进行声明)

  1. cocos2d::extension::CCScale9Sprite *backgroundButton = cocos2d::extension::CCScale9Sprite::create("button.png");
  2. cocos2d::extension::CCScale9Sprite *backgroundHighlightedButton = cocos2d::extension::CCScale9Sprite::create("buttonHighlighted.png");
  3. // Creates a button with this string as title
  4. CCLabelTTF *titleButton = CCLabelTTF::create("hello", "Marker Felt", 30);    
  5. titleButton->setColor(ccc3(159, 168, 176));
  6. cocos2d::extension::CCControlButton *newbutton = cocos2d::extension::CCControlButton::create(titleButton, backgroundButton);
  7. newbutton->setBackgroundSpriteForState(backgroundHighlightedButton, cocos2d::extension::CCControlStateHighlighted);
  8. newbutton->setTitleColorForState(ccWHITE, cocos2d::extension::CCControlStateHighlighted);
  9. newbutton->setPosition(ccp (screenSize.width / 2, screenSize.height / 2));
复制代码
  1.                  newbutton->addTargetWithActionForControlEvents(this,cccontrol_selector(HelloWorld::touchDown),CCControlEventTouchDown);
  2.                   //注意,addTargetWithActionForControlEvents是public的,addTargetWithActionForControlEvent是protected的,不要少了s,否则会报错:无法访问 protected 成员
  3.                  // addTargetWithActionForControlEvents循环调用了addTargetWithActionForControlEvent
  4.                  
  5.                  addChild(newbutton);
复制代码

可参考以下代码  

  1. void CCControl::addTargetWithActionForControlEvents(CCObject* target, SEL_CCControlHandler action, CCControlEvent controlEvents)
  2. {
  3.     // For each control events
  4.     for (int i = 0; i < kControlEventTotalNumber; i++)
  5.     {
  6.         // If the given controlEvents bitmask contains the curent event
  7.         if ((controlEvents & (1 << i)))
  8.         {
  9.             this->addTargetWithActionForControlEvent(target, action, 1<<i); 
  10.         }
  11.     }
  12. }
复制代码

CCControlSlider——拖动条
CCControlColorPicker——颜色选择器
CCControlSwitch——开关控件
CCControlPotentionmeter——压力计
CCControlStepper——分段控件
CCScrollView——滚动视图
CCTabelView——列表视图

原文链接: http://blog.csdn.net/xzongyuan/article/details/9177421


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值