Ycc引擎中的图层和UI系统

离上篇文章《Hello,Ycc!》已经过了一个月了,事情确实太多了,对不住关注这个项目的人了![抱拳][抱拳]!这篇教程我们就来学习一下引擎中至关重要的两个要素–图层和UI

图层系统

图层,可以理解为一个透明容器,它的作用是用来承载UI的。不考虑设备性能的前提下,一个图层是可以容纳无数个UI的。如果你了解过PhotoShop这个软件,请联想一下它里面的图层体系,原理是一模一样的。

下面我们就来看看图层系统的使用。

图层的创建

使用Ycc引擎创建一个图层是很简单的,直接调用图层管理器的newLayer方法即可

var layerDemo = ycc.layerManager.newLayer({enableEventManager:true,name:'示例图层'});

当然,在使用ycc实例之前,你必须先建立舞台,并与Ycc实例绑定,大致如下:

var ycc = new Ycc();    
var stage = ycc.createCanvas({width:300,height:150,dpiAdaptation:true});
document.body.appendChild(stage);    
ycc.bindCanvas(stage);

之后的所有教程都默认你已经进行了舞台的创建和绑定。

图层的属性

图层有很多属性,上面创建图层的时候我们传递了参数

{enableEventManager:true,name:'示例图层'}

参看API文档[https://www.lizhiqianduan.com/products/ycc/docs]后,我们可以知道这两个属性的作用:

enableEventManager boolean类型 代表是否监听舞台的事件。用于控制舞台事件是否广播至图层。默认关闭
name string类型 用于指定图层的名字

所以,上面我们创建的图层开启了事件监听,并且指定了一个名字“示例图层”。

除此之外,图层还有很多其他的属性,比如:

位置属性 x,y
显示属性 show
事件属性 ontap,ontouchstart,onswipe,onrotate...
...

详细属性还是请参看API文档[https://www.lizhiqianduan.com/products/ycc/docs]。

图层的事件

图层虽然是一个透明容器,但它也是可以监听舞台事件的。整个Ycc引擎的事件流也是基于树结构的,图层介于舞台和UI之间,它起到了事件中转的作用。关于引擎的事件机制后续我们再来详细的学习,此处只需学习如何使用即可。

你可以通过事件属性的方式来监听事件,如:

layerDemo.ontap = function(e){
    console.log('属性方式,图层被点击了!');
}

也可以使用事件监听方法来监听,如:

layerDemo.addListener('tap',function(e){
    console.log(监听方式,图层被点击了!);
})

需要注意的是,当事件触发时,监听方法addListener添加的多个监听函数都会被执行,而属性方式只会有一个被执行。

其他事件的监听与此类似,这里不再累赘叙述。

详细事件列表还是请参看API文档[https://www.lizhiqianduan.com/products/ycc/docs]。

图层的方法

图层有很多常用的方法,比如

添加UI

layerDemo.addUI(ui)

移除UI

layerDemo.removeUI(ui)

重绘图层

layerDemo.reRender()

移除自身

layerDemo.removeSelf()

等等等。

借助于这些方法,我们可以很好地管理图层自身,也能很好的管理图层下的UI。

UI系统

上面的图层理解起来可能比较空洞,毕竟看不见摸不着。下面我们就来看看UI系统。

UI的创建

Ycc引擎内置了一系列的UI,它们全部以“Ycc.UI.”开头。

如果你需要创建一个方块Rect,那么你只需要

new Ycc.UI.Rect(options)

如果你需要创建一个圆,你只需要

new Ycc.UI.Circle(options)

如果是一条线

new Ycc.UI.Line(options)

一行文本

new Ycc.UI.SingleLineText(options)

一张图

new Ycc.UI.Image(options)

等等等。

Ycc引擎内置的UI基本上已经满足大部分场景了,如果有特殊情况的UI,开发者可自行扩展。

内置的UI列表还是请各位开发者参考API文档[https://www.lizhiqianduan.com/products/ycc/docs],以Ycc.UI开头的类便是UI类。

UI的属性

UI作为用户可见的元素,它的属性是相当多的。

UI的继承关系:所有UI全部继承自多边形Ycc.UI.Polygon,而多边形又继承自Ycc.UI.Base。

所以它们都有一些公用的属性,比如,

位置属性          x,y,width,height
透明度属性        opacity
旋转属性          rotation
锚点属性          anchorX,anchorY
事件属性          ontap,ontouchstart,onswipe,onrotate...
...

除此之外,各个UI又有自己的一些属性。

比如,

圆Ycc.UI.Circle,有自己的圆心点坐标、半径等属性。

文本Ycc.UI.SingleLineText,有自己的内容、行高、对齐方式等属性。

详细属性还是请参看API文档[https://www.lizhiqianduan.com/products/ycc/docs]。

UI的事件

UI的事件和图层的事件使用方法是一模一样的,这里就不再累赘叙述。

原因在于,它们都是继承自Ycc.Listener类,关于事件机制之后会专门来讲解。

图层和UI的渲染流程

上面的两部分内容,仅仅是说明了图层和UI的使用。对于一个稍微复杂一点的项目,我们可能有多个图层,图层下可能还有多个UI。

对于这种情况,我这里专门做一个图来说明一下渲染流程。

image.png

通过上图可以看出来,

图层和UI的渲染,始终是从第一个图层的第一个一级UI开始的;

当一级UI还包含子UI时,渲染流程会向下级进行扩展,依次渲染其子级UI;

当子级UI渲染完成之后,再回到上级UI依次进行渲染;

以此方式递归进行,直到最后一个UI渲染完成,整个渲染流程结束。

注意一点:渲染流程中,处于后面渲染的UI,会覆盖之前渲染的UI。

这便是整个图层和UI的渲染流程,开发者需要牢记此流程图!

最后

实在是不想写了,写一篇教程会花费我2-3个小时,真的心有余而力不足!更多内容,参考我写的一个示例吧!

示例地址:https://www.lizhiqianduan.com/products/ycc/examples/multiple-layer/

点开链接后,点击新建图层,可以在舞台上写字,写的字会实时反映在图层列表上。

可以建立很多个图层,建立新的图层后,写的字只会包含在新建的图层上。

另外,还可以整体调整图层的位置,显示等基础属性。

相对来说是一个综合性较强的示例了。

附:Ycc项目地址:https://github.com/lizhiqianduan/ycc



打赏作者

发表评论

电子邮件地址不会被公开。 必填项已用*标注