ycc.js
Version:
Mini and powerful canvas engine for creating App or Game.
95 lines (84 loc) • 2.15 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆Circle测试示例</title>
<link rel="stylesheet" href="../style.css">
<meta name=viewport content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
</head>
<body>
<div class="tip">
<h3>示例说明：</h3>
<div>
1、这个示例展示系统的圆UI。<br>
2、蓝色圆经过了旋转，其旋转中心通过anchorX、anchorY设置在圆外的(0,0)位置，旋转了90度。<br>
3、红色圆其旋转中心通过anchorX、anchorY设置在圆上最左侧的位置，旋转了180度。<br>
4、虚线标注了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 = 400;
document.getElementById("canvas").appendChild(canvas);
var ycc = new Ycc();
ycc.bindCanvas(canvas);
// 新建图层
var layer = ycc.layerManager.newLayer({enableEventManager:true});
var pa = new Ycc.UI.Circle({
name:"parent",
fill:true,
fillStyle:'blue',
isDrawIndex:true,
isShowRotateBeforeUI:true,
point:new Ycc.Math.Dot(100,0),
r:60,
color:'blue',
anchorX:0,
anchorY:0,
rotation:90,
// x:20,
// y:20,
ontap:function (e) {
console.log(e);
}
});
layer.addUI(pa);
var son = new Ycc.UI.Circle({
name:"son",
fill:true,
isDrawIndex:true,
isShowRotateBeforeUI:true,
point:new Ycc.Math.Dot(200,200),
r:60,
color:'red',
anchorX:200-60,
anchorY:200,
rotation:180,
// x:20,
// y:20,
ontap:function (e) {
console.log(e);
}
});
pa.addChild(son);
ycc.layerManager.reRenderAllLayerToStage();
layer.onmousemove=function (e) {
/*console.log(e);
pa.fillStyle="blue";
son.fillStyle="red";
if(pa.containDot(e)) pa.fillStyle="yellow";
if(son.containDot(e)) son.fillStyle="yellow";
ycc.layerManager.reRenderAllLayerToStage();*/
};
layer.ontap = function (e) {
console.log('layer -> ',e);
};
</script>