lizhicheng99-qcanvas
/
template14.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>

<script src="js/jquery.js"></script>
	<link href="style/default.min.css" rel="stylesheet">
	<link rel="stylesheet" href="style/style.css">
	<script src="js/highlight.min.js"></script>
		<script>hljs.initHighlightingOnLoad();</script>
		<script src="js/initTemp.js"></script>
</head>
<body>
	<div class="qcanvas_lay">
		blueRect、redRect元素、spirit元素及【我是来自group容器里spirit】是分组容器group里的元素<br>
分组group实例是抽象出来的元素 只在逻辑上把一些元素集合到一块，元素还是一直重绘在主canvas上<br>
		<canvas id="qcanvas"></canvas>
	</div>
	<div class="code_lay">
		<pre><code class="js">var qcanvas = new Qcanvas(["qcanvas",400,300]);

	var greenRect = qcanvas.qrect.rect({
		start:[0,0],
		width:200,
		height:200,
		// drag:false,
		borderColor:'green',
		fillColor:'green',
	})

	var redRect = qcanvas.qrect.rect({
		start:[100,100],
		width:50,
		height:50,
		borderColor:'red',
		fillColor:'red',
		// degree:30
		// drag:false
	})

	var blueRect = qcanvas.qrect.rect({
		start:[120,140],
		width:50,
		height:50,
		borderColor:'blue',
		fillColor:'blue',
		// drag:false
	})


	//layer元素
	var group = qcanvas.qgroup.group();
	console.log(group);

	group.push(redRect);

	group.push(blueRect);


	qcanvas.load({
		"person":"img/spirit1.png",
	},function(){

			var spiritSource = qcanvas.getSourceByName("person");

			var s = qcanvas.qspirit.spirit({
				img:spiritSource,
				row:1,
				column:8,
				framesIndex:[0,0],
				tStart:[0,120],
				tWidth:40,
				tHeight:64,
				isLoop:true,
				during:1,
				mouseup:function(){
					console.log(this);
					console.log('触发mouseup事件');
				}
			})

			var t = qcanvas.qtext.text({
				start:s.tStart,
				text:'我是来自group容器里spirit',
				color:'#000',
				pointerEvent:'none'
			})


			group.push(t);
			group.push(s);

	})


	qcanvas.qtext.text({
		start:[200,20],
		text:'greenRect上移一层',
		color:"yellow",
		drag:false,
		mouseup:function(){
			qcanvas.raise(greenRect);
		}
	})

	qcanvas.qtext.text({
		start:[200,40],
		text:'greenRect下移一层',
		color:"yellow",

		drag:false,
		mouseup:function(){
			qcanvas.lower(greenRect);
		}
	})

	qcanvas.qtext.text({
		start:[200,60],
		text:'redRect上移一层',
		color:"yellow",

		drag:false,
		mouseup:function(){
			group.raise(redRect);
		}
	})
	qcanvas.qtext.text({
		start:[200,80],
		text:'redRect下移一层',
		color:"yellow",

		drag:false,
		mouseup:function(){
			group.lower(redRect);
		}
	})

	qcanvas.qtext.text({
		start:[200,100],
		text:'group下移一层',
		color:"yellow",

		drag:false,
		mouseup:function(){
			qcanvas.lower(group);
		}
	})

	qcanvas.qtext.text({
		start:[200,120],
		text:'group上移一层',
		color:"yellow",

		drag:false,
		mouseup:function(){
			qcanvas.raise(group);
		}
	})
		</code>
	</pre>
</div>


<script src='Qcanvas.js'></script>
<script>

	var qcanvas = new Qcanvas(["qcanvas",400,300]);

	var greenRect = qcanvas.qrect.rect({
		start:[0,0],
		width:200,
		height:200,
		// drag:false,
		borderColor:'green',
		fillColor:'green',
	})

	var redRect = qcanvas.qrect.rect({
		start:[100,100],
		width:50,
		height:50,
		borderColor:'red',
		fillColor:'red',
		// degree:30
		// drag:false
	})

	var blueRect = qcanvas.qrect.rect({
		start:[120,140],
		width:50,
		height:50,
		borderColor:'blue',
		fillColor:'blue',
		// drag:false
	})


	//layer元素
	var group = qcanvas.qgroup.group();
	console.log(group);

	group.push(redRect);

	group.push(blueRect);


	qcanvas.load({
		"person":"img/spirit1.png",
	},function(){

			var spiritSource = qcanvas.getSourceByName("person");

			var s = qcanvas.qspirit.spirit({
				img:spiritSource,
				row:1,
				column:8,
				framesIndex:[0,0],
				tStart:[0,120],
				tWidth:40,
				tHeight:64,
				isLoop:true,
				during:1,
				mouseup:function(){
					console.log(this);
					console.log('触发mouseup事件');
				}
			})

			var t = qcanvas.qtext.text({
				start:s.tStart,
				text:'我是来自group容器里spirit',
				color:'#000',
				pointerEvent:'none'
			})


			group.push(t);
			group.push(s);

	})


	qcanvas.qtext.text({
		start:[200,20],
		text:'greenRect上移一层',
		color:"yellow",
		drag:false,
		mouseup:function(){
			qcanvas.raise(greenRect);
		}
	})

	qcanvas.qtext.text({
		start:[200,40],
		text:'greenRect下移一层',
		color:"yellow",

		drag:false,
		mouseup:function(){
			qcanvas.lower(greenRect);
		}
	})

	qcanvas.qtext.text({
		start:[200,60],
		text:'redRect上移一层',
		color:"yellow",

		drag:false,
		mouseup:function(){
			group.raise(redRect);
		}
	})
	qcanvas.qtext.text({
		start:[200,80],
		text:'redRect下移一层',
		color:"yellow",

		drag:false,
		mouseup:function(){
			group.lower(redRect);
		}
	})

	qcanvas.qtext.text({
		start:[200,100],
		text:'group下移一层',
		color:"yellow",

		drag:false,
		mouseup:function(){
			qcanvas.lower(group);
		}
	})

	qcanvas.qtext.text({
		start:[200,120],
		text:'group上移一层',
		color:"yellow",

		drag:false,
		mouseup:function(){
			qcanvas.raise(group);
		}
	})

	console.log(qcanvas);


</script>
</body>
</html>