做一个功能，当手指放装备图片上面时，上方出现一个装备信息的信息框

第一步：图片绑定监听事件

--根据服务器传回来信息，这里显示不同的图片
img:loadTexture(imgName)
img:setTouchEnable(true)
img:addTouchEventListener(rollCallBack)

local function rollCallBack(sender, eventType)
--配置信息里可根据图片itemid获取图片所有信息，sender._itemid读者可不理
ExplainBoxButton(sender, sender._itemid)
end

第二步：包装显示信息框的函数，让手指放在图片上时，显示信息框，手指离开图片时，信息框销毁

function ExplainBoxButton(button, IconItemid)
-- body
if button ~= nil then
--当button是OnTouchBegan、OnTouchMoved时isHighLighted()函数返回true
--当button是OnTouchended、OnTouchCanceled时isHighLighted()函数返回false
if button:isHighlighted() then
if not button._isShowBox then
--创建一个显示的box
ExplainBoxView(button, tostring(IconItemid))
button._isShowBox = true
end
else
if button._isShowBox then
RemoveExplainBoxLoading()
button._isShowBox = false
end
end
end
end

第三步：实现ExplainBoxView和RemoveExplainBoxLoading两个函数

function RemoveExplainBoxLoading()
-- body
local scene = cc.Director:getInstance():getRunningScene()
local explainBox = scene:getChildByTag(20150729)
if explainBox ~= nil then
explainBox:removeFromParent()
end
end

function ExplainBoxView(button, IconItemid, iconName)
--这里创建一个信息框的类，便于后期的维护和修改
local ExplainBox = require "ExplainBox"
local scene = cc.Director:getInstance():getRunningScene()
local explainBox = ExplainBox.create(IconItemid, iconName)
scene:addChild(explainBox, 9999, 20150729)
--下面是设置信息框的位置
--获取父节点
local parent = button:getParent()
--通过父节点转换坐标为世界坐标
local realPos = parent:convertToWorldSpace(cc.p(button:getPosition()))
--button的宽高
local buttonSize = button:getContentSize()
explainBox:setPosition(320, realPos.y + buttonSize.height * button:getScale() * 0.5 + 50)
explainBox:setAnchorPoint(0.5,0.5)
end

第四步：创建的ExplainBox里面创建背景，图片，描述信息，然后把图片和描述信息加在背景上面

.......
--这里简单写下，类里面内容
--九宫格图片创建方法，cc.rect(0,0,59,59)为bg.png图片尺寸 cc.rect(29,29,1,1)设置九宫格拉升
local bg = cc.Scale9Sprite:create("bg.png",cc.rect(0,0,59,59),cc.rect(29,29,1,1))
--设置九宫格大小
bg:setPreferredSize(cc.size(400,100))
bg:setPosition(0,0)
bg:setAnchorPoint(0.5,0.5)
self:addChild(bg)

local imgBorder = ccui.ImageView:create("table_equip_06.png")
imgBorder:setPosition(10,50)
imgBorder:setAnchorPoint(0,0.5)
--这里需要注意下，九宫格拉升后，9个小图片的zorder是不同的，为了imgBorder能显示在bg上面，zorder设置为2
bg:addChild(imgBorder, 2)

local icon = ccui.ImageView:create(self.iconName)
local targetSize = cc.size(60, 60)
--不知道为什么这里只有这样才能控制图片大小，之前调用setContentSize函数，然而并没有用
local iconSize = icon:getContentSize()
icon:setScaleX(targetSize.width / iconSize.width)
icon:setScaleY(targetSize.height / iconSize.height)
icon:setAnchorPoint(0.5, 0.5)
icon:setPosition(46,46)
imgBorder:addChild(icon)

local titleText = ccui.Text:create()
titleText:setTextHorizontalAlignment(cc.TEXT_ALIGNMENT_LEFT)
titleText:setTextVerticalAlignment(cc.VERTICAL_TEXT_ALIGNMENT_CENTER)
titleText:setTextAreaSize(cc.size(280, 90))
titleText:setFontSize(26)
titleText:setFontName(SGGJLanguage.SimpleChineseTTF)
titleText:setColor(cc.c3b(11, 214, 21))
titleText:setString(self.ExplainText)
titleText:setAnchorPoint(cc.p(0, 0.5))
titleText:setPosition(cc.p(110, 50))
bg:addChild(titleText,2)
.......

ps：本人也才接触cocos2d-lua这个游戏引擎半个月，所以不能保证里面内容是最好的，但是都是经过自己测试，能达到所需要的功能。

要是大家有更好方法，或者对我方法的建议，都可以留言或联系我wu_k_k@foxmail.com