<!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"> /*function:lufylegend图片的加载和显示*/ var loader; //引擎初始化
init(50, "mylegend", 500, 300, main); //游戏主函数
function main() { //LLoader 类可用于加载图像(JPG、PNG 或 GIF)文件。使用 load() 方法来启动加载。
loader = new LLoader();
//使用 LEventDispatcher 对象注册事件侦听器对象,以使侦听器能够接收事件通知,图片加载完后执行loadBitmapdata
loader.addEventListener(LEvent.COMPLETE, loadBitmapdata2);
//将 JPEG、渐进式 JPEG、非动画 GIF 或 PNG 文件加载到此 LLoader 对象的子对象中。如果加载 GIF 动画文件,将仅显示第一帧。
loader.load("face.jpg", "bitmapData"); }; //加载图片并对图片操作:
function loadBitmapdata(event) { //图片加载完后此时loader.content就是一个Image,LBitmapData用来保存和读取图片对象
//var bitmapdata = new LBitmapData(loader.content); //使用 LBitmapData 类的方法创建任意大小的Image对象,控制图像显示范围,并在运行时采用多种方式操作这些图像。
var bitmapdata = new LBitmapData(loader.content, 50, 50, 100, 100); //LBitmap用来显示图片到画板
var bitmap = new LBitmap(bitmapdata); //控制图片显示的各种属性
//图片坐标
bitmap.x = 50;
bitmap.y = 50;
//图片旋转60度
bitmap.rotate = 60;
//图片透明度设置为0.4
bitmap.alpha = 0.4; //将可显示的对象(LSprite,LBitmap等)加入到游戏最底层画板上
addChild(bitmap); }; //使用精灵操作图片
function loadBitmapdata2(event) { //图片加载完后此时loader.content就是一个Image,LBitmapData用来保存和读取图片对象
//var bitmapdata = new LBitmapData(loader.content); //使用 LBitmapData 类的方法创建任意大小的Image对象,控制图像显示范围,并在运行时采用多种方式操作这些图像。
var bitmapdata = new LBitmapData(loader.content, 50, 50, 100, 100); //LBitmap用来显示图片到画板
var bitmap = new LBitmap(bitmapdata); //使用精灵操作图片
var sprite = new LSprite();
//设置图片摆放位置
sprite.x = 50;
sprite.y = 50;
//图片以左上角为原点旋转60度
sprite.rotate = 60;
//图片透明度设置为0.5
sprite.alpha = 0.5;
sprite.addChild(bitmap); //将可显示的对象(LSprite,LBitmap等)加入到游戏最底层画板上
addChild(sprite); }; //基本图形绘制
function main() {
graphics = new LGraphics(); //将可显示的对象(LSprite,LBitmap等)加入到游戏最底层画板上
addChild(graphics); graphics.drawLine(2, '#ff0000', [10, 10, 100, 100]); //画线:线宽,颜色,坐标
//画圆弧:线宽/颜色/[圆心坐标/半径/起始角/跨过角度/是否顺时针]/是否填充/填充颜色
graphics.drawArc(2, '#ff0000', [200, 60, 50, 90 * Math.PI / 180, 180 * Math.PI / 180, true], true, '#00ff00');
//画矩形:线宽/颜色/[起始坐标/矩形宽高]/是否填充/填充颜色
graphics.drawRect(2, '#ff0000', [300, 10, 50, 50], true, '#ffff00');
//画圆角矩形,多一个圆角半径参数
graphics.drawRoundRect(2, '#ff0000', [400, 10, 50, 50, 10], true, '#ffff00');
//画多边形:线宽/颜色/[[],[],[]...(坐标集,至少三个)]/是否填充/填充颜色
graphics.drawVertices(2, '#ff0000', [[10, 110], [10, 210], [50, 170], [50, 150]], true, '#00ff00');
} //使用原生canvas绘图
function main() {
graphics = new LGraphics();
addChild(graphics); //使用原生canvas绘图
graphics.add(function (coodx, coody) {
LGlobal.canvas.strokeStyle = "#000000";
LGlobal.canvas.moveTo(20, 20);
LGlobal.canvas.lineTo(200, 200);
LGlobal.canvas.stroke();
});
} //使用Sprite的graphic绘图
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');
} //beginBitmapFill使用位图填充绘图区
var loader;
init(50, "mylegend", 640, 480, main); //初始化游戏,游戏加载后调用main function main() {
loader = new LLoader();
loader.addEventListener(LEvent.COMPLETE, loadBitmapdata);
loader.load("hello.jpg", "bitmapData");
} function loadBitmapdata(event) {
var bitmapdata = new LBitmapData(loader.content);
var backLayer = new LSprite();
addChild(backLayer);
backLayer.graphics.beginBitmapFill(bitmapdata);
//backLayer.graphics.drawArc(1,"#000",[110,80,50,0,Math.PI*2]);
backLayer.graphics.drawRect(1, "#000", [80, 50, 70, 100]);
} </script>
</body>
</html>

