麒麟子Cocos Creator实用技巧十一：让元素保持绝对大小

 

本文介绍了一个组件，能够让你节点，在任意分辨率下都保持同样的大小。因为它消除了设计分辨率的缩放。

---

麒麟子，有没有办法让一个元素总是维持相应的大小，不管缩口缩放了多少。

今天一个朋友在QQ上问到了这个问题，像这样的问题其实是非常简单的，只需要计算出当前的Canvas缩放了多少就行了。

经过一翻研究后，发现Cocos Creator提供了一两个函数。

cc.view.getScaleX();

cc.view.getScaleY();

这个就是画布的缩放值，我们想要维持一个元素在任意分辨率下的大小，只需要让元素的scaleX/scaleY分别除以这两个值就行了。

组件代码不多，直接贴出来，免得下载了。新建一个KeepVisualSize.ts组件，贴进去就行。 再将这个挂到任何一个你想保持大小的元素身上。

const { ccclass, property } = cc._decorator;

@ccclass
export default class KeepRealSize extends cc.Component {
    // LIFE-CYCLE CALLBACKS:
    private _lastScaleX = 0;
    private _lastScaleY = 0;
    private _orginalScaleX = 0;
    private _orginalScaleY = 0;


    onLoad () {
        //保存旧值，因为编辑器编辑的时候，本节点的缩放值不一定是1
        this._orginalScaleX = this.node.scaleX;
        this._orginalScaleY = this.node.scaleY;
        this.adjustSize();
    }


    adjustSize(){
        this.node.scaleX = this._orginalScaleX / cc.view.getScaleX();
        this.node.scaleY = this._orginalScaleY / cc.view.getScaleY();
    }

    start() {}

    update (dt) {
        let sx = cc.view.getScaleX();
        let sy = cc.view.getScaleY();
        if(this._lastScaleX != sx || this._lastScaleY != sy){
            this.adjustSize();
            this._lastScaleX = sx;
            this._lastScaleY = sy;
        }
    }
}