egret 小游戏设置头像 加载项目外部图片(无后端异步加载图片)处理方式
index.html页面中:
CSS样式:
<style> html, body { /*-ms-touch-action: none;*/ background: #888888; padding: 0; border: 0; margin: 0; height: 100%; } #head{ position: absolute; width: 108px; height: 108px; background-image: url("resource/assets/heads/head_bg.png"); } #head img{ position: absolute; top:10.5px; left: 14px; width:81px; height:81px; border-radius:40px ; -webkit-border-radius:40px; -moz-border-radius:40px; } </style>
Html 标签:
<div id="game" style="position:relative; margin: auto;width: 100%;height: 100%;" class="egret-player" data-entry-class="Main" data-orientation="auto" data-scale-mode="showAll" data-frame-rate="60" data-content-width="720" data-content-height="1120" data-multi-fingered="2" data-show-fps="false" data-show-log="false" data-show-fps-style="x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9"> </div> <div id="head" hidden> <img id="head_icon" src="resource/assets/heads/head_default.png" onerror="loadImageError(this)"> </div>
JS方法:
/** * 初始化信息 */ var head = ""; //玩家头像 var init = function () { //初始化头像 var image = document.getElementById("head_icon"); if (image) { image.src = head; } } /** * 设置头像是否显示 * @param value true:显示 false:不显示 * @param alpha 透明度 默认50 */ function setHead(value = false, alpha = 50) { var headDiv = document.getElementById("head"); if (headDiv) { headDiv.hidden = !value; headDiv.style.filter = 'alpha(opacity=' + alpha + ')'; headDiv.style.opacity = alpha / 100; if (alpha == 50) { setHeadPos(); } } } /** * 设置头像坐标 */ function setHeadPos() { var gameDiv = document.getElementById("game"); var headDiv = document.getElementById("head"); //game showall模式计算宽高 var m_width = 0; var m_height = 0; var marginTop = 6; var marginLeft = 20; var percent = 720 / 1120; var scale = 0.5; if (gameDiv.clientWidth / gameDiv.clientHeight > percent) { //横向 m_width = gameDiv.clientHeight * percent; m_height = gameDiv.clientHeight; scale = m_width/720; marginTop = marginTop*scale; marginLeft = marginLeft*scale; headDiv.style.top = marginTop + "px"; headDiv.style.left = (gameDiv.clientWidth - m_width) / 2 + marginLeft + "px"; } else { //纵向 m_width = gameDiv.clientWidth; m_height = gameDiv.clientWidth / percent; scale = m_height/1120; marginTop = marginTop*scale; marginLeft = marginLeft*scale; headDiv.style.top = (gameDiv.clientHeight - m_height) / 2 + marginTop + "px"; headDiv.style.left = marginLeft + "px"; } //设置缩放后的坐标 headDiv.style.transformOrigin="left top 0"; headDiv.style.webkitTransform = "scale(" + scale + ")"; headDiv.style.transform = "scale(" + scale + ")"; }
ts调用js代码:
//设置头像 declare function setHead(value,alpha);
ts代码:
/* 设置头像 */ public setHead(params?: any) { //调用外包JS,加载项目外部图片 if (!params) { params = [true, 100]; } setHead(params[0], params[1]); }
ts调用:
Global.instance.setHead();
相关推荐
加载zip压缩的javascript代码以及在Egret H5实际应用 的代码例子 blog地址:http://blog.csdn.net/sujun10/article/details/76427703
Egret官网声音项目
基于 Egret 3.0 搭建的 HTML5 游戏极速开发解决方案
这是我的博客《笔记十 :Egret动画式加载场景(基于通用MVC框架)》中使用到的源代码
Egret Conversion是一个Egret项目转换工具,可以将Flash项目转换到Egret HTML5项目中,支持Flash项目到Egret项目的一键高效转换,功能强大可扩展,支持AS3各种复杂语法特性,涵盖绝大部分的Flash API,并且支持swf...
Egret 白鹭,预加载与播放Facebook插屏广告代码,播放与预加载Facebook激励视频广告代码
这是我的博客《笔记十二 :Egret分帧(frame)加载图形对象(基于通用MVC框架)》中的源代码
Egret开发游戏屏幕适配解决方案,适配不同分辨率,两种适配模式。 适配库是基于Egret的屏幕适配策StageScaleMode.NO_BORDER开发,采用NO_BORDER是因为他没有黑边,而且游戏内容是等比例拉伸。可以把NO_BORDER理解为...
本库旨在为Egret封装常用的手势操作,因本人能力有限,有的实现并不完善,欢迎批评指正。Egret手势识别库egret_gesture目前已实现的手势: 1. Tap(点一下) 2. Double Tap (双击) 3. Pinch(二指往內或往外拨动,平时...
使用egret开发的2048源码
AES加密解密egret库有.d.ts文件,可以直接放入egret中使用,AES加密解密egret库有.d.ts文件,可以直接放入egret中使用
fengzii-p1-master egret项目源码;小游戏demo;代码 源码;可做参考使用; 小游戏的demo代码 源码;可做参考使用
EgretWing-v3.2.6
egret 示例项目,主要介绍egret列表使用方法
白鹭egret图集分割工具。支持拆分两种图集资源:Egret MovieClip、Sprite Sheet。支持文件夹批量操作。支持分割后生成的文件夹创建到图片对应的目录,自己写的,亲测可用
Egret 引擎学习资料 ,Egret HTML5游戏开发指南.pdf.
egret-album-tool 调用用户手机相册,实现照片的预览和上传。注意仅支持浏览器运行模式!APP打包模式是不支持的,需要另外的实现方式。 使用方式: ###第一步:配置第三方库### 将本库中的ext目录,放置到您的项目...
请参阅以集成到Egret项目。 或者,如果您仅打算为Web构建,则将.js文件包含在HTML中,例如: < script src =" libs/egret-spine.js " > </ script >入门此实现不涉及资源下载,实际的代码可能与此样板...
egret-core egret 官方示例代码,可参考使用,代码是较新版本的
egret 下拉框的制作,亲测可用;纯代码,可以使用;egret 下拉框的制作