Lufylegend库学习笔记1 绘图操作及鼠标事件

发布时间：2020-12-15 17:29:06 所属栏目：百科来源：网络整理

导读：这几天对于网页前端有点兴趣，学习了一下Canvas的相关知识。看到Lufylegend库之后，感觉很棒，有一种在写AS的感觉。今天入门第一站，写了一个画板。是一个非常简易的画板，但是可以看到一些重要的思想。代码如下： !DOCTYPE htmlhtml lang="en"headmeta c

这几天对于网页前端有点兴趣，学习了一下Canvas的相关知识。

看到Lufylegend库之后，感觉很棒，有一种在写AS的感觉。今天入门第一站，写了一个画板。

是一个非常简易的画板，但是可以看到一些重要的思想。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Mouse Event</title>
	<script src="http://static.blog.csdn.net/scripts/jquery.js" type="text/javascript"></script>
	<script src="http://lufylegend.com/js/lufylegend-1.9.7.min.js"></script>
</head>
<body>
	<div id="tester"></div>
	<script>
init(1,"tester",500,350,main);
var stage;

function main() {
	LGlobal.setDebug(false);

	trace("on debug");
	stage = new LSprite();
	addChild(stage);

	/*stage.graphics.add(function(coordX,coordY) {
		LGlobal.canvas.fillStyle="#333";
		LGlobal.canvas.beginPath();
		LGlobal.canvas.fillRect(0,350);
	});*/
	stage.graphics.drawRect(0,"#000",[0,350],true,"#333");
	stage.graphics.lineStyle(5,"#F00");
	stage.addEventListener(LMouseEvent.MOUSE_DOWN,onMouseDown);
	stage.addEventListener(LMouseEvent.MOUSE_UP,onMouseUp);
}
function onMouseDown(event) {
	trace("mouse down");
	stage.graphics.beginPath();
	stage.graphics.moveTo(event.offsetX,event.offsetY);
	stage.addEventListener(LMouseEvent.MOUSE_MOVE,onMouseMove);
}
function onMouseUp(event) {
	stage.removeEventListener(LMouseEvent.MOUSE_MOVE,onMouseMove);
	trace("mouse up");
}
function onMouseMove(event) {
	stage.graphics.lineTo(event.offsetX,event.offsetY);
	stage.graphics.stroke();
	stage.graphics.moveTo(event.offsetX,event.offsetY);
	trace("mouse move");
}

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

真的与Flash很像。trace函数用于测试，如果将LGlobal.setDebug设置为true的话，可以直接得到输出。具体可以参考：官方文档trace介绍

以下是网页运行的截图：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!