Hello,Ycc!

作为Ycc引擎的第一篇教程,不免俗套,还是教大家写一个最简单的Hello,Ycc吧!

Ycc是什么?

Ycc是一套迷你的Canvas绘图渲染引擎,目前v0.0.5版本压缩后的总大小仅仅76KB。

1、它封装了Canvas底层基础的API,并以UI组件的形式暴露给开发者,各个UI之间还实现了一种树形的嵌套结构;

2、它还实现了一套图层体系,各个UI可以放入不同图层,开发者能很方便的将UI进行分组管理;

3、还有一套完整的事件触发机制,Canvas所触发的事件,会对应的转发给UI或者图层,而且移动端的多点手势和PC端的鼠标完美兼容;

4、UI或者图层在收到事件的时候,可以借助系统的心跳系统实时的更新UI的各种属性;

5、除此之外,还有很多特性,比如高分屏、资源加载器、离屏缓存等等,这个渲染引擎也都是支持的。

对于引擎的兼容性也是很好的,不就能兼容H5环境,还能兼容微信小程序、小游戏等只要提供Canvas绘图环境的地方,都可以使用!

引擎虽小,功能强大!

关于Ycc的UI嵌套系统只需记住下面这张图即可!

1574156699662388.png

有了这么多丰富特性的支持,下面我们就用H5端做个示例,来实现一个最简单的界面吧!

起步

在开始之前,你必须先安装引擎,如果你使用了npm或者bower这类包管理器,你可以像下面这样安装

bower install ycc.js
# or
npm install ycc.js

如果你还使用了webpack、babel这类转换打包工具,你可以像下面这样引入Ycc

let Ycc = require('ycc.js');

如果你没有使用包管理器,你可以直接到github下载Ycc开发包,地址:https://github.com/lizhiqianduan/ycc

并在界面引入:

<script src="your-local-path/ycc.js/build/ycc.js" type="text/javascript"></script>

这样我们就能使用Ycc引擎进行开发了,很简单的哦!

创建舞台

我们先来明确下概念,什么是舞台?

舞台实质就是一个Canvas,Canvas的尺寸代表了我们的可视范围

舞台内可以有多个图层,而这些图层下又可以包含多个UI组件。

绝大多数情况下,图层和UI是在可视范围之外的,这跟照相机是一个道理,照片是容纳不下所有风景的,所以舞台这个概念你还可以理解为摄像机的镜头

理解了舞台,我们就是用JS脚本,来创建一个舞台吧!

// 新建Ycc实例
var ycc = new Ycc();
// 新建舞台
var stage = ycc.createCanvas({width:300,height:480,dpiAdaptation:true});
ycc.bindCanvas(stage);
document.body.appendChild(stage);

很简单吧!

上面代码我们仔细看看,在创建舞台之前,我们还创建了一个Ycc实例。

然后,我们还把舞台和这个Ycc实例进行了绑定,也就是说Ycc实例与舞台是一一对应的关系。

参数dpiAdaptation可以让舞台适配高分屏,如果你的项目是在移动设备上显示的话,那这个参数是必传的。

最后一行,我们将舞台置入body内,是因为我们的示例是H5环境,某些绘图环境可能不是必要的哦!

创建一个图层

根据开头的介绍,有了舞台,我们还至少需要一个图层来容纳我们的UI组件,所以我们就来创建它吧!

var layer = ycc.layerManager.newLayer({enableEventManager:true});

创建图层,一行代码就搞定了!

注意到我们在创建图层的时候传递了一个参数enableEventManager,这是为了让图层开启事件系统,用于接收舞台转发的事件。

原因在于,出于性能考虑,图层默认是不开启事件监听的。这也跟我们使用场景相吻合的,并不是所有UI组件都需要接收事件。

这样,我们就可以将不需要监听事件的UI全部放在某一个单独的图层内,以此来减少舞台转发事件的压力。

这是性能优化很好的一个点哦,记住了!

然后,创建一个UI组件

UI组件是位于图层内的显示组件,这是用户能实实在在看到的内容。使用已经封装好的UI组件,能很方便的创建UI。

var text = new Ycc.UI.SingleLineText({content:"Hello,Ycc!",rect:new Ycc.Math.Rect(0,ycc.getStageHeight()/2,ycc.getStageWidth(),30),xAlign:'center'});
text.ontap = function(){
  console.log("点击事件!");
}

这个UI组件是一个单行文本,它使用rect规定它的显示位置坐标,content字段规定了显示的文本,xAlign指定了文本在水平方向居中。

非常简单!

接下来,将UI加入到图层

加入图层的操作,也很简单!直接调用图层的addUI方法就行了。

layer.addUI(text);

最后一步,绘制到舞台

想想我们之前的步骤,我们并没有操作舞台,所有的这一切都是在内存中完成的。所以这最后一步还需要将这些舞台中包含的图层渲染出来。

ycc.layerManager.reRenderAllLayerToStage();

最后一步完成后,舞台中央就会显示文本“Hello,Ycc!”,我们点击文本,还会打印出对应的信息,amazing!!

至此,整个示例结束!

总结

整个过程逻辑很清晰

创建Ycc实例-->创建舞台-->创建图层-->创建UI-->绘制

只要能记得Ycc的树形嵌套结构,相当容易上手!

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

本文示例的完整代码:

// 新建Ycc实例
var ycc = new Ycc();
// 新建舞台
var stage = ycc.createCanvas({width:300,height:480,dpiAdaptation:true});
ycc.bindCanvas(stage);
document.body.appendChild(stage);
var layer = ycc.layerManager.newLayer({enableEventManager:true});
var text = new Ycc.UI.MultiLineText({content:"Hello,Ycc!",rect:new Ycc.Math.Rect(0,ycc.getStageHeight()/2,ycc.getStageWidth(),30),xAlign:'center'});
text.ontap = function(){
  console.log("点击事件!");
}
layer.addUI(text);
ycc.layerManager.reRenderAllLayerToStage();



打赏作者

发表评论

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