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

最新推荐文章于 2021-06-03 19:25:48 发布

pdcxs007

最新推荐文章于 2021-06-03 19:25:48 发布

阅读量2.5k

点赞数

本文链接：https://blog.csdn.net/pdcxs007/article/details/42275595

版权

网页前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这几天对于网页前端有点兴趣，学习了一下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, 0, 500, 350);
	});*/
	stage.graphics.drawRect(0,"#000", [0, 0, 500, 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介绍

以下是网页运行的截图：

pdcxs007

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Lufylegend库学习笔记1 绘图操作及鼠标事件

这几天对于网页前端有点兴趣，学习了一下Canvas的相关知识。看到Lufylegend库之后，感觉很棒，有一种在写AS的感觉。今天入门第一站，写了一个画板。是一个非常简易的画板，但是可以看到一些重要的思想。
复制链接

扫一扫

专栏目录