Tui-x简介

1.什么是Tui-x

Tui-x是一个创建cocos2d-x UI界面的解决方案,而builder用的则是FlashCS,通过使用jsfl来拓展FlashCS从而达到UI编辑器的功能。这个jsfl所做的工作十分简单,举个例子,如果你的项目是CPP的话,它会帮你导出一份界面xml和一个.h,xml文件将会使用tui的解析库来解析,头文件则是一个tag的映射表,(如果是Lua项目则会帮你导出xml和lua文件),你可以利用这个tag映射表轻松地获取任意一个控件。


2.Tui-x所生成组件是什么

Tui-x所生成组成来自CocosWidget,这是一个优秀的第三方组件库,包含富文本,网格等高级控件,数量之多,质量之高,绝不亚于其他任何一款编辑器。(注:CocosWidget简称ccw) 值得一提的是,Tui-x已经可以完全可视化生成所有ccw的控件,包括CTableView,CListView,CGridView等高级复合控件,这些编辑操作完全在FlashCS中完成,门槛十分低廉,你甚至可以完全交给美术和策划去做界面。

(设计界面)


(生成界面)


3.Tui-x的特点是什么

①Tui-x使用门槛十分低廉,只要会使用FlashCS创建影片剪辑即可进行开发。一个场景对应一个fla文件,便于美术分工,互不依赖。所有组件的创建需要遵循命名规则,如果你之前有玩过mornui的话,将会十分有亲切感。举例,创建一个按钮,需要创建一个影片剪辑并改名,成btn_前缀,如btn_ok,这个按钮所使用的资源图会根据你这个影片剪辑所在库路径去找相应的资源。如,这个btn_ok在fla库中的main/下,那么它在游戏中会去找Resouce/main/下的btn_ok_normal.png,btn_ok_select.png 和 btn_ok_disable.png 。(注:找不到纹理不会崩) 这里的_normal就是固定的后缀命名规则,而btn_则是固定的前缀命名规则,在下篇文章中将会详细列出所有命名规则。

②Tui-x的资源管理十分自由,完全交由开发者管理,自己加载plist和自己删除plist,这样看起好像不太智能,其实是把管理权还给开发者。这样有利于资源重用。控件创建分两种模式,spriteFrame和普通png图。[spriteFrame模式:加载plist,并使用该纹理创建控件] [普通png图:直接用散图png来创建控件]  在只要在fla库中,把目录结构跟项目真实资源目录一一对应,然后在把控件spriteFrame勾选上即可。


③利用FlashCS的先天优势,Tui-x可以做到很多ccs和ccb都做不到的事,比如字体描边和阴影,运行效果如上图。编辑复合控件,如CListView和CGridView等,做背包so easy。

3.Tui-x的触摸机制是怎样的

Tui-x严格来说,它不是一套框架,它只是一个工具,帮助开发者生成ccw,所以它的触摸机制就是ccw的树状触摸方式,所有触发事件全部来自CWidgetWindow分发,更多关于cocoswiget的描述请戳http://blog.csdn.net/cocosviva/article/details/18970717  ,值得一提的是,在ccw里要实现popup效果将会是一件十分简单的事,你根本不用考虑或设置触摸优先级。在github上的例子中有演示。

4.Tui-x的优势是什么

Tui-x有2.2.3 和 3.0 正式版两个版本 ,分别对应cpp 和 lua,满足各个项目的开发需求。而编辑器jsfl的总代码量仅1500行,tui解析库总代码量700行,这个数量级我看除了Tui没有哪款编辑器能做到。有人说:你不就是借Flash的肩膀么,吊什么吊。我只能说,you can you up !  Tui-x就是不重复造轮子的最佳例子。

虽然XML的解析比JSON稍稍慢点,但是Tui-x是使用RapidXML解析,并有做缓存,所以不存在解析瓶颈。

Tui-x不单单只能生成普通控件,它能够生成骨骼,EditBox,粒子等特殊组件,骨骼 推荐使用Flash的龙骨插件 dragonbonepanel 全部都是可视化,完爆ccs的ui编辑器 + 场景编辑 + 骨骼编辑器。[对不起我并没敌意,我只是说实话]

Tui-x拓展性是一流的,学过js的甚至可以直接修改jsfl,在导出的xml中增加若干个字段十分容易。再看看ccw,如果对ccw有了解的话,也可以定义控件并融合到Tui-x中,后面的文章将会教大家如何制作自己的控件,并用Tui-x生成。

Tui-x使用代码十分简单,寥寥几行,通过附送的.h或lua获取任意控件,监听事件。

<span style="font-size:14px;">//cpp
void Mainui::onLoadScene()
{
	TuiManager::getInstance()->parseScene(this,"panel_main",PATH_MAIN);
}
</span>
<span style="font-size:14px;">--lua
function Welcomeui:create()
	local ret = Welcomeui.new()
	TuiManager:getInstance():parseScene(ret,"panel_welcome",PATH_WELCOMEUI)
	return ret
end
</span>

