CAScale9ImageView(九宮格圖片拉伸)

2018-08-27 17:09 更新

類說明

        CAScale9ImageView是CrossApp提供的一種九宮格拉伸圖片的解決方案,我們先來了解一下什么是九宮格圖片拉伸。
在App的設計過程中,為了適配不同的手機分辨率,圖片大小需要拉伸或者壓縮,這樣就出現(xiàn)了可以任意調整大小的拉伸樣式。


CAScale9ImageView 屬性(點擊方法名可查看方法介紹)

屬性說明
OriginalSize原始尺寸
CapInsets拉伸區(qū)域
InsetLeft左側拉伸距離
InsetTop上側拉伸距離
InsetRight右側拉伸距離
InsetBottom下側拉伸距離


CAScale9ImageView 方法(點擊方法名可查看方法介紹)

方法說明
create創(chuàng)建,默認Frame為(0,0,0,0)
createWithImage創(chuàng)建,并指定其圖像
createWithFrame創(chuàng)建,并指定其Frame,默認Frame為(0,0,0,0)
createWithCenter創(chuàng)建,并指定其Center,默認Center為(0,0,0,0)
init初始化
initWithImage初始化,并指定其圖像
setCapInsets設置拉伸區(qū)域
setInsetLeft設置左側拉伸區(qū)域
setInsetTop設置上側拉伸區(qū)域
setInsetRight設置右側拉伸區(qū)域
setInsetBottom設置下側拉伸區(qū)域
setColor設置顏色
getColor獲取顏色
setAlpha設置透明度
copy復制
setImage設置圖像
getImage獲取圖像
draw重新繪制圖像


CAScale9ImageView
CAScale9ImageView的實現(xiàn)非常巧妙,通過將原紋理資源切割成9部分(PS: 這也是叫九宮圖的原因),根據(jù)想要的尺寸,完成以下的三個步驟:
    (1)保持4個角部分不變形
    (2)單向拉伸4條邊(即在4個角兩兩之間的邊,比如上邊,只做橫向拉伸)
    (3)雙向拉伸中間部分(即九宮圖的中間部分,橫向,縱向同時拉伸,PS:拉伸比例不一定相同)

CAScale9ImageView

實例代碼:
CAScale9ImageView
void FirstViewController::viewDidLoad()
{ //創(chuàng)建
CAScale9ImageView* first9IV = CAScale9ImageView::createWithImage(
CAImage::create("source_material/btn_rounded_normal.png"));
//設置顯示大?。ɡ旌蟮拇笮。?/div> //設置非拉伸區(qū)域為(5,5,20,20) first9IV->setCapInsets(DRect(5,5,20,20));
this->getView()->addSubview(first9IV);
first9IV->setFrame(DRect(100, 100, 50, 140)); //添加渲染 //創(chuàng)建
CAImage::create("source_material/btn_rounded_highlighted.png"));
CAScale9ImageView* second9IV = CAScale9ImageView::createWithImage( //設置非拉伸區(qū)域與頂部的距離 second9IV->setInsetTop(3.0f);
second9IV->setInsetLeft(3.0f);
//設置非拉伸區(qū)域與底部的距離 second9IV->setInsetBottom(3.0f); //設置非拉伸區(qū)域與右邊的距離 second9IV->setInsetRight(3.0f); //設置非拉伸區(qū)域與左邊的距離
CALabel* image9Label = CALabel::createWithFrame(DRect(400, 200, 150, 40));
//設置顯示區(qū)域(拉伸后的大?。?
second9IV->setFrame(DRect(400, 200, 150, 40));
//添加渲染 this->getView()->addSubview(second9IV);
this->getView()->addSubview(image9Label);
//創(chuàng)建 image9Label->setText(UTF8("使用九圖"));
image9Label->setTextAlignment(CATextAlignmentCenter);
image9Label->setVerticalTextAlignmet(CAVerticalTextAlignmentCenter);
imageView->setImage(CAImage::create("source_material/btn_rounded_highlighted.png"));
//不使用9宮格拉伸 設置大小與上同 CAImageView* imageView = CAImageView::createWithFrame(DRect(400, 300, 150, 40)); //設置顯示圖片 //添加渲染 this->getView()->addSubview(imageView); //創(chuàng)建
imageLabel->setVerticalTextAlignmet(CAVerticalTextAlignmentCenter);
CALabel* imageLabel = CALabel::createWithFrame(DRect(400, 300, 150, 40)); imageLabel->setText(UTF8("不用九圖")); imageLabel->setTextAlignment(CATextAlignmentCenter); this->getView()->addSubview(imageLabel);
}


