CAScale9ImageView(九宮格圖片拉伸)

2018-08-27 17:09 更新

類說(shuō)明

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


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

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


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

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


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

CAScale9ImageView

實(shí)例代碼:
CAScale9ImageView
void FirstViewController::viewDidLoad()
{ //創(chuàng)建
CAScale9ImageView* first9IV = CAScale9ImageView::createWithImage(
CAImage::create("source_material/btn_rounded_normal.png"));
//設(shè)置顯示大?。ɡ旌蟮拇笮。?/div> //設(shè)置非拉伸區(qū)域?yàn)?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( //設(shè)置非拉伸區(qū)域與頂部的距離 second9IV->setInsetTop(3.0f);
second9IV->setInsetLeft(3.0f);
//設(shè)置非拉伸區(qū)域與底部的距離 second9IV->setInsetBottom(3.0f); //設(shè)置非拉伸區(qū)域與右邊的距離 second9IV->setInsetRight(3.0f); //設(shè)置非拉伸區(qū)域與左邊的距離
CALabel* image9Label = CALabel::createWithFrame(DRect(400, 200, 150, 40));
//設(shè)置顯示區(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宮格拉伸 設(shè)置大小與上同 CAImageView* imageView = CAImageView::createWithFrame(DRect(400, 300, 150, 40)); //設(shè)置顯示圖片 //添加渲染 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 屬性說(shuō)明

OriginalSize

類型:DSize

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


CapInsets

類型:DSize

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


InsetLeft

類型:float

解釋:左側(cè)拉伸距離。get{}。


InsetTop

類型:float

解釋:上側(cè)拉伸距離。get{}。


InsetRight

類型:float

解釋:右側(cè)拉伸距離。get{}。


InsetBottom

類型:float

解釋:下側(cè)拉伸距離。get{}。


CAScale9ImageView 方法說(shuō)明

static CAScale9ImageView* create();

返回值:static CAScale9ImageView*

參數(shù):

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


static CAScale9ImageView* createWithImage(CAImage* image);

返回值:static CAScale9ImageView*

參數(shù):

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

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


static CAScale9ImageView* createWithFrame(const DRect& rect);

返回值:static CAScale9ImageView*

參數(shù):

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

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


static CAScale9ImageView* createWithCenter(const DRect& rect);

返回值:static CAScale9ImageView*

參數(shù):

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

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


virtual bool init();

返回值:virtual bool

參數(shù):

解釋初始化


virtual bool initWithImage(CAImage* image);

返回值:virtual bool

參數(shù):

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

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


virtual void setCapInsets(const DRect& capInsets);

返回值:virtual void

參數(shù):

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

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


virtual void setInsetLeft(float insetLeft);

返回值:virtual void

參數(shù):

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

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


virtual void setInsetTop(float insetTop);

返回值:virtual void

參數(shù):

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

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


virtual void setInsetRight(float insetRight);

返回值:virtual void

參數(shù):

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

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


virtual void setInsetBottom(float insetBottom);

返回值:virtual void

參數(shù):

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

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


virtual void setColor(const CAColor4B& color);

返回值:virtual void

參數(shù):

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

解釋設(shè)置顏色


virtual const CAColor4B& getColor();

返回值:virtual const CAColor4B&

參數(shù):

解釋獲取顏色


virtual void setAlpha(float alpha);

返回值:virtual void

參數(shù):

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

解釋設(shè)置透明度


virtual CAView* copy();

返回值:virtual CAView*

參數(shù):

解釋復(fù)制


virtual void setImage(CAImage* image);

返回值:virtual void

參數(shù):

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

解釋設(shè)置圖像


using CAView::getImage;

返回值:using

參數(shù):

解釋獲取圖像


virtual void draw(void);

返回值:virtual void

參數(shù):

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

解釋重新繪制圖像

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)