ycc.js
Version:
Mini and powerful canvas engine for creating App or Game.
142 lines (113 loc) • 3.31 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>
1、这个示例展示系统的UI，每个UI都绘制了红色的容纳区。<br>
2、这些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 src="https://www.lizhiqianduan.com/products/ycc/build/ycc.js"></script>-->
<script>
var ycc = new Ycc({debug:{drawContainer:true}});
var canvas = ycc.createCanvas({width:300,height:800,dpiAdaptation:true});
document.getElementById("canvas").appendChild(canvas);
ycc.bindCanvas(canvas);
// 新建图层
var layer = ycc.layerManager.newLayer({enableEventManager:true});
// 设置UI属性
var config,ui;
config ={
content:"我是多行文本的UI 超出的文字会被忽略 测试文字 测试文字 测试文字 01234567 89012 34567\n1234567890123456789012345678901234\n12345678901234567890",
rect:new Ycc.Math.Rect(20,100,150,100),
rectBgColor:"green",
wordBreak:"break-word",
opacity:0.1,
overflow:"hidden"
};
// 新建多行文本的UI
ui = new Ycc.UI.MultiLineText(config);
// 添加至图层
layer.addUI(ui);
// 画一个辅助的小框来标识范围
ycc.baseUI.rect([config.rect.x,config.rect.y],[config.rect.x+config.rect.width,config.rect.y+config.rect.height]);
config = {
content:"我是一个单行文本 超出文字会被忽略123 456",
rect:new Ycc.Math.Rect(10,10,280,50),
rectBgColor:"green",
yAlign:"center",
overflow:"hidden"
};
ui = new Ycc.UI.SingleLineText(config);
layer.addUI(ui);
ycc.baseUI.rect([config.rect.x,config.rect.y],[config.rect.x+config.rect.width,config.rect.y+config.rect.height]);
config = {
rect:new Ycc.Math.Rect(200,100,30,50)
};
ui = new Ycc.UI.Rect(config);
layer.addUI(ui);
config = {
start:new Ycc.Math.Dot(0,80),
end:new Ycc.Math.Dot(800,80),
width:3
};
layer.addUI(new Ycc.UI.Line(config));
config = {
point:{x:40,y:400},
r:20
};
ui = new Ycc.UI.Circle(config);
layer.addUI(ui);
config = {
point:{x:180,y:400},
r:20,
width:100,
height:50,
angle:45,
opacity:0.5,
rectBgColor:"green"
};
ui = new Ycc.UI.Ellipse(config);
layer.addUI(ui);
new Ycc.Loader().loadResParallel([
{name:"icon",url:"./img/logo.jpg"},
{name:"scale9Grid",url:"./img/bg.png"},
],function (arr,imgs) {
var config2 = {
res:imgs.icon,
rect:new Ycc.Math.Rect(20,220,240,100),
fillMode:"repeat",
rectBgColor:"blue"
};
layer.addUI(new Ycc.UI.Image(config2));
config2 = {
res:imgs.scale9Grid,
rect:new Ycc.Math.Rect(20,520,200,100),
fillMode:"scale9Grid",
scale9GridRect:new Ycc.Math.Rect(15,15,20,20)
};
layer.addUI(new Ycc.UI.Image(config2));
ycc.layerManager.reRenderAllLayerToStage();
});
ycc.layerManager.reRenderAllLayerToStage();
</script>