lufylegend:图片的加载和显示的更多相关文章

  1. js图片未加载完显示loading效果

    <html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...

  2. 图片未完成加载显示loading

    <html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...

  3. Android-Universal-Image-Loader 图片异步加载类库的使用

    在博客中看到一篇利用组件进行图片异步加载的文章在此作记录 原文:http://blog.csdn.net/vipzjyno1/article/details/23206387 这个图片异步加载并缓存的 ...

  4. Android图片异步加载框架Android-Universal-Image-Loader

    版权声明:本文为博主原创文章,未经博主允许不得转载. Android-Universal-Image-Loader是一个图片异步加载,缓存和显示的框架.这个框架已经被很多开发者所使用,是最常用的几个 ...

  5. Android-Universal-Image-Loader 图片异步加载类库的使用(超详细配置)

    这个图片异步加载并缓存的类已经被很多开发者所使用,是最常用的几个开源库之一,主流的应用,随便反编译几个火的项目,都可以见到它的身影. 可是有的人并不知道如何去使用这库如何进行配置,网上查到的信息对于刚 ...

  6. 【转】Android-Universal-Image-Loader 图片异步加载类库的使用(超详细配置)

    Android-Universal-Image-Loader 原文地址:http://blog.csdn.net/vipzjyno1/article/details/23206387 这个图片异步加载 ...

  7. Universal Image Loader_图片异步加载

    Universal Image Loader 是一个开源的UI组件程序,该项目的目的是提供一个可重复使用的仪器为异步图像加载,缓存和显示.所以,如果你的程序里需要这个功能的话,那么不妨试试它.他本来是 ...

  8. Universal-Image-Loader 图片异步加载类库的使用

    这个图片异步加载并缓存的类已经被很多开发者所使用,是最常用的几个开源库之一,主流的应用,随便反编译几个火的项目,都可以见到它的身影. 可是有的人并不知道如何去使用这库如何进行配置,网上查到的信息对于刚 ...

  9. [学习总结]9、Android-Universal-Image-Loader 图片异步加载类库的使用(超详细配置)

    这个图片异步加载并缓存的类已经被很多开发者所使用,是最常用的几个开源库之一,主流的应用,随便反编译几个火的项目,都可以见到它的身影. 可是有的人并不知道如何去使用这库如何进行配置,网上查到的信息对于刚 ...

随机推荐

  1. Linux USB Host-Controller的初始化代码框架分析【转】

    转自:http://blog.csdn.net/zkami/article/details/2496770 usb_hcd_omap_probe (const struct hc_driver *dr ...

  2. poj1679

    题意:给定一个无向连通图,问该图的最小生成树是否唯一. 分析:有一个定理,如果该图存在次小生成树(与原最小生成树不同,但长度小于等于原最小生成树),则一定可以通过从原最小生成树中去掉一个边并再入一个边 ...

  3. 使用JS实现俄罗斯方块游戏

    简单的JS俄罗斯方块游戏源码 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&q ...

  4. LeetCode(19):删除链表的倒数第N个节点

    Medium! 题目描述: 给定一个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点. 示例: 给定一个链表: 1->2->3->4->5, 和 n = 2. 当删除了 ...

  5. 主动学习——active learning

    阅读目录 1. 写在前面 2. 什么是active learning? 3. active learning的基本思想 4. active learning与半监督学习的不同 5. 参考文献   1. ...

  6. mybatis generator修改默认生成的sql模板

    相关连接: mybatis-generator扩展教程系列 -- 自定义sql xml文件 git项目地址

  7. MySQL数据库之存储过程与存储函数

    1 引言 存储过程和存储函数类似于面向对象程序设计语言中的方法,可以简化代码,提高代码的重用性.本文主要介绍如何创建存储过程和存储函数,以及存储过程与函数的使用.修改.删除等操作. 2 存储过程与存储 ...

  8. rabbitmq学习(三) —— 工作队列

    工作队列,又称任务队列,主要思想是避免立即执行资源密集型任务,并且必须等待完成.相反地,我们进行任务调度,我们将一个任务封装成一个消息,并将其发送到队列.工作进行在后台运行不断的从队列中取出任务然后执 ...

  9. JAVA 传递

    其实java里面都是传值,只不过基本数据类型传的是数值,而引用类型传的是对象的地址. 作者:Intopass链接:https://www.zhihu.com/question/31203609/ans ...

  10. Web服务器指纹识别工具httprint

    Web服务器指纹识别工具httprint   在Web渗透测试中,准确判断服务器的类型直接影响后期渗透测试的成功率.Kali Linux提供了专门的Web服务器指纹识别工具Httprint.该工具根据 ...