面向canvas,更加简单的自适应方式

  • 内容
  • 评论
  • 相关

关于自适应我之前已经写了2篇文章了:

关于自适应的那点事

再讲讲自适应-移动端自适应

不过今天讲的还是自适应,并且今天的自适应会更加的简单好用。

我们先看下下面这个demo:

http://www.ajexoop.com/demo/resizeDemo4/index1.html

看到有什么不一样的地方了吗(提示:拉动边框)?经常看我demo的同学知道,之前的自适应拉动边框,canvas内部的像素会产生变化。但是这次的demo虽然canvas也会随着边框的变化而变化,但是内部像素不会变化。这就是之前有同学问的,怎么扩大canvas,而不扩大里面的像素。那这个是怎么做到的呢?其实很简单,之前拉动边框我们会改变canvas STYLE中的width和height,而这次我们是直接改变canvas属性中的width和height,代码如下:

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(leftBtn)
        {
            leftBtn.x = stageWidth - 100;
        }
    }
    stage.update();
}

我们可以看到里面的像素不会变大,而且红色块一直跟着右边框。

根据这个特性,我们可以制作出新的自适应方法,看demo:

http://www.ajexoop.com/demo/resizeDemo4/index2.html

然后是代码:

var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
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;

        //内部元素自适应
        stageScale = stageWidth/750;//宽度自适应;
//    stageScale = stageHeight/1206;//高度自适应两者选一
        container.scaleX = stageScale;
        container.scaleY = stageScale;
//    container.x = (stageWidth -  750*container.scaleX)/2;//高度自适应时解开这个注释 保证图片居中
        if(leftBtn)
        {
            leftBtn.x = stageWidth - 100;
        }
    }
    stage.update();
}

从demo和代码中看出,我们的自适应分成了外部元素的自适应和内部元素的自适应。这个自适应的原理是直接修改meta标签的viewport来修改全局的缩放大小,以作出移动端2-3倍像素的效果。由于外部的缩放不再影响内部的缩放,我们可以自由的操作createjs的内部元素来达到自适应。这样的自适应感觉和写AS3很像了。注意:上面代码的750和1206是素材的大小不是屏幕的大小,也就是你自适应的素材有多大就写多大

和以前的自适应相比,这个自适应的好处是,制作ui这种不需要随着舞台大小变化的元素时,不需要先扩大后缩小这种麻烦的算法了(因为以前的自适应会修改内部的像素)

以前的自适应代码:

function stageBreakHandler(event)
{
    if(stageWidth!=document.documentElement.clientWidth||stageHeight!= document.documentElement.clientHeight)
    {
        stageWidth =  document.documentElement.clientWidth;
        stageHeight = document.documentElement.clientHeight;
        stageScale = stageWidth/750;

        canvas.style.width = 750*stageScale + 'px';
        canvas.style.height = 1206*stageScale + 'px';
    }
    stage.update();
}

不过由于修改meta标签是全局修改大小的,所以如果和别的前端合作时,要和他说明,让他也使用这种自适应方式。

评论

3条评论
  1. Gravatar 头像

    匿名 回复

    可以发一下比较圈的代码吗

  2. Gravatar 头像

    匿名 回复

    真牛逼啊哥

发表评论

电子邮件地址不会被公开。