egret3D與2D混合開發，畫布尺寸不一致的問題

egret3d的GUI目前還沒有，在做3d游戲的時候沒有UI可用，只能使用egret2d的EUI組件庫，egret3d與egret2d混合開發，canvas3d的大小與位置與canvas2d並沒有重合，導致適配ui時總是錯位。在做手機屏幕適配的時候必須解決這種問題，我的解決方法是兩個屬性相同。

我的解決方案為修改源碼，在egret2d適配屏幕的時候加入自定義接口，通過事件的方式通知適配canvas3d的大小和位置。
先看下效果如何


轉屏適配⬇️

---

增加Diy接口

打開 egret engine ，跳轉到引擎的根目錄下，進入src->egret->diy->RMCanvas2DView.ts，diy->RMCanvas2DView.ts為自己創建的文件，目的是為了從引擎底部調出接口。

module RM {
	export class RMCanvas2DView {

		public static canvasW:number = 0;
		public static canvasH:number = 0;
		public static canvasX:number = 0;
		public static canvasY:number = 0;
		public static canvasR:string = 'rotate(0deg)';

		public static eventDispatcher:egret.EventDispatcher = new egret.EventDispatcher();

		public constructor() {
		}
	}
}

修改WebPlayer.ts源碼

在WebPlayer.updateScreenSize函數的最后加上代碼：

/**
 * @private
 * 更新播放器視口尺寸
 */
public updateScreenSize():void {

	......
	this.player.updateStageSize(stageWidth, stageHeight);//不要在這個方法后面修改屬性
	//函數的最下面加上以下代碼
	RM.RMCanvas2DView.canvasW = displayWidth;
	RM.RMCanvas2DView.canvasH = displayHeight;
	RM.RMCanvas2DView.canvasX = +canvas.style.left.split('px')[0];
	RM.RMCanvas2DView.canvasY = +canvas.style.top.split('px')[0];
	RM.RMCanvas2DView.canvasR = canvas.style.transform;
	RM.RMCanvas2DView.eventDispatcher.dispatchEvent(egret.Event.create(
	egret.Event,egret.Event.RESIZE));
｝

編譯引擎

通過egret create命令創建的項目，在項目的根目錄下執行一次 egret make命令，編譯完成后，在項目中看看是否有RMCanvas2DView類，如果沒有，請重新看下步驟，重試以下。

監聽屏幕適配變化

然后在游戲啟動時加入事件監聽器回調函數

class WorldCanvas {
	private _canvas3d:egret3d.Egret3DCanvas;
	private _view3d:egret3d.View3D;

	public constructor() {
		this.initCanvas();
		this.initHtmlCanvas();
	}

	private initCanvas():void {
		this._canvas3d = new egret3d.Egret3DCanvas();
		this._canvas3d.width = GameConfig.STAGE_W;
		this._canvas3d.height = GameConfig.STAGE_H;
		this._canvas3d.x = this._canvas3d.y = 0;

		this._view3d = new egret3d.View3D( 0, 0, GameConfig.STAGE_W, GameConfig.STAGE_H );
		this._view3d.backColor = 0x00000000;
		this._canvas3d.addView3D( this._view3d );
		this.onResize();
		RM.RMCanvas2DView.eventDispatcher.addEventListener( egret.Event.RESIZE, this.onResize, this );
	}

	private initHtmlCanvas():void
	{
		var canvas = document.getElementById( "egret3D" );
		if ( canvas ) {
			canvas.style[ 'position' ] = 'absolute';
			canvas.style[ 'cursor' ] = 'inherit';
			canvas.style[ 'bottom' ] = '0px';
			canvas.style[ 'right' ] = '0px';
			canvas.style[ 'transform-origin' ] = '0% 0% 0px';
		}
	}

	public onResize( $e? ):void {
		this._canvas3d.x = RM.RMCanvas2DView.canvasX;
		this._canvas3d.y = RM.RMCanvas2DView.canvasY;
		var canvas = document.getElementById( "egret3D" );
		if ( canvas ) {
			canvas.style[ 'transform' ] = RM.RMCanvas2DView.canvasR;
			canvas.style['width'] = RM.RMCanvas2DView.canvasW+'px';
			canvas.style['height'] = RM.RMCanvas2DView.canvasH+'px';
		}
	}
}

這樣就把2D引擎適配的結果傳遞給3D了。旋轉縮放都沒有問題了，可以使用2D下的所有適配模式。
有問題請聯系哦！目前我以這種模式已做了2個egret3d項目嘍～不過目前並沒有上線運營。