文档章节

微信赛车源码搭建 html5画出自己的UI组件

 巨牛牛头
发布于 2018/04/23 16:53
字数 500
阅读 42
收藏 0

TML5开源引擎lufylegend-1.7.1版的下载包,微信赛车源码搭建bbs.yasewl.com内包含了lufylegend.ui-0.1.0.js文件,它是一个 lufylegend.js引擎的专用UI组件,我在api的介绍里也说了,这个UI组件是专门为懒人准备的,包含按 钮,单选框,多选框,组合框,滚动条等UI。

下面我来具体说一说这些UI的绘制过程,也方便 大家更好的理解和扩展新的UI组件。 1,矩形按钮LButtonSample1

首先来看看 LButtonSample1按钮的绘制。

在lufylegend.js引擎中可以利用LButton类来添加一个按钮,但 是你需要传入按钮弹起和按钮按下的两个状态的可视对象,可以是LSprite,也可以是LBitmap,想要漂 亮一点的按钮的朋友们可以使用一张漂亮的图片,一般做法如下

btn01 = new LButton(new LBitmap(new LBitmapData(imglist["replay_button_up"])),new LBitmap(new LBitmapData(imglist["replay_button_over"])));

当然,也可以使用LSprite对象 的graphics属性绘制一个图形,一般做法如下

上面的代码只是绘制了两个不同颜色的矩形而已,当然不 够美观,LButtonSample1对象就是在这种方法的基础上来制作的。

看LButtonSample1的构造器 代码

第2页

可以看到它继承自LButton,所以它有LButton的所有方法和属性,同时利用了btn_up和 btn_down作为按钮的两个状态,传给了它的父类LButton。

btn_up作为按钮的弹起的状态,它包 含了两个LSprite对象(shadow和back)和一个LTextField对象,shadow用来给按钮设置阴影效果, LTextField对象用来显示按钮文字。

按钮的绘制过程是在_onDraw函数中,如下。

在_onDraw函数中,显示新建了两个渐变的颜色,然后分别在按钮的两个状态中绘制了两个 普通的矩形,这样一个按钮就绘制成功了

© 著作权归作者所有

粉丝 0
博文 1
码字总数 500
作品 0
南京
私信 提问
HTML5 开源前端框架 Amaze UI 发布 1.0 正式版

10月28日,万维网联盟(W3C)宣布HTML5标准最终制定完成并对外发布,这对于HTML5来说有着里程碑似的意义。作为国内首款 HTML5 开源前端框架,Amaze UI 也在同一天发布了1.0正式版。 Amaze UI 在...

oschina
2014/11/04
18.6K
40
开发时间缩短90% Amaze UI助H5梦工场响应式网站快速上线

近日,HTML5梦工场使用云适配开源HTML5跨屏前端框架Amaze UI对自身网站进行了重新开发。开发完成的新网站,用户无论通过任何终端访问,网站内容都能保持实时同步,并能以最佳的展现方式呈现出...

云适配
2016/05/17
3
0
Amaze UI让HTML5 Web应用接近原生体验

近日,第四届HTML5峰会在北京国际会议中心拉开序幕,云适配携其“HTML5跨屏前端框架Amaze UI”高调亮相,并在大会上了做了《组件化-Web前端开发的未来趋势》的重要演讲。 组件化是Web开发的未...

妹子有爱
2015/08/10
237
0
Amaze UI 让 HTML5Web 应用接近原生体验

近日,第四届HTML5峰会在北京国际会议中心拉开序幕,云适配携其“HTML5跨屏前端框架Amaze UI”亮相,并在大会上了做了《组件化-Web前端开发的未来趋势》的重要演讲。 组件化是Web开发的未来趋...

妹子有爱
2015/08/10
2.8K
2
作品市集-分类数据整理

服务 开发 1.前端开发 2.Android开发 3.IOS开发 4.后端开发 5.Web开发 6.微信开发 测试 1.功能测试 2.性能测试 推广SEO 1.SEO优化 2.微信推广 3.论坛推广 设计/UI 1.网页设计 2.APP设计 3.视...

OSC闲人
2015/07/06
1
0

没有更多内容

加载失败,请刷新页面

加载更多

同名依赖,多次引入导致的程序错误

表现: 本地测试正常,打包上线后报错找不到某个方法(缺少依赖),检测依赖发现,同名依赖有两个版本。 解决:删除一个,程序正常

避难所
30分钟前
3
0
在HTML中的下拉框中实现超连接

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <link rel="canonical" href="https://blog.csdn.net/weixin_34228617/article/details/86130280"/> ......

mickelfeng
35分钟前
3
0
Content7关闭防火墙命令

在外部访问CentOS中部署应用时,需要关闭防火墙。 关闭防火墙命令:systemctl stop firewalld.service 开启防火墙:systemctl start firewalld.service 关闭开机自启动:systemctl disable f...

无名氏的程序员
37分钟前
3
0
分布式存储原理:TiDB

浮躁的码农
49分钟前
7
0
CSS实现圆角边框的完美解决方案

css实现图片圆角,兼容所有浏览器: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <style type= "text/css" > /*通用样式--容器宽度值*/ .s......

前端老手
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部