ycc.js
Version:
Mini and powerful canvas engine for creating App or Game.
71 lines (60 loc) • 2.08 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<title>滚动区域</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<div class="return-btn">
<a href="../">
返回首页
</a>
</div>
<div class="tip">
<h3>示例说明：</h3>
<div>
1、这个示例展示系统的滚动区UI。 <br>
2、绿色区域为滚动区，可以上下拖动。 <br>
3、滚动区内有50条数据，点击他们可以改变色值。 <br>
4、需要注意：滚动区内的点击事件和滚动区的滑动事件是有重叠的，故滚动区内应该尽量避免存在大范围的可点击区域。
</div>
<br><br>
</div>
</body>
</html>
<script src="../common.js"></script>
<script src="http://localhost:9000/livereload.js"></script>
<script src="../../build/ycc.js"></script>
<script>
// 新建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 scroller = new Ycc.UI.ScrollerView({
rect:new Ycc.Math.Rect(30,30,240,300),
selfRender:true,
rectBgColor:'#ff0000',
contentW:240,
contentH:50*100
});
layer.addUI(scroller);
for(var i=0;i<50;i++){
var text = new Ycc.UI.SingleLineText({content:"Hello,Ycc!"+i,rect:new Ycc.Math.Rect(0,100*i,240,100),xAlign:'center',rectBorderColor:'#ccc',rectBorderWidth:1,rectBgColor:'green'});
text.ontap = function (){
console.log(this.content);
this.rectBgColor = this.rectBgColor==='green'?'blue':'green';
ycc.layerManager.reRenderAllLayerToStage();
};
scroller.addChild(text);
}
layer.addUI(new Ycc.UI.SingleLineText({content:'测试：覆盖的UI',xAlign:'center',yAlign:'center',rect:new Ycc.Math.Rect(0,0,120,100),rectBgColor:'red'}));
ycc.ticker.start();
ycc.ticker.addFrameListener(function (frame) {
ycc.layerManager.reRenderAllLayerToStage();
});
</script>