|
|
@@ -1,6 +1,6 @@
|
|
|
// 屏幕适配 mixin 函数
|
|
|
|
|
|
-// * 默认缩放值
|
|
|
+/*// * 默认缩放值
|
|
|
const scale = {
|
|
|
width: '1',
|
|
|
height: '1',
|
|
|
@@ -11,7 +11,7 @@ const baseWidth = 1920
|
|
|
const baseHeight = 1080
|
|
|
|
|
|
// * 需保持的比例(默认1.77778)
|
|
|
-const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
|
|
|
+const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))*/
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
@@ -33,7 +33,7 @@ export default {
|
|
|
window.removeEventListener('resize', this.resize)
|
|
|
},
|
|
|
methods: {
|
|
|
- calcRate () {
|
|
|
+ /*calcRate () {
|
|
|
const appRef = this.$refs["appRef"]
|
|
|
if (!appRef) return
|
|
|
// 当前宽高比
|
|
|
@@ -51,6 +51,22 @@ export default {
|
|
|
appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
|
|
|
}
|
|
|
}
|
|
|
+ },*/
|
|
|
+ calcRate () {
|
|
|
+ const appRef = this.$refs["appRef"]
|
|
|
+ if (!appRef) return
|
|
|
+ const newWidth = window.innerWidth;
|
|
|
+ const newHeight = window.innerHeight;
|
|
|
+
|
|
|
+ if (appRef) {
|
|
|
+ let newScaleX = newWidth / 1920;
|
|
|
+ let newScaleY = newHeight / 1080;
|
|
|
+
|
|
|
+ let newTranslateX = ((1920 - newWidth) / 2 / newWidth * 100).toFixed(5) + '%';
|
|
|
+ let newTranslateY = ((1080 - newHeight) / 2 / newHeight * 100).toFixed(5) + '%';
|
|
|
+ appRef.style.transform = `scale(${newScaleX.toFixed(5)}, ${newScaleY.toFixed(5)}) translate(-${newTranslateX}, -${newTranslateY})`
|
|
|
+ console.log(`scale(${newScaleX.toFixed(5)}, ${newScaleY.toFixed(5)}) translate(-${newTranslateX}, -${newTranslateY})`)
|
|
|
+ }
|
|
|
},
|
|
|
resize () {
|
|
|
clearTimeout(this.drawTiming);
|