bones脚本篇 - 模拟一个按钮

来源：互联网发布：重庆网络推广编辑：程序博客网时间：2024/05/21 22:29

本篇使用image标签来模拟1个按钮的行为，要模拟按钮就要响应事件，除root以外每一个内置标签都可以响应事件。 bones的事件模型类似于dom的事件模型，事件在传递的过程中分为3个阶段 capturing target bublling，
以鼠标事件为例 a，b，c三个节点 a是b的父 b是c的父，当鼠标在c的节点时
事件会先传递给a 然后b 此时是capturing阶段再传给c 此时是target阶段再传个b然后是a此时是bublling阶段具体的描述参照dom文档
支持的事件类型参照bones.h中BonesHandler接口

一：如何模拟一个按钮
通常按钮有4个状态普通状态鼠标进入的高亮状态左键点击的按下状态以及禁用disable状态
按钮的xml文件如下：

<bones>  <head>    <link type ="pixmap" name ="common" file ="../res/common.png"></link>    <link type ="pixmap" name ="highlight" file ="../res/highlight.png"></link>    <link type ="pixmap" name ="press" file ="../res/press.png"></link>    <link type ="pixmap" name ="disable" file ="../res/disable.png"></link>    <link type ="script" module ="test" file="test.lua"></link>    <style>      .red      {      color:#ffff0000;      }      .pic      {      loc:20px 20px;      size:256px 256px;      }    </style>  </head>  <body>    <root id ="main" class ="red" >      <image class ="pic">        <notify name ="onCreate" module ="test" func ="onCreate"></notify>          <notify name ="onHitTest" module ="test" func ="onHitTest"></notify>        <event name ="onMouseDown" phase ="target" module ="test" func ="onMouseDown"></event>        <event name ="onMouseUp" phase ="target" module ="test" func ="onMouseUp"></event>        <event name ="onMouseMove" phase ="target" module ="test" func ="onMouseMove"></event>        <event name ="onMouseLeave" phase ="target" module ="test" func ="onMouseLeave"></event>        <event name ="onMouseEnter" phase ="target" module ="test" func ="onMouseEnter"></event>      </image>    </root>  </body></bones>

test.lua:

local mod = {}--control statelocal common = 1local highlight = 2local press = 3local disable = 4--buttonlocal function isEnable(self)    return self.enable_endlocal function stateChanged(self)    local state = common;    if self:isEnable() ~= true then        state = disable;    elseif self.down_ then        if self.hover_ then        state = press;        else        state = highlight;        end    elseif self.hover_ then        state = highlight;    end    if state ~= self.state_ then         self.state_ = state;        if self.state_ == common then            self:setContent("common")        elseif self.state_ == highlight then            self:setContent("highlight")        elseif self.state_ == press then            self:setContent("press")        elseif self.state_ == disable then            self:setContent("disable")        end    endendfunction mod.onCreate(self)--public methodself.isEnable = isEnable--private memberself.enable_ = trueself.hover_ = falseself.down_ = falseself.state_ = disablestateChanged(self)endfunction mod.onHitTest(self, x, y)    return self:isTransparent(x, y)endfunction mod.onMouseEnter(self, e)endfunction mod.onMouseMove(self, e)    self.hover_ = self:contains(e:getLoc())    stateChanged(self);endfunction mod.onMouseDown(self, e)    if self:isEnable() and e:isLeftMouse() then        if not self.down_ then            self.down_ = true            stateChanged(self)        end    endendfunction mod.onMouseUp(self, e)    local notify = false    if self:isEnable() and e:isLeftMouse() then        if self.down_ then            self.down_ = false            if self.hover_ then                notify = true            end            stateChanged(self)        end        if notify then            print("click")        end    endendfunction mod.onMouseLeave(self, e)    self.hover_ = false    self.down_ = false    stateChanged(self)endreturn mod;

这里我们链接了4幅图片并响应了mouse事件，具体如何响应参照lua代码, 这里用到了一个新的通知onHitTest 这个通知是用来自定义鼠标响应区域的，当鼠标在标签上的时候 onHitTest如果返回true则响应鼠标否则交给其他标签处理，这里通过isTransparent来看位图像素是否为透明如果透明则不处理
效果图：
这里写图片描述

本篇代码下载:
http://blog.csdn.net/dalixux/article/details/48830721

0 0