打开开发人员工具时纸画布尺寸发生变化答案

【问题标题】：Paper canvas size changes on opening of developer tools打开开发人员工具时纸画布尺寸发生变化
【发布时间】：2020-03-27 04:58:34
【问题描述】：

我的问题如下（使用 Paper.js）。

我尝试在画布上显示网格，但显示方式不正确。我的画布大小设置为 1600 X 800 像素，在页面加载时，它实际上是大小。另外，我有一个用于绘制网格线的循环，并且我确保该循环确实从 0 到 800px 和从 0 到 1600px 迭代：

var gridInfo = {size : 10, opacity : 0.7, strokeWidth :0.3, color : 'black'};
function(canvasHeight, canvasWidth, gridInfo){
    console.log("Creating Grid");
    for (var i = 0; i <= canvasWidth; i+= gridInfo.size){
        var from = new paper.Point(i, 0);
        var to = new paper.Point(i,canvasHeight);
        var gridPath = new paper.Path.Line(from,to);
        gridPath.strokeColor = gridInfo.color;
        gridPath.opacity = gridInfo.opacity;
        gridPath.strokeWidth = gridInfo.strokeWidth;
    }
    for (var i = 0; i <= canvasHeight; i+= gridInfo.size){
        var from = new paper.Point(0,i);
        var to = new paper.Point(canvasWidth,i);
        var gridPath = new paper.Path.Line(from,to);
        gridPath.strokeColor = gridInfo.color;
        gridPath.opacity = gridInfo.opacity;
        gridPath.strokeWidth = gridInfo.strokeWidth;
        floorPlanGrid.push(gridPath);
    }
}

我已将paper 变量初始化为新的PaperScope。这是（说明问题（加载页面后）的结果：

因此您可以在底部和右侧边缘看到网格并没有一直到边缘。画布的尺寸实际上是 1600 像素 x 800 像素，我确认网格的循环确实从 0 到 800 像素以及从 0 到 1600 像素迭代，正如我所说。最后，当我按 F12 获取开发工具（在 Chrome 上）时，问题就消失了。然后网格就是我想要的方式（整个画布）并保持这种状态，直到我刷新页面。这是之后的结果：现在网格一直到边缘，对我来说并不完美但令人满意。当然，我想要的是在页面加载时获得第二个结果，而无需打开开发工具。我曾尝试使用 view.draw() 函数，但它没有做任何事情。也许它与画布的 resize 属性有关，它是在 devTools 打开时触发的，但不是在绘制网格之后，但我不知道。

感谢您的帮助。我不确定我是否提供了所有信息来帮助您，如果您还需要更多信息，请告诉我！

【问题讨论】：

标签： javascript jquery html5-canvas paperjs

【解决方案1】：

如果它可以帮助任何人，我终于设法弄清楚了。这一切都与paper.view.Size 与画布大小不同（出于我忽略的原因）。所以我所做的是在绘制网格线之前使用paper.view.setViewSize(theWidth, theHeight) 函数将视图强制为与画布相同的大小。

【讨论】：