CAScale9ImageView 屬性說明

OriginalSize

類型:DSize

解釋:原始尺寸,get{}。


CapInsets

類型:DSize

解釋:拉伸區(qū)域,get{}。


InsetLeft

類型:float

解釋:左側拉伸距離。get{}。


InsetTop

類型:float

解釋:上側拉伸距離。get{}。


InsetRight

類型:float

解釋:右側拉伸距離。get{}。


InsetBottom

類型:float

解釋:下側拉伸距離。get{}。


CAScale9ImageView 方法說明

static CAScale9ImageView* create();

返回值:static CAScale9ImageView*

參數(shù):

解釋創(chuàng)建,默認Frame為(0,0,0,0)


static CAScale9ImageView* createWithImage(CAImage* image);

返回值:static CAScale9ImageView*

參數(shù):

類型參數(shù)名說明
CAImage*image圖像

解釋創(chuàng)建,并指定其圖像


static CAScale9ImageView* createWithFrame(const DRect& rect);

返回值:static CAScale9ImageView*

參數(shù):

類型參數(shù)名說明
const DRect&rect區(qū)域大小

解釋創(chuàng)建,并指定其Frame,默認Frame為(0,0,0,0)


static CAScale9ImageView* createWithCenter(const DRect& rect);

返回值:static CAScale9ImageView*

參數(shù):

類型參數(shù)名說明
const DRect&rect中心點的位置及大小

解釋創(chuàng)建,并指定其Center,默認Center為(0,0,0,0)


virtual bool init();

返回值:virtual bool

參數(shù):

解釋初始化


virtual bool initWithImage(CAImage* image);

返回值:virtual bool

參數(shù):

類型參數(shù)名說明
CAImage*image圖像

解釋初始化,并指定其圖像


virtual void setCapInsets(const DRect& capInsets);

返回值:virtual void

參數(shù):

類型參數(shù)名說明
const DRect&capInsets拉伸區(qū)域

解釋設置拉伸區(qū)域


virtual void setInsetLeft(float insetLeft);

返回值:virtual void

參數(shù):

類型參數(shù)名說明
floatinsetLeft左側拉伸區(qū)域

解釋設置左側拉伸區(qū)域


virtual void setInsetTop(float insetTop);

返回值:virtual void

參數(shù):

類型參數(shù)名說明
floatinsetTop上側拉伸區(qū)域

解釋設置上側拉伸區(qū)域


virtual void setInsetRight(float insetRight);

返回值:virtual void

參數(shù):

類型參數(shù)名說明
floatinsetRight右側拉伸區(qū)域

解釋設置右側拉伸區(qū)域


virtual void setInsetBottom(float insetBottom);

返回值:virtual void

參數(shù):

類型參數(shù)名說明
floatinsetBottom下側拉伸區(qū)域

解釋設置下側拉伸區(qū)域


virtual void setColor(const CAColor4B& color);

返回值:virtual void

參數(shù):

類型參數(shù)名說明
const CAColor4B&color顏色

解釋設置顏色


virtual const CAColor4B& getColor();

返回值:virtual const CAColor4B&

參數(shù):

解釋獲取顏色


virtual void setAlpha(float alpha);

返回值:virtual void

參數(shù):

類型參數(shù)名說明
floatalpha透明度

解釋設置透明度


virtual CAView* copy();

返回值:virtual CAView*

參數(shù):

解釋復制


virtual void setImage(CAImage* image);

返回值:virtual void

參數(shù):

類型參數(shù)名說明
CAImage*image圖像

解釋設置圖像


using CAView::getImage;

返回值:using

參數(shù):

解釋獲取圖像


virtual void draw(void);

返回值:virtual void

參數(shù):

類型參數(shù)名說明
voidvoid

解釋重新繪制圖像

以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號