More screen stretch modes plugin

じ☆ve冰风

Introduction
Add 2 new screen stetch modes. They can be toggled with F3.
Original(contain) strech: the game screen stretches to fit inside the window while keeping its aspect ratio.



Full stretch: the game screen stetches to fit both width and height.



Cover strech: the game screen stretches to cover the entire window, while keeping its aspect ratio. The contents outside the window will be clipped.



No stretch: turn off stretch mode.




Terms
You can use it in any project, credit is not required.

How to Use
Save the code as a js file and put it in plugins directory. There are no parameters for this plugin, just turn it on in the editor.

                JavaScript:       

1. //=============================================================================
2. // ScreenStretch.js
3. //=============================================================================
5. /*:
6. * @plugindesc Add new stetch modes.
7. * @author utunnels
8. *
9. * @help Add 2 new screen stetch modes. They can be toggled with F3.
10. Original(contain) strech: the game screen stretches to fit inside the window
11. while keeping its aspect ratio.
12. Full stretch: the game screen stetches to fit both width and height.
13. Cover strech: the game screen stretches to cover the entire window, while
14. keeping its aspect ratio. The contents outside the window will be clipped.
15. No stretch: turn off stretch mode.
16. */
17. Graphics._defaultStretchMode = function() {
18.     return (Utils.isNwjs() || Utils.isMobileDevice())?2:0;
19. };
21. Graphics._switchStretchMode = function() {
22.     this._stretchEnabled++;
23.     if(this._stretchEnabled>3) this._stretchEnabled = 0;
24.     this._updateAllElements();
25. };
27. Graphics._updateRealScale = function() {
28.     if (this._stretchEnabled) {
29.         const h = this._stretchWidth() / this._width;
30.         const v = this._stretchHeight() / this._height;
31.         this._realScale = (this._stretchEnabled==3?Math.max:Math.min)(h, v);
32.         this._realScaleX = h;
33.         this._realScaleY = v;
34.         window.scrollTo(0, 0);
35.     } else {
36.         this._realScale = this._scale;
37.         this._realScaleX = this._scale;
38.         this._realScaleY = this._scale;
39.     }
40. };
42. Graphics._stretchWidth = Graphics._stretchWidth||function() {
43.     if (Utils.isMobileDevice()) {
44.         return document.documentElement.clientWidth;
45.     } else {
46.         return window.innerWidth;
47.     }
48. };
50. Graphics._stretchHeight = Graphics._stretchHeight||function() {
51.     if (Utils.isMobileDevice()) {
52.         return document.documentElement.clientHeight;
53.     } else {
54.         return window.innerHeight;
55.     }
56. };
58. Graphics._centerElement = function(element) {
59.     var width = element.width * (this._stretchEnabled!=2?this._realScale:this._realScaleX);
60.     var height = element.height * (this._stretchEnabled!=2?this._realScale:this._realScaleY);
61.     element.style.position = 'absolute';
62.     element.style.margin = 0;
63.     element.style.left = (window.innerWidth-width)/2 + 'px';
64.     element.style.top = (window.innerHeight-height)/2 + 'px';
65.     element.style.width = width + 'px';
66.     element.style.height = height + 'px';
67.     document.body.style.overflow = 'hidden';
68. };
70. Graphics.pageToCanvasX = function(x) {
71.     if (this._canvas) {
72.         var left = this._canvas.offsetLeft;
73.         var scalex = this._canvas.clientWidth/this._canvas.width;
74.         return Math.round((x - left) / scalex);
75.     } else {
76.         return 0;
77.     }
78. };
80. Graphics.pageToCanvasY = function(y) {
81.     if (this._canvas) {
82.         var top = this._canvas.offsetTop;
83.         var scaley = this._canvas.clientHeight/this._canvas.height;
84.         return Math.round((y - top) / scaley);
85.     } else {
86.         return 0;
87.     }
88. };

复制代码

本贴来自国际rpgmaker官方论坛作者:utunnels处,因国际论坛即将永久关站,为了存档多年珍贵资料,署名转载到本论坛存档,由于官方帖子为英文原帖，需要中文翻译请点击论坛顶部切换语言为中文就可以将帖子翻译成中文浏览,方便大家随时查看,原文地址：https://forums.rpgmakerweb.com/threads/more-screen-stretch-modes-plugin.170575/