bones脚本篇 - 内置标签image

来源：互联网发布：prisma算法编辑：程序博客网时间：2024/06/07 07:06

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)endreturn 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()endreturn 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)endreturn mod;

效果图：
这里写图片描述

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

0 0