麒麟子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;
        }
    }
}