CreateJS强制横屏

时间:2019-11-24 发布者: 访问量:3619

//main.js
var canvas,stage,container,stageWidth,stageHeight,stageScale,bitmap;
var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
function init() {
    canvas = document.getElementById("mainView");
    stage = new createjs.Stage(canvas);
    container = new createjs.Container();
    stage.addChild(container);
    bitmap = new createjs.Bitmap('images/back.jpg');
    container.addChild(bitmap);
    stageBreakHandler();

    createjs.Ticker.timingMode =  createjs.Ticker.RAF_SYNCHED;
    createjs.Ticker.setFPS(30);
    createjs.Ticker.addEventListener("tick", stageBreakHandler);
}
//在pc测试的时候,由于浏览器切换为手机模式或者重手机模式切换回来时,浏览器大小并不会改变,所以切换设备模式的时候需要刷新一下页面
function stageBreakHandler(event)
{
    if(stageWidth!=document.documentElement.clientWidth||stageHeight!= document.documentElement.clientHeight)
    {
        stageWidth =  document.documentElement.clientWidth;
        stageHeight = document.documentElement.clientHeight;

//        新的自适应方式
        canvas.width = stageWidth ;
        canvas.height = stageHeight;
        if(stageWidth < stageHeight)
        {
            stageScale = stageWidth/750;
            container.rotation = 90;
            container.x = 750*stageScale;
            container.y =stageHeight/2-1334*stageScale/2;//居中一下
            container.scaleX = stageScale;
            container.scaleY = stageScale;

        }
        else
        {
            stageScale = stageWidth/1334;
            container.rotation = 0;
            container.x = 0;
            container.scaleX = stageScale;
            container.scaleY = stageScale;
        }

//        旧的自适应方式
//        if(stageWidth < stageHeight)
//        {
//            canvas.width = 750;
//            canvas.height = 1334;
//            stageScale = stageWidth/750;
//            container.rotation = 90;
//            container.x = 750;
//            canvas.style.top =stageHeight/2-1334*stageScale/2 + 'px';//居中一下
//            canvas.style.width = 750*stageScale + 'px';
//            canvas.style.height = 1334*stageScale + 'px';
//        }
//        else
//        {
//            canvas.width = 1334;
//            canvas.height = 750;
//            stageScale = stageWidth/1334;
//            container.rotation = 0;
//            container.x = 0;
//            canvas.style.width = 1334*stageScale + 'px';
//            canvas.style.height = 750*stageScale + 'px';
//        }
    }
    stage.update();
}
发布于
  用户评论
    生活编程