5.为什么要使用Tui-x开发 

Tui-x上手容易,开发便捷,ccw这套组件是久经磨练,精心设计的,接口十分人性化,还包含lua和cpp还有3.x版,由于FlashCS是跨平台的,Tui-x一不小心也跨平台了。另一方面看,cocosbuilder已经没人维护了,忽略。再看cocostudio,经常崩溃不说,你叫美术用来做个场景教半天,还经常投诉难用,再看看导出来的ExportJson,冗余数据一堆,体积大不说,崩溃了还不好调试,富文本中文换行乱码,无力吐槽,你说用ccs做骨骼动画,好吧,错位,各种闪屏。你要记住,开发不是纯写代码的。以上问题Flash都能很好地解决,美术同学更愿意用Flash和Ps。

6.项目历史,鸣谢和交流

Tui-x的诞生前有一个叫tui的项目,也是用jsfl做编辑器,作者 仝鹏飞,但当时的tui控件只有panel,image,button这三个,根本不能满足开发需求,后来Tui-x诞生了,抛弃原有的结构和接口,重新打造全新的Tui-x,之所以叫Tui-x,纯粹是尊重原著。

感谢CocosWidget的作者 李俊霖 Jason.lee 同学,感谢 仝鹏飞 同学。

CocosWidget 官方群261286285 Tui-x 官方群 347085657  

7.下载

Tui-x 2.x :  https://github.com/LingJiJian/tui/tree/Tui-x    Tui-x 3.x  https://github.com/LingJiJian/Tui-x

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
tui-image-editor 是一个基于 JavaScript 和 HTML5 Canvas 的开源图像编辑器,可以实现图像裁剪、旋转、缩放、滤镜、涂鸦等功能。 下面是一个使用 tui-image-editor 实现画图的示例代码: 1. 安装 tui-image-editor 可以使用 npm 或 yarn 安装 tui-image-editor: ```bash npm install tui-image-editor --save # 或者 yarn add tui-image-editor ``` 2. 在组件中引入 tui-image-editor 可以通过 CDN 或模块化方式引入 tui-image-editor: ```html <template> <div ref="editor"></div> </template> <script> import ImageEditor from 'tui-image-editor'; export default { name: 'DrawImage', mounted() { const editor = new ImageEditor(this.$refs.editor, { includeUI: { loadImage: { path: 'https://img-cdn-qiniu.dcloud.net.cn/images/paint.jpg', name: 'SampleImage', }, theme: { // 主题配置 }, menu: ['shape', 'filter'], initMenu: 'filter', uiSize: { // UI 大小配置 }, }, cssMaxWidth: 700, cssMaxHeight: 500, selectionStyle: { cornerSize: 20, rotatingPointOffset: 70, }, }); }, } </script> ``` 在上面的代码中,我们在组件的 template 中添加了一个 div 元素,并使用 ref 属性获取其引用。 在 mounted 钩子函数中,我们通过 new ImageEditor() 创建了一个新的 tui-image-editor 实例,并将其绑定到组件的 $refs.editor 属性上。 通过 includeUI 属性可以配置 tui-image-editor 的 UI 界面,包括加载图片、主题、菜单、UI 大小等。 3. 在组件中使用 tui-image-editor 的 API 可以通过 tui-image-editor 实例的 API 来实现各种画图功能。例如,我们可以在组件中添加一个按钮,点击按钮后在图像上绘制一条线段。 ```html <template> <div> <div ref="editor"></div> <button @click="drawLine">绘制线段</button> </div> </template> <script> import ImageEditor from 'tui-image-editor'; export default { name: 'DrawImage', mounted() { this.editor = new ImageEditor(this.$refs.editor, { includeUI: { loadImage: { path: 'https://img-cdn-qiniu.dcloud.net.cn/images/paint.jpg', name: 'SampleImage', }, theme: { // 主题配置 }, menu: ['shape', 'filter'], initMenu: 'filter', uiSize: { // UI 大小配置 }, }, cssMaxWidth: 700, cssMaxHeight: 500, selectionStyle: { cornerSize: 20, rotatingPointOffset: 70, }, }); }, methods: { drawLine() { const activeObj = this.editor._graphics.getActiveObject(); const points = [ { x: activeObj.left + 50, y: activeObj.top + 50 }, { x: activeObj.left + 100, y: activeObj.top + 100 }, ]; const line = new fabric.Line(points, { strokeWidth: 5, fill: 'red', stroke: 'red', originX: 'left', originY: 'top', }); this.editor._graphics.add(line); this.editor._graphics.renderAll(); this.editor._graphics.setActiveObject(line); }, }, } </script> ``` 在上面的代码中,我们使用了 tui-image-editor 实例的 _graphics 属性来获取当前图像的画布对象,并使用 fabric.js 中的 Line 类来创建一条线段。然后将线段添加到画布对象中,并调用 renderAll() 方法重新渲染画布。 最后,我们使用 setActiveObject() 方法将新创建的线段设为当前选中对象。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值