Lufylenged引擎学习——LGraphics

原创 2015年08月17日 17:48:30


(一)在一个LSprite上画一张图,new另一个Sprite进行图片的mask效果 ,效果如下:

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
	<script type="text/javascript" src="../lufylegend-1.7.6.min.js"></script> 
</head>
<body>
<div id="mylegend">loading...</div>
<script type="text/javascript">
var loader;  
init(50,"mylegend",500,350,main);

function main(){  
    loader = new LLoader();  
    loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);  
    loader.load("face.jpg","bitmapData");  
}  
function loadBitmapdata(event){  
    var bitmapdata = new LBitmapData(loader.content);
    var bitmap = new LBitmap(bitmapdata);  
 	//加入层LSprite
    var layer = new LSprite();
    addChild(layer);
    layer.x = 50;
    layer.y = 50;
    layer.rotate = 60;
    layer.addChild(bitmap);

    var layer2 = new LSprite();
    addChild(layer2);
    layer2.graphics.drawRect(1,"#FCF",[50,0,140,140]);
    layer.mask = layer2;
} 
</script>
</body>
</html>

(二)drawRect的两个属性效果对比

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
	<script type="text/javascript" src="../lufylegend-1.7.6.min.js"></script> 
</head>
<body>
<div id="mylegend">loading...</div>
<script type="text/javascript">
init(50,"mylegend",500,350,main);
function main(){  
   var layer = new LSprite();
   addChild(layer);
   layer.graphics.drawRect(1,'#000000',[50,50,100,100]);
   layer.graphics.drawRect(1,'#000000',[170,50,100,100],true,'#cccccc');
}  
</script>	
</body>
</html>


效果如下:



(三)线条的绘制

init(50,"mylegend",500,350,main);
function main(){  
	var graphics = new LGraphics();
	addChild(graphics);
	graphics.add(function(coodx,coody){
		LGlobal.canvas.strokeStyle = "#000000";
		LGlobal.canvas.moveTo(20,20);
		LGlobal.canvas.lineTo(200,200);
		LGlobal.canvas.stroke();
	});
} 


(四)画圆、三角形、四边形 用位图图像填充绘图区。

			LInit(50, "legend", 800, 480, main);
			function main () {
				var loader = new LLoader();
				loader.addEventListener(LEvent.COMPLETE, loadBitmapdata); 
				loader.load("face.jpg", "bitmapData");
			}
			function loadBitmapdata (event) {
				var bitmapdata = new LBitmapData(event.target);  
				var backLayer;
				backLayer = new LSprite();
				addChild(backLayer);
				backLayer.graphics.beginBitmapFill(bitmapdata);
				backLayer.graphics.drawArc(1,"#000000",[150,50,50,0,Math.PI*2]);
				backLayer = new LSprite();
				addChild(backLayer);
				backLayer.graphics.beginBitmapFill(bitmapdata);
				backLayer.graphics.drawRect(1,"#000000",[10,100,70,100]);
				backLayer = new LSprite();
				addChild(backLayer);
				backLayer.graphics.beginBitmapFill(bitmapdata);
				backLayer.graphics.drawVertices(1,"#000000",[[120,100],[100,200],[200,150]]);
			}
			

drawVertices  分别绘制的是三个∠ 点的坐标值,

而drawRect  画出左上角的坐标值 然后分别赋值宽 高值

 backLayer.graphics.drawArc(1,"#000000",[150,100,50,0,Math.PI*2]);  

150,100为圆点坐标、50为半径、0,为起始角、Math.PI*2为结束角






版权声明:本文为博主原创文章,未经博主允许不得转载。

搜索引擎利用机器学习排序

搜索引擎利用机器学习排序 标签: 搜索引擎机器学习排序 2013-07-29 20:52 1414人阅读 评论(0) 收藏 举报 本文章已收录于: ...
  • starzhou
  • starzhou
  • 2016年05月03日 18:17
  • 1867

Java工作流引擎学习----JBPM(一)

Java工作流引擎学习----JBPM  一、简介 主动性编程: 方法  --->  类 --->  jar ---> 类库    特性:已经封装好的功能,供我们去调用,通过组合这些功能来完成代码...
  • qq_26504875
  • qq_26504875
  • 2016年01月09日 10:53
  • 5875

游戏引擎 白鹭(egret)学习总结(一)

今天了解并学习了下这个游戏引擎(egret),个人觉得这是个不错的游戏引擎,对于以后游戏的开发有非常大的帮助,以下是自己的学习心得总结,有兴趣的同学可以去官网了解 http://www.egret.c...
  • helloworldmyself
  • helloworldmyself
  • 2015年10月23日 18:46
  • 2832

云端引擎——京东云擎

  • 2014年05月29日 14:08
  • 1.49MB
  • 下载

游戏程序设计教程——从游戏引擎构建到实际应用课本代码

  • 2017年03月28日 22:01
  • 10.87MB
  • 下载

iOS——为你的项目引入超轻量级JS引擎JSPatch-代码

  • 2016年01月17日 11:58
  • 105KB
  • 下载

android游戏物理引擎——重力弹力运动

  • 2013年11月13日 11:27
  • 4.66MB
  • 下载

JSP核心技术——JSP引擎内幕(2010).pdf

  • 2012年03月23日 15:17
  • 119KB
  • 下载

MDCC 2014 掌上明珠CTO胡烜——手机游戏引擎设计

  • 2014年11月17日 11:57
  • 299KB
  • 下载

Drawer2D 0.1——简单的opengl2D绘图引擎

  • 2016年01月22日 20:58
  • 1.04MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Lufylenged引擎学习——LGraphics
举报原因:
原因补充:

(最多只允许输入30个字)