ycc.js
Version:
Mini and powerful canvas engine for creating App or Game.
88 lines (68 loc) • 1.85 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>UI组件测试</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<div class="return-btn">
<a href="../">
返回首页
</a>
</div>
<div class="tip">
<h3>示例说明：</h3>
<div>
这个示例展示系统的UI组件<br>
</div>
<br><br>
</div>
<div id="canvas">
</div>
</body>
</html>
<script src="http://localhost:9000/livereload.js"></script>
<script src="../common.js"></script>
<script src="../../build/ycc.js"></script>
<script>
var canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 800;
canvas.height = 800;
document.getElementById("canvas").appendChild(canvas);
var ycc = new Ycc({debug:{drawContainer:true}});
ycc.bindCanvas(canvas);
// 新建图层
var layer = ycc.layerManager.newLayer({enableEventManager:true});
// 添加至图层
layer.addUI(new Ycc.UI.MultiLineText({
content:"我是多行文本的UI 超出的文字会被忽略 测试文字 测试文字 测试文字 01234567 89012 34567\n1234567890123456789012345678901234\n12345678901234567890",
rect:new Ycc.Math.Rect(20,100,150,100),
rectBgColor:"green",
wordBreak:"break-word",
overflow:"hidden",
ontap:function () {
console.log('text');
}
}));
layer.addUI(new Ycc.UI.ComponentButton({
rect:new Ycc.Math.Rect(50,220,100,30),
rectBgColor:'green',
text:'button2',
ontap:function () {
console.log('button2',Date.now());
}
}));
layer.addUI(new Ycc.UI.ComponentButton({
rect:new Ycc.Math.Rect(20,220,100,30),
rectBgColor:'blue',
// show:false,
text:'button1',
ontap:function () {
console.log('button1',Date.now());
}
}));
ycc.layerManager.reRenderAllLayerToStage();
</script>