Commit 7feb0d51 authored by yu's avatar yu

1

parent 7cd473b3
This diff is collapsed.
class CalculativeResize {
static resizeInfo() {
//0.设计尺寸
let baseSize = cc.size(1280, 720);
//1.获取屏幕尺寸
let canvasSize = cc.view.getCanvasSize();
//2.将屏幕宽高 以高度对齐的方式 换算出场景 宽度
let sumSizeW = cc.size(canvasSize.width * baseSize.height / canvasSize.height, baseSize.height)
//3.计算场景宽度与设计宽度比率
let scaleX = sumSizeW.width / baseSize.width;
//高屏幕适配
if (scaleX <= 1) {
let sumSizeY = cc.size(baseSize.width, canvasSize.height * (baseSize.width / canvasSize.width))
let scaleY = sumSizeY.height / baseSize.height;
let posY = sumSizeY.height - baseSize.height;
return {
scaleX: 1,
posX: 0,
moveX: 0,
scaleY: scaleY,
posY: posY,
moveY: - posY / 2
}
} else {
let posX = sumSizeW.width - baseSize.width;
//需要拓展的宽度缩放比
return {
scaleX: scaleX,
posX: posX,
moveX: - posX / 2,
scaleY: 1,
posY: 0,
moveY: 0
};
}
}
}
//关于齐刘海的适配方案。
//1.需要获取对应的手机型号
//2.需要写上安全间距标记(主要是中间部分)
//3.不同的手机安全间距可能不同。(主要适配iPhone X)
cc.Class({
extends: cc.Component,
properties: {
r_width: 1,
r_height: 1,
r_top: 0,
r_bottom: 0,
p_left: 0,
p_right: 0,
p_top: 0,
p_bottom: 0,
black: 0,//用于不能直接缩放的图片(如引导),两边补齐黑边
noHead: 0,
debug: 0,
},
// LIFE-CYCLE CALLBACKS:
onLoad() {
let { scaleX, posX, scaleY, posY } = CalculativeResize.resizeInfo();
this.resizeScaleX = scaleX;
this.resizeScaleY = scaleY;
this.posX = posX;
this.posY = posY;
let { width, height, x, y } = this.node;
this.nodeWidth = width;
this.nodeHeight = height;
this.nodeX = x;
this.nodeY = y;
//增加一个resize的监听,当屏幕出现宽高比变化的时候,进行一次重新适配。
//主要用于刘海屏的重置,以及动态屏幕变化的控制(虚拟按键屏)。
},
start() {
this.resize();
},
update(dt) {
},
onDestroy() {
if (this.black1)
pg.view.removChildren(this.black1);
if (this.black2)
pg.view.removChildren(this.black2);
this.black1 = null;
this.black2 = null;
},
resize() {
if (!this.resizeScaleX && !this.nodeWidth) {
console.warn("手动调用此方法时,不能再onLoad中使用");
return;
}
this.resizeHeight();
this.resizeWidth();
},
//高屏幕适配
resizeHeight() {
if (this.resizeScaleY <= 1.05) return;
let scaleY = this.resizeScaleY;
let posY = this.posY;
let nodeWidth = this.nodeWidth;
let nodeHeight = this.nodeHeight;
let nodeX = this.nodeX;
let nodeY = this.nodeY;
if (this.debug == 1) {
console.log("断点调试点");
}
//宽度拉伸
if (this.r_width == 1) {
this.node.width = nodeWidth * scaleY;
}
//高度拉升
if (this.r_height == 1) {
this.node.height = nodeHeight * scaleY;
// //高度拉伸后,图片顶部齐边【坐标下移】 y坐标下移
// if (this.r_top == 1) {
// this.node.y = nodeY - nodeHeight * (scaleY - 1) / 2;
// }
// //高度拉伸后,图片底部齐边【坐标上移】 y坐标上移
// if (this.r_bottom == 1) {
// this.node.y = nodeY + nodeHeight * (scaleY - 1) / 2;
// }
}
// //如果是刘海屏,减去对应的刘海屏的宽度
// let lhpSize = { top: 0, bottom: 0 };
// //动态左移
// if (this.p_left == 1) {
// this.node.x = nodeX - posX / 2 + lhpSize.top;
// }
// //动态右移
// if (this.p_right == 1) {
// this.node.x = nodeX + posX / 2 - lhpSize.bottom;
// }
//动态上移
if (this.p_top == 1) {
this.node.y = nodeY + posY / 2
}
//动态下移
if (this.p_bottom == 1) {
this.node.y = nodeY - posY / 2
}
},
//长屏幕适配
resizeWidth() {
if (this.resizeScaleX <= 1.05) return;
let resizeScaleX = this.resizeScaleX;
let posX = this.posX;
let nodeWidth = this.nodeWidth;
let nodeHeight = this.nodeHeight;
let nodeX = this.nodeX;
let nodeY = this.nodeY;
if (this.debug == 1) {
console.log("断点调试点");
}
//宽度拉伸
if (this.r_width == 1) {
this.node.width = nodeWidth * resizeScaleX;
}
//高度拉升
if (this.r_height == 1) {
this.node.height = nodeHeight * resizeScaleX;
//高度拉伸后,图片顶部齐边【坐标下移】 y坐标下移
if (this.r_top == 1) {
this.node.y = nodeY - nodeHeight * (resizeScaleX - 1) / 2;
}
//高度拉伸后,图片底部齐边【坐标上移】 y坐标上移
if (this.r_bottom == 1) {
this.node.y = nodeY + nodeHeight * (resizeScaleX - 1) / 2;
}
}
if (this.black == 1) {
let baseSize = cc.size(1280, 720);
this.black1 = this.createBalck();
this.black2 = this.createBalck();
let curWidth = nodeWidth * resizeScaleX;
let curHeight = nodeHeight * resizeScaleX;
let blackWidth = (curWidth - baseSize.width) / 2;
let blackHeight = curHeight;
this.black1.width = blackWidth;
this.black1.height = blackHeight;
this.black2.width = blackWidth;
this.black2.height = blackHeight;
this.black1.x = - baseSize.width / 2 - this.black1.width / 2;
this.black2.x = baseSize.width / 2 + this.black1.width / 2;
this.black1.y = this.black2.y = nodeY;
pg.view.addChild(this.node, this.black1);
pg.view.addChild(this.node, this.black2);
this.black1.active = false;
this.black2.active = false;
if (this.node.nodeData && (this.node.nodeData.bg != "" && this.node.nodeData.bg != "rect")) {
this.black1.active = true;
this.black2.active = true;
}
}
//如果是刘海屏,减去对应的刘海屏的宽度
let lhpSize = { top: 0, bottom: 0 };
if (!this.noHead && posX != 0) lhpSize = { top: 44 * 1.5, bottom: 34 * 1.5 };
//动态左移
if (this.p_left == 1) {
this.node.x = nodeX - posX / 2 + lhpSize.top;
}
//动态右移
if (this.p_right == 1) {
this.node.x = nodeX + posX / 2 - lhpSize.bottom;
}
},
//屏幕适配--end
createBalck() {
let black = cc.instantiate(cc.find('Canvas/blackBg'));
return black;
},
setBlackActive(val) {
if (this.black1)
this.black1.active = val;
if (this.black2)
this.black2.active = val;
}
});
{
"ver": "1.0.8",
"uuid": "ddd8caab-ee2c-4783-9e7f-0123e745e392",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment