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();