drawTexture 概述

1、图片显示是游戏开发的基础，常用的有 Sprite.loadImage 与 Graphics.drawTexture 两种方式，本文介绍 laya.display.Graphics 的 drawTexture() 方法。

1、Graphics(绘图) 类用于创建绘图显示对象

2、Graphics 可以同时绘制多个位图或者矢量图，可以结合 save，restore，transform，scale，rotate，translate，alpha 等指令对绘图效果进行变化。

3、Graphics 以命令流方式存储，可以通过 cmds 属性访问所有命令流。

4、Graphics 是比 Sprite 更轻量级的对象，合理使用能提高应用性能(比如把大量的节点绘图改为一个节点的 Graphics 命令集合，能减少大量节点创建消耗)。

2、laya.display.Graphics 的 drawTexture() 方法：

/**LayaAir 2.0.0beta5 源码如下
* 绘制纹理，相比drawImage功能更强大，性能会差一些
* @param texture 纹理。
* @param x （可选）X轴偏移量。
* @param y （可选）Y轴偏移量。
* @param width （可选）宽度。
* @param height （可选）高度。
* @param matrix （可选）矩阵信息。
* @param alpha （可选）透明度。
* @param color （可选）颜色滤镜。
* @param blendMode （可选）混合模式。
*/
drawTexture(texture: Texture, x?: number, y?: number, width?: number, height?: number, matrix?: Matrix, alpha?: number, color?: string, blendMode?: string): DrawTextureCmd;

相比《Sprite.loadImage 显示与切换图片》，使用 Graphics.drawTexture 涉及的 API 要稍微多些，还需要了解laya.net.LoaderManager 中的 load() 方法和 getRes() 方法，以及 laya.utils.Handler 中的 create() 方法。

laya.net.LoaderManager 中的 load() 方法：

LoaderManager 类用于批量加载资源。此类是单例，不要手动实例化此类，请通过 Laya.loader 访问。

/** <p>加载资源。资源加载错误时，本对象会派发 Event.ERROR 事件，事件回调参数值为加载出错的资源地址。</p>
* <p>因为返回值为 LoaderManager 对象本身，所以可以使用如下语法：loaderManager.load(...).load(...);</p>
* @param url 要加载的单个资源地址或资源信息数组。比如：简单数组：["a.png","b.png"]；复杂数组[
* @param complete 加载结束回调。根据url类型不同分为2种情况：1. url为String类型，也就是单个资源地址，如果加载成功，则回调参数值为加载完成的资源，否则为null；2. url为数组类型，指定了一组要加载的资源，如果全部加载成功，则回调参数值为true，否则为false。
* @param progress 加载进度回调。回调参数值为当前资源的加载进度信息(0-1)。
* @param type 资源类型。比如：Loader.IMAGE。
* @param priority (default = 1)加载的优先级，优先级高的优先加载。有0-4共5个优先级，0最高，4最低。
* @param cache 是否缓存加载结果。
* @param group 分组，方便对资源进行管理。
* @param ignoreCache 是否忽略缓存，强制重新加载。
* @param useWorkerLoader(default = false)是否使用worker加载（只针对IMAGE类型和ATLAS类型，并且浏览器支持的情况下生效）
* @return 此 LoaderManager 对象本身。
*/
load(url: any, complete?: Handler, progress?: Handler, type?: string, priority?: number, cache?: boolean, group?: string, ignoreCache?: boolean, useWorkerLoader?: boolean): LoaderManager;

laya.net.LoaderManager 中的 getRes() 方法：

/**
* 获取指定资源地址的资源。
* @param url 资源地址。
* @return 返回资源。
*/
getRes(url: string): any;

laya.utils.Handler 中的 create() 方法：

Handler 是事件处理器类。推荐使用 Handler.create() 方法从对象池创建，减少对象创建消耗。创建的 Handler 对象不再使用后，可以使用 Handler.recover() 将其回收到对象池，回收后不要再使用此对象，否则会导致不可预料的错误。

/**
* 从对象池内创建一个Handler，默认会执行一次并立即回收，如果不需要自动回收，设置once参数为false。
* @param caller 执行域(this)。
* @param method 回调方法。
* @param args 携带的参数。
* @param once 是否只执行一次，如果为true，回调后执行recover()进行回收，默认为true。
* @return 返回创建的handler实例。
*/
static create(caller: any, method: Function, args?: Array<any>, once?: boolean): Handler;

加载并显示图片

//初始化舞台,设置大小,当浏览器不支持 WebGL 时自动切换为 Canvas,应该先初始化舞台，然后再去加载资源
Laya.init(768, 1024,Laya.WebGL);
//被绘制的图片地址，这里以网络图片为例
let apache_1 = "https://avatar.csdn.net/6/D/4/1_wangmx1993328.jpg?1544581276";//LoaderManager 类用于批量加载资源.此类是单例，不要手动实例化此类.通过 Laya.loader 访问
//load 方法加载图像资源，仍然返回 LoaderManager对象，所以可以链式操作.加载成功后，通过回调方法绘制图像并添加到舞台
//Handler 是事件处理器类,create 表示从对象池内创建一个Handler，默认会执行一次并立即回收
Laya.loader.load(apache_1,Laya.Handler.create(this,drawImg));//绘制图像
function drawImg(){console.log(apache_1,"加载完成");//先创建精灵对象let imgSprite = new Laya.Sprite();//Sprite 的 graphics 属性返回 绘图对象(Graphics)，再利用 Graphics 的 drawTexture(绘制纹理)方法绘制图像//LoaderManager 是单例的，加载图像使用 load,获取时使用 getRes方法imgSprite.graphics.drawTexture(Laya.loader.getRes(apache_1),20,20);//将精灵添加到舞台Laya.stage.addChild(imgSprite);
}

动态切换图片

//初始化舞台,设置大小,当浏览器不支持 WebGL 时自动切换为 Canvas,
Laya.init(768, 1024,Laya.WebGL);//将精灵对象设置为全局变量
let imgSprite;//被切换的图片地址，本次使用的是 LayaAir 2.0.0beta5 版本，图片资源位于 bin/images下
let apaches = ["images/apache_1.png","images/apache_2.png"];//图片切换状态标识
let flag = false;//LoaderManager 类用于批量加载资源.此类是单例，不要手动实例化此类.通过 Laya.loader 访问
//load 方法加载图像资源，仍然返回 LoaderManager对象，所以可以链式操作.加载成功后，通过回调方法绘制图像并添加到舞台
//Handler 是事件处理器类,create 表示从对象池内创建一个Handler，默认会执行一次并立即回收
Laya.loader.load(apaches,Laya.Handler.create(this,loadImgsFinal));//图片资源全部加载完成时进入
function loadImgsFinal(){//创建精灵对象imgSprite = new Laya.Sprite();//设置精灵(图片)显示位置，默认在父容器原点(0,0)imgSprite.pos(100,30);//将精灵添加到舞台显示(可以先添加到舞台，之后再对精灵进行处理)Laya.stage.addChild(imgSprite);//初始化显示图片drawImgs();//为精灵(图片)绑定单击事件imgSprite.on(Laya.Event.CLICK,this,drawImgs);
}//绘制图像
function drawImgs(){//public function clear(recoverCmds:Boolean = false):void//清空绘制命令；recoverCmds 是否回收绘图指令,默认为 false,如果不做清空处理，则后面的图像会覆盖前面的imgSprite.graphics.clear();//获取本次切换的图像地址let imgUrl = (flag = !flag)?apaches[0]:apaches[1];//获取图片资源 laya.resource.Texture(纹理对象)let texture = Laya.loader.getRes(imgUrl);//设置精灵宽高,相当于分别设置width和height属性,width与height表示显示对象的宽高//width、height 默认是0，此宽高用于鼠标碰撞检测,并不影响显示对象图像大小，所以必须设置了width与height之后，单击事件才会有效//laya.resource.Texture 是一个纹理处理类.width、height 属性表示纹理(图片)实际宽高imgSprite.size(texture.width,texture.height);//drawTexture 绘制图像时，x,y偏移量不写时默认为0，假如偏移出了 imgSprite 的范围，则会出现点击图片无效，单击精灵位置有效imgSprite.graphics.drawTexture(texture);console.log("绘制纹理",texture.width,texture.height);
}

官网示例：

https://ldc.layabox.com/doc/?nav=zh-js-1-3-0

https://layaair.ldc.layabox.com/demo/?category=2d&group=Sprite&name=DisplayImage

LayaAir Graphics.drawTexture 显示与切换图片相关推荐

c android显示gif动画,MFC显示GIF动画图片
本帖则将讨论如何在MFC的对话框里显示GIF动画图片.一些关于传统控件的美化方法正在研究当中会陆续发帖的. 这是本帖用到的一个VS2008例程. 附件 GifPicture.rar (138.1 K ...
前后端开发bug:python+vue开发图片验证码接口时，刷新浏览器不显示图片验证码，点击以后才可以显示和切换
现象: 刷新浏览器页面,图片验证码不显示,点击图片验证码区域以后,才能显示也可以切换显示下一个. 排查思路: 调用开发者工具,检查是否向后端发起获取图片验证码请求. 如果生成了图片uuid编号,发送了 ...
【转】Android android listview的HeadView左右切换图片（仿新浪，网易，百度等切换图片）...
首先我们还是看一些示例:(网易,新浪,百度) 下面我简单的介绍下实现方法:其实就是listview addHeaderView.只不过这个view是一个可以切换图片的view,至于这个vie ...
阅读《Android 从入门到精通》（24）——切换图片
切换图片(ImageSwitcher) java.lang.Object; android.view.View; android.widget.ViewGroup; android.widget.Fr ...
jQuery效果：隐藏、显示、切换、滑动、淡入淡出、动画
jQuery效果隐藏.显示.切换.滑动.淡入淡出.以及动画1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示toggle()方法:可以使用它来切换hide ...
JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
HTML5编程实战之二：用动画的形式切换图片
本文主要用到的知识本文主要用到了Canvas API中的drawImage方法,下面对此方法略做介绍. 在Canvas API中绘制图像用drawImage方法,这是一个重载方法,定义如下: con ...
JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html> <h ...
WPF之鼠标滑动切换图片
原文:WPF之鼠标滑动切换图片在网上找了一会儿也没找到我想要的效果,还是自己动手,丰衣足食吧. 需求:当前面板中只显示一张图片,图片栏的下部有用来显示当前图片处于图片队列中的位置的圆球,并且点击下部 ...
Java乔晓松-android中调用系统拍照功能并显示拍照的图片
android中调用系统拍照功能并显示拍照的图片如果你是拍照完,利用onActivityResult获取data数据,把data数据转换成Bitmap数据,这样获取到的图片,是拍照的照片的缩略图代 ...

LayaAir Graphics.drawTexture 显示与切换图片

drawTexture 概述

加载并显示图片

动态切换图片

LayaAir Graphics.drawTexture 显示与切换图片相关推荐

最新文章

热门文章