`
ch_kexin
  • 浏览: 877430 次
  • 性别: Icon_minigender_2
  • 来自: 青岛
社区版块
存档分类
最新评论

egret加载项目外部图片,调用外包JS,我的解决方案

阅读更多

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

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics