如何（破解和）将 Google Docs 绘图窗口最大化到全屏？答案

【问题标题】：How to (hack and) maximize Google Doc's Drawing Window to full screen?如何（破解和）将 Google Docs 绘图窗口最大化到全屏？
【发布时间】：2019-07-08 10:14:36
【问题描述】：

互联网之友，

Google Docs 的 Intert Drawing 工具可以工作，除了它浪费了所有 16:9 屏幕的一半，因为它打开了一个 不可调整的方形窗口，破坏所有用于景观和/或肖像格式的图纸！想想所有标准格式，例如 A4、A3、16:9 显示器。

我一直在向超级用户询问这个问题，但无济于事。似乎没有人知道答案！我正在求助于熟练的程序员来破解我们的方法，并计划在此问题可用后立即开放价值 500 的赏金！这是 Google Docs 中被忽视的一个重要但被忽视的潜在部分。

在 Google 自己的浏览器 Chrome 中实现此功能的所有解决方案将是：

获得 500 赏金点
作为答案接受

【问题讨论】：

我没有解决方案，但这里有一个解决方法：在 standalone version of Google Drawings 中单独创建一个绘图（允许您在文件 > 页面设置中更改画布大小），然后将绘图插入使用“插入”>“绘图”>“来自驱动器”的 Google 文档。

标签： google-chrome drawing fullscreen google-docs landscape

【解决方案1】：

我认为最简单的方法是制作一个 Chrome 扩展插件来解决这个问题。我举了一个例子来说明你应该如何工作，当然，一个基本的但目的是好的。检查它on github（下载 zip，解压缩，转到 chrome 扩展并 =>“加载解压缩”，享受 :D）。对于更复杂的解决方案，您需要使用 google document api。

代码示例

document.addEventListener('DOMContentLoaded', function () {
    let fullScreenBtn = document.getElementById('fullScreenBtn');
    fullScreenBtn.onclick = function (element) {
        function modifyDOM() {
            function setToFullScreen(iteration, drawer) {
                drawer.style.left = '0';
                drawer.style.top = '0';
                drawer.style.borderRadius = '0';
                drawer.style.width = '100%';
                drawer.style.height = '100vh';

                document.getElementsByClassName('modal-dialog-content')[iteration].style.height = '100vh';

                var iframe = drawer.getElementsByTagName("IFRAME")[0]
                iframe.width = '100%';
                iframe.height = '100%';

                var canvas = iframe.contentWindow.document.getElementById('canvas-container');

                 canvas.style.borderLeft = 'solid 2px red';
                 canvas.style.borderRight = 'solid 2px red';

            }

            var drawers = document.getElementsByClassName('modal-dialog');
            let drawerCount = drawers.length;
            if (drawerCount) {
                for (let i = 0; i < drawerCount; i++) {
                    setToFullScreen(i, drawers[i]);
                }
            } else {
                alert('First off all open the drawer!')
            }
            return document.body.innerHTML;
        }

        chrome.tabs.query({ active: true }, function (tabs) {
            var tab = tabs[0];
            chrome.tabs.executeScript(tab.id, {
                code: '(' + modifyDOM + ')();'
            }, (results) => {
                // console.log(results[0]);
            });

        });
    };

如果你愿意，你也可以调整绘图画布的大小，但如果你这样做，它会产生一些错误（就像@Anthony Cregan 所说）...... 您可以更改本节中的代码

        var canvas = iframe.contentWindow.document.getElementById('canvas-container');

        canvas.style.left = '0';
        //canvas.style.position = ''; // works but in resizing elemnts bug 
        canvas.style.minWidth = '100%';

在行动

【讨论】：

感谢您创建插件！好的！唯一的问题是 canvas（棋盘格）没有扩展到全屏。也许这可以通过第三个按钮“全屏画布”在您的代码中实现。我愿意提供我的赏金。是否也可以扩展 CANVAS？还是不可能？
谢谢。没有什么是不可能的 :) ，但是需要一段时间来搜索负责调整画布大小的函数。使用 css 调整“棋盘”的大小很简单，但如果不调整画布大小，它并不能解决您的问题。在这个脚本中，答案是（但这对于人类来说几乎是不可能的）。转到docs.google.com/drawings 按CTRL+U（查看源代码），它从第75 行到第273 行开始。然后用unminify.com 取消缩小复制的js 代码。这是预渲染document.getElementById("prerendered")。我认为css不可能，你需要编辑抽屉js代码:(

【解决方案2】：

我通过在 chrome 中打开，按 F11（全屏）、F12（控制台）来实现这一点。然后我将元素选项卡中的 dom 导航到：

#canvas-container

然后手动设置元素样式

left: 41px
width: 1787px

编辑：不幸的是，后续编辑似乎会重置您手动输入的样式，可能有一种方法可以在后续绘制操作之后强制执行这些样式，但目前此解决方案仅适用于显示最终结果，而不是全屏绘制。

编辑编辑：您可以通过将它们添加到样式侧边栏中的元素来强制执行这些，并使用!important 维护它们，但这会导致绘图函数失去它们的坐标（钢笔工具沿 x 远离指针轴例如）。

【讨论】：

【解决方案3】：

轰隆隆！正如你所说，这是一个黑客。但这有效： F12->控制台->粘贴->回车

let modal = document.getElementsByClassName("sketchy-dialog")[0];
modal.style.width="100%";
modal.style.height="100%";
modal.style.left="0px";
modal.style.top="0px";
let content = document.getElementsByClassName("modal-dialog-content")[0];
content.style.height="100%";
let iframe;
let iframes = document.getElementsByTagName("iframe");
for(let x=0;x<iframes.length;x++)
{
    let elem = iframes[x];
    if(elem.src.startsWith("https://docs.google.com/drawings"))
    {
        iframe = elem;
    }
}
iframe.style.width="100%";
iframe.style.height="100%";

【讨论】：

我也能做到这一点，但如果你看到绘图画布根本没有展开。这对i.stack.imgur.com/3I39P.png 没有任何帮助
@TarunLalwani 好吧，我认为它至少有一点帮助。你可以在 OP 中看到它不会占用整个高度，因此默认绘图会尽可能大。
@TarunLalwani 谢谢，请像所有其他人一样将您的建议添加为“可能的答案”。因为这是一件很难做到完美的事情，所以你的笔记至少应该得到一个回答投票，一旦它在这里入伍，我会保证给予。

【解决方案4】：

我从控制台使用这个简单的“hack”。只需打开绘图模式>按F12>单击控制台>并粘贴以下js。

modal = document.getElementsByClassName('modal-dialog');
frame = modal[0].getElementsByTagName('iframe');

modal[0].style.width = window.innerWidth+"px";
modal[0].style.height = window.innerHeight+"px";
modal[0].style.top = 0;
modal[0].style.left = 0;
frame[0].width = window.innerWidth;
frame[0].height = window.innerHeight;

【讨论】：