lizhicheng99-qcanvas
/
template2.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">

		<canvas id="qcanvas"></canvas>
	</div>
	<div class="code_lay">
		<pre><code class="js">var qcanvas = new Qcanvas({
		id:'qcanvas',
		width:300,
		height:200,
		mousedown:function(e){
			console.log('canvas mousedown');
		},
		mousemove:function(){
			console.log('canvas mousemove');
		},
		mouseup:function(){
			console.log('canvas mouseup');
		},
		mouseout:function(){
			console.log('canvas mouseout');
		}
	});


var line1 = qcanvas.qline.line({
	start:function(){return [100,50];},
	end:[50,150],
	color:'red',
	like:'-',
	withText:'可拖动',
	drag:'vertical',
	mouseout:function(e,position){
		console.log(e);
		console.log('line1 mouseout');
	}

});


var line2 = qcanvas.qline.line({
	start:function(){return [150,50];},
	end:[0,20],
	color:'blue',
	like:'-',
	withText:'可拖动',
	mousemove:function(){
		// console.log('dddd');
	}
	// drag:false
});


var line3 = qcanvas.qline.line({
	start:function(){return [30,50];},
	end:[150,60],
	width:1,
	like:'->',
	color:'gray',
	withText:'line3',
	drag:false

});

var line4 = qcanvas.qline.line({
	start:function(){return [100,123];},
	end:[150,180],
	width:1,
	like:'-->',
	color:'gray',
	withText:'line4',
	withTextAlign:'left',
	drag:false

});
var line5 = qcanvas.qline.line({
	start:[250,50],
	end:[200,200],
	width:1,
	like:'<-->',
	color:'gray',
	withText:'虚线双向箭头',
	withTextAlign:'left',
	// drag:false

});

var line6 = qcanvas.qline.line({
	start:[120,50],
	end:[140,200],
	width:1,
	like:'<->',
	color:'blue',
	withText:'实线双向箭头',
	withTextAlign:'left',
	// drag:false

});
			</code>
		</pre>

	</div>

</body>
<script src='Qcanvas.js'></script>
<script>
	// var qcanvas = new Qcanvas(["qcanvas",300,200]);
	var qcanvas = new Qcanvas({
		id:'qcanvas',
		width:300,
		height:200,
		mousedown:function(e){
			console.log(e);
			console.log('canvas mousedown');
		},
		mousemove:function(){
			console.log('canvas mousemove');
		},
		mouseup:function(){
			console.log('canvas mouseup');
		},
		mouseout:function(){
			console.log('canvas mouseout');
		}
	});

var layer = qcanvas.qlayer.layer();
var line1 = qcanvas.qline.line({
	start:function(){return [100,50];},
	end:[50,150],
	color:'red',
	like:'-',
	withText:'可拖动',
	drag:'vertical',
	mouseout:function(e,position){
		console.log(e);
		console.log('line1 mouseout');
	}

});


var line2 = qcanvas.qline.line({
	start:function(){return [150,50];},
	end:[0,20],
	color:'blue',
	like:'-',
	withText:'可拖动',
	mousemove:function(){
		// console.log('dddd');
	}
	// drag:false
});


var line3 = qcanvas.qline.line({
	start:function(){return [30,50];},
	end:[150,60],
	width:1,
	like:'->',
	color:'gray',
	withText:'line3',
	drag:false

});

layer.push(line3);

var line4 = qcanvas.qline.line({
	start:function(){return [100,123];},
	end:[150,180],
	width:1,
	like:'-->',
	color:'gray',
	withText:'line4',
	withTextAlign:'left',
	drag:false

});


var line5 = qcanvas.qline.line({
	start:[250,50],
	end:[200,200],
	width:1,
	like:'<-->',
	color:'gray',
	withText:'虚线双向箭头',
	withTextAlign:'left',
	// drag:false

});

var line6 = qcanvas.qline.line({
	start:[120,50],
	end:[140,200],
	width:1,
	like:'<->',
	color:'blue',
	withText:'实线双向箭头',
	withTextAlign:'left',
	// drag:false

});


var line6 = qcanvas.qline.line({
	start:[50,50],
	end:[200,200],
	width:1,
	like:'<-',
	color:'red',
	withText:'实线单向箭头',
	withTextAlign:'left',
	// drag:false

});

var line6 = qcanvas.qline.line({
	start:[100,50],
	end:[200,220],
	width:1,
	like:'<--',
	color:'red',
	withText:'虚线单向箭头',
	withTextAlign:'left',
	// drag:false

});


</script>

</html>