基本控件使用（一）（遮罩、HTTP请求、ControlSlider、ControlSwitch、ProgressTo）

在大厅场景中，我们只练习一些基本控件的使用：裁剪、滚动条、屏蔽触摸、tableview、scrollview、刷新控件、http请求、内嵌网页，定时器。

1)    裁剪区域（公告中常用）

local noticeBg = cc.Sprite:create(“hall/noticeBg.png”)

noticeBg:setPosition(cc.p(size.width/2, size.height*0.77+10))

layer:addChild(noticeBg)

local labelNoticeStr = cc.Label:createWithSystemFont(“你好，Lua，我是新手，请指教”, “Arial”, 32)

labelNoticeStr:setAnchorPoint(cc.p(0, 0))

labelNoticeStr:setPosition(cc.p(noticeBg:getPositionX()+noticeBg:getContentSize().width/2,size.height*0.77+10))

//设置遮罩

local drawNode = cc.DrawNode:create()

local points ={cc.p(size.width/2-noticeBg:getContentSize().width/2+56, size.height*0.77-16),

                                                                                                            cc.p(size.width/2+noticeBg:getContentSize().width/2-15,size.height*0.77-16),

                                                                                                            cc.p(size.width/2+noticeBg:getContentSize().width/2-15,size.height*0.77+36),

                                                                                                            cc.p(size.width/2-noticeBg:getContentSize().width/2+56,size.height*0.77+36)

                                                                 }

drawNode:drawPolygon(points, table.getn(points), cc.c4f(255,255, 255, 255), 2, cc.c4f(255, 255, 255, 255))

local cliper = cc.ClippingNode:create()

cliper:setStencil(drawNode)

cliper:setAnchorPoint(cc.p(0, 0))

cliper:addChild(labelNoticeStr)

layer:addChild(cliper, 1)

//设置文字循环滚动

local fWidth = labelNoticeStr:getContentSize().width

local moveTo =cc.MoveTo:create((fWidth+noticeBg:getContentSize().width-71)/200,cc.p(noticeBg:getPositionX()-noticeBg:getContentSize().width/2-fWidth,size.height*0.77+10))

local moveTo1 = cc.MoveTo:create(0,cc.p(noticeBg:getContentSize().width/2+noticeBg:getPositionX(),size.height*0.77+10))

local seq = cc.Sequence:create(moveTo, moveTo1)

labelNoticeStr:runAction(cc.RepeatForever:create(seq))

这样就实现了文字的遮罩，实现图片遮罩也类似。

2）Http请求

上面的遮罩中，我们的文字是客户端固定好了，但是需求往往不是这样，而是可能要发生变化的，所以这时我们从网页上获取这些内容。

在lua中，http请求用的是XMLHttpRequest这个类，具体用法如下：

local url = string.format(“http://www.baidu.com”)

local xhr = cc.XMLHttpRequest:new()

xhr.responseType = cc.XMLHTTPREQUEST_RESPONSE_JSON

xhr:open(“GET”, url)

local function onReadyStateChange()

                      ifxhr.readyState == 4 and (xhr.status >= 200 and xhr.status < 207) then

                                           print(xhr.responseText:)                                        --responseText就是请求返回的内容

                                           --这里可以对内容进行解析，然后做相应的逻辑处理操作

                      end

                      xhr.unregisterScriptHandler()

end

xhr:registerScriptHandler(onReadyStateChange)

xhr:send()

上面这个http请求方式是GET请求，有时候我们也要使用POST请求，只需要修改

xhr:open(“POST”, url)

3）设置界面（slider、开关控件switch）

local sliderMusic = cc.ControlSlider:create("setting/effort2.png","setting/effort1.png", "setting/effortBtn.png")

sliderMusic:setPosition(ccp(bg:getContentSize().width/2+60,bg:getContentSize().height/5*4-72))

sliderMusic:setTag(102)

sliderMusic:setMinimumValue(0.0)

sliderMusic:setMaximumValue(1.0)

sliderMusic:setValue(1.0)

bg:addChild(sliderMusic)

 

local switchShadow = cc.ControlSwitch:create(cc.Sprite:create("setting/switch_mark.png"),cc.Sprite:create("setting/yinyueOn.png"),cc.Sprite:create("setting/yinyueOff.png"),cc.Sprite:create("setting/yinyueBtn1.png"), cc.Label:createWithSystemFont("ON","Arial", 32),cc.Label:createWithSystemFont("OFF","Arial", 32))

switchShadow:setPosition(cc.p(bg:getContentSize().width/3+15,bg:getContentSize().height/4+28))

switchShadow:setTag(104)

switchShadow:setOn(true)

bg:addChild(switchShadow)

local function funcValueChanged(pSender)

      local slider = pSender

      local tag = slider:getTag()

                      if tag == 102 then

                                           print("sliderMusicclick")

                      elseif tag == 104 then

                                           print("switchShadowclick")

                      end

end

sliderMusic:registerControlEventHandler(funcValueChanged,cc.CONTROL_EVENTTYPE_VALUE_CHANGED)

switchShadow:registerControlEventHandler(funcValueChanged,cc.CONTROL_EVENTTYPE_VALUE_CHANGED)

4）刷新控件（ProgressTo）

local progressTo = cc.ProgressTo:create(2, 100)  --持续时间  进度百分比

local progressTimer =cc.ProgressTimer:create(cc.Sprite:create("hall/backItem.png"))

--progressTimer:setMidpoint(cc.p(0, 0))                             --进度条起始点（0，0）表示左下角

--progressTimer:setBarChangeRate(cc.p(1, 0))                --进度条动画防线（1，0）表示横向（0，1）表示纵向

--progressTimer:setType(cc.PROGRESS_TIMER_TYPE_BAR)--进度条类型（条形进度类型）

progressTimer:setType(cc.PROGRESS_TIMER_TYPE_RADIAL--以原点为中心刷新

bg:addChild(progressTimer)

progressTimer:setPosition(cc.p(progressTimer:getContentSize().width+10,bg:getContentSize().height-progressTimer:getContentSize().height-10))

progressTimer:runAction(progressTo)