gitee

分支 (2)

管理

管理

gitee

master

qcanvas
/
template17.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>
		<style>
			#contextMenu{
				position: absolute;
				left:0;
				top:0;
				display: none;
				background: #fff;
			}
			#contextMenu ul li{
				padding: 5px;
				color: #333;
				cursor: pointer;
			}
			#contextMenu ul li:hover{
				background: #ddd;
			}

		</style>
</head>
<body>
	<div class="qcanvas_lay" id="qcanvas_lay">
		<canvas id="qcanvas"></canvas>
		<div id="contextMenu">
			<ul>
				<li>菜单一</li>
				<li>菜单一</li>
				<li>菜单一</li>
			</ul>
		</div>
	</div>
	<div class="code_lay">
		<pre><code class="js">var qcanvas = new Qcanvas(
		{
			id:'qcanvas',
			width:500,
			height:500,
			mousedown:function(){
				document.getElementById('contextMenu').style.display = 'none';
			}
		})

    var text = qcanvas.qtext.text({
		start:[100,100],
		color:'blue',
		fontSize:'20px',
		mousedown:function(){
				document.getElementById('contextMenu').style.display = 'none';
			},
		mouseup:function(e,pos){

			if(e.button == '2'){
				console.log('text右击');

				var doc = document.getElementById('qcanvas_lay')
				var left = pos.x - doc.scrollLeft;
				var top = pos.y - doc.scrollTop;

				var contextMenu = document.getElementById('contextMenu');
				contextMenu.style.left = left+'px';
				contextMenu.style.top = top+'px';
				contextMenu.style.display = "block";
			}

		},
	})
		</code>
	</pre>
</div>


</body>
<script src='Qcanvas.js'></script>
<script>
	var qcanvas = new Qcanvas(
		{
			id:'qcanvas',
			width:500,
			height:500,
			mousedown:function(){
				document.getElementById('contextMenu').style.display = 'none';
			}
		})

    var text = qcanvas.qtext.text({
		start:[100,100],
		color:'blue',
		fontSize:'20px',
		mousedown:function(){
				document.getElementById('contextMenu').style.display = 'none';
			},
		mouseup:function(e,pos){

			if(e.button == '2'){
				console.log('text右击');

				var doc = document.getElementById('qcanvas_lay')
				var left = pos.x - doc.scrollLeft;
				var top = pos.y - doc.scrollTop;

				var contextMenu = document.getElementById('contextMenu');
				contextMenu.style.left = left+'px';
				contextMenu.style.top = top+'px';
				contextMenu.style.display = "block";
			}

		},
	})


</script>

</html>