CAScale9ImageView
类的继承关系:
CAScale9ImageView : public CAView,继承CAView类,视图类,它的对象可以显示到屏幕,定义对象主要使用CAIamge类对象的图片纹理来创建图片对象。
一. CAScale9ImageView是CrossApp提供的一种九宫格拉伸图片的解决方案,我们先来了解一下什么三九宫格图片拉伸。 在App的设计过程中,为了适配不同的手机分辨率,图片大小需要拉伸或者压缩,这样就出现了可以任意调整大小的拉伸样式。
CAScale9ImageView的实现非常巧妙,通过将原纹理资源切割成9部分(PS: 这也是叫九宫图的原因),根据想要的尺寸,完成以下的三个步骤:
(1)保持4个角部分不变形
(2)单向拉伸4条边(即在4个角两两之间的边,比如上边,只做横向拉伸)
(3)双向拉伸中间部分(即九宫图的中间部分,横向,纵向同时拉伸,PS:拉伸比例不一定相同)
二.实例1
void FirstViewController::viewDidLoad()
{
CAImage* caimg = CAImage::create("r/btn_rounded_normal.png");
//原始大小
CAImageView* caimgview1 = CAImageView::createWithImage(caimg);
caimgview1->setFrame(CCRect(100, 100, caimg->getContentSize().width,caimg->getContentSize().height));
//
//拉伸之后显示
CAImageView* caimgview2 = CAImageView::createWithImage(caimg);
caimgview2->setFrame(CCRect(100, 200, caimg->getContentSize().width*3, caimg->getContentSize().height*2));
//使用scale9imageview 来拉伸
CAScale9ImageView* cascale9image1 = CAScale9ImageView::createWithImage(caimg);
cascale9image1->setFrame(CCRect(100, 300, caimg->getContentSize().width * 3, caimg->getContentSize().height * 2));
this->getView()->addSubview(caimgview1);
this->getView()->addSubview(caimgview2);
this->getView()->addSubview(cascale9image1);
}//效果如下:
实例2
void FirstViewController::viewDidLoad()
{
//创建
CAScale9ImageView* second9IV = CAScale9ImageView::createWithImage(CAImage::create("source_material/btn_rounded_highlighted.png"));
//设置非拉伸区域与顶部的距离
second9IV->setInsetTop(3.0f);
//设置非拉伸区域与底部的距离
second9IV->setInsetBottom(3.0f);
//设置非拉伸区域与右边的距离
second9IV->setInsetRight(3.0f);
//设置非拉伸区域与左边的距离
second9IV->setInsetLeft(3.0f);
//设置显示区域(拉伸后的大小)
second9IV->setFrame(CCRect(100, 200, 150, 40));
//添加渲染
this->getView()->addSubview(second9IV);
//创建
CALabel* image9Label = CALabel::createWithFrame(CCRect(100, 200, 150, 40));
image9Label->setText(UTF8("使用九图"));
image9Label->setTextAlignment(CATextAlignmentCenter); //垂直方向对齐
image9Label->setVerticalTextAlignmet(CAVerticalTextAlignmentCenter); //竖直方向对齐
this->getView()->addSubview(image9Label);
//不使用9宫格拉伸 设置大小与上同
CAImageView* imageView = CAImageView::createWithFrame(CCRect(400, 300, 150, 40));
//设置显示图片
imageView->setImage(CAImage::create("source_material/btn_rounded_highlighted.png"));
//添加渲染
this->getView()->addSubview(imageView);
//创建
CALabel* imageLabel = CALabel::createWithFrame(CCRect(400, 300, 150, 40));
imageLabel->setText(UTF8("不用九图"));
imageLabel->setTextAlignment(CATextAlignmentCenter); //垂直方向对齐
imageLabel->setVerticalTextAlignmet(CAVerticalTextAlignmentCenter); //竖直方向对齐
this->getView()->addSubview(imageLabel);
}
三. 设置9宫格的9个区域
//设置拉伸区域,方法1
// cascale9image1->setCapInsets(CCRect(5, 5, caimg->getContentSize().width - 20, caimg->getContentSize().height-20));
//设置拉伸区域,方法2
cascale9image1->setInsetTop(5);
cascale9image1->setInsetBottom(5);
cascale9image1->setInsetLeft(5);
cascale9image1->setInsetRight(5);
1. 4个边角不会拉伸,拉伸的是上图中的中间的方形
2. CAScale9IamgeView 类 的拉伸的是像素
3. CAScale9IamgeView 类本身就有一个默认值的拉伸值,如源代码中:
void CAScale9ImageView::setCapInsets(const CCRect& capInsets)
{
CC_RETURN_IF(m_obCapInsets.equals(capInsets));
m_obCapInsets = capInsets;
this->updateCapInset();
}
void CAScale9ImageView::updateCapInset()
{
float w = m_obOriginalSize.width;
float h = m_obOriginalSize.height;
if ( m_obCapInsets.equals(CCRectZero) )
{
m_obCapInsets = CCRect(w/3, h/3, w/3, h/3);
}
const float lenghtX1 = m_obCapInsets.origin.x;
const float lenghtX2 = m_obCapInsets.size.width;
const float lenghtX3 = w - lenghtX1 - lenghtX2;
const float lenghtY1 = m_obCapInsets.origin.y;
const float lenghtY2 = m_obCapInsets.size.height;
const float lenghtY3 = h - lenghtY1 - lenghtY2;
m_rFrame[0] = CCRect(0, 0, lenghtX1, lenghtY1);
m_rFrame[1] = CCRect(lenghtX1, 0, lenghtX2, lenghtY1);
m_rFrame[2] = CCRect(lenghtX1 + lenghtX2, 0, lenghtX3, lenghtY1);
m_rFrame[3] = CCRect(0, lenghtY1, lenghtX1, lenghtY2);
m_rFrame[4] = CCRect(lenghtX1, lenghtY1, lenghtX2, lenghtY2);
m_rFrame[5] = CCRect(lenghtX1 + lenghtX2, lenghtY1, lenghtX3, lenghtY2);
m_rFrame[6] = CCRect(0, lenghtY1 + lenghtY2, lenghtX1, lenghtY3);
m_rFrame[7] = CCRect(lenghtX1, lenghtY1 + lenghtY2, lenghtX2, lenghtY3);
m_rFrame[8] = CCRect(lenghtX1 + lenghtX2, lenghtY1 + lenghtY2, lenghtX3, lenghtY3);
CC_RETURN_IF(m_pobImage == NULL);
if (m_pScale9ImageView)
{
for (int i=0; i<9; i++)
{
m_pImageView[i]->setImageRect(m_rFrame[i]);
}
this->updatePositions();
}
}