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" οnerrοr="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();