image標籤可以對圖片進行處理 如九宮格拉伸， 顏色矩陣等。
bones提供了一個資源管理器 管理圖片，但在腳本封裝中 隱藏了這個資源管理器
要想在腳本中使用圖片 需要通過link標籤將圖片鏈接進去 並用name來指明 它在
資源管理器中的key，這樣可以在腳本中使用key來獲取圖片信息以及裁剪圖片
一：如何創建image
除root以外的內置標籤，它們的父應該是其他內置標籤，一個創建image的xml文件:
<bones>
<head>
<link type ="pixmap" name ="bg" file ="../../res/pic.jpg"></link>
<style>
.red
{
color:#ffff0000;
}
.pic
{
loc:20px 20px;
size: 180px 135px;
content:bg;
}
</style>
</head>
<body>
<root id ="main" class ="red" >
<image class ="pic"></image>
</root>
</body>
</bones>每一個內置標籤都支持 loc size 屬性 這2個屬性用於控制節點的位置和大小
其中loc 的位置是相對於父節點的 而size 則是image標籤的大小，這裏設置的大小恰好是圖片的大小180X135 需要注意的是 loc和size 的值必須以px結尾（模仿了CSS）
content 屬性則是image 支持的 它的值是一個字符串，這個字符串就是link 的name指明的key
效果圖：
二：動態獲取圖片的大小
通常我們在寫程序的時候是不知道圖片的大小 所以需要動態獲取圖片的大小
test.xml:
<bones>
<head>
<link type ="pixmap" name ="bg" file ="../../res/pic.jpg"></link>
<link type ="script" module ="test" file="test.lua"></link>
<style>
.red
{
color:#ffff0000;
}
.pic
{
loc:20px 20px;
}
</style>
</head>
<body>
<root id ="main" class ="red" >
<image class ="pic">
<notify name ="onCreate" module ="test" func ="onCreate"></notify>
</image>
</root>
</body>
</bones>test.lua:
local mod = {}
function mod.onCreate(self)
local w, h = bones.getPixmapSize("bg")
self:setContent("bg")
self:setSize(w, h)
end
return mod;在onCreate通知中獲取bg指向的圖片大小並設置
注意lua中.和:的區別
三：圖片縮放
當圖片大小和image大小不一致時，默認情況下image不會對圖片進行縮放（圖片大小超出時 只顯示圖片在image的那部分）
image 提供了setStretch 和setNine 來對圖片進行普通拉伸和九宮格拉伸如果調用過setStretch後想讓image 不再對圖片進行處理可以調用setDirect。
setStretch setNine setDirect文檔參考bones.h中BonesImage接口描述
BonesImage是C++接口 但參數意義與腳本基本一致 ，但需要注意的是 腳本層沒有提供對Rect Point Size的封裝，而是以多個number來代替，比如setDirect 的參數是個Point 那麼 腳本的參數就是2個number，對於某些接口參數是指針的 並且 指針可以爲空的 腳本可以不傳參數
test.xml:
<bones>
<head>
<link type ="pixmap" name ="bg" file ="../../res/pic.jpg"></link>
<link type ="script" module ="test" file="test.lua"></link>
<style>
.red
{
color:#ffff0000;
}
.pic
{
loc:20px 20px;
size:200px 300px;
}
</style>
</head>
<body>
<root id ="main" class ="red" >
<image class ="pic">
<notify name ="onCreate" module ="test" func ="onCreate"></notify>
</image>
</root>
</body>
</bones>test.lua:
local mod = {}
function mod.onCreate(self)
self:setContent("bg")
self:setStretch()
end
return mod;這裏爲了展示拉伸 所以 image的大小設置爲200， 300 超過圖片的大小，效果圖：
四：顏色矩陣
image目前支持顏色矩陣，通過調用setColorMatrix來設置
顏色矩陣的具體值可以通過第三方圖片處理軟件來獲取
這裏簡單的實現 泛紅的效果
local mod = {}
function mod.onCreate(self)
self:setContent("bg")
self:setStretch()
self:setColorMatrix(2, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0)
end
return mod;效果圖：
本篇代碼下載：
http://blog.csdn.net/dalixux/article/details/48830721