Paperjs：画布高度和宽度在窗口调整大小时发生变化。如何防止改变？答案

【问题标题】：Paperjs : Canvas height and width gets changed on window resize. How to prevent the change?Paperjs：画布高度和宽度在窗口调整大小时发生变化。如何防止改变？
【发布时间】：2016-12-06 10:19:42
【问题描述】：

我有一个配置了 paperjs 的简单画布。在调整窗口画布高度和宽度的大小时会发生变化。提前谢谢大家。

HTML

<canvas id="myCanvas"  height="800" width="1000"></canvas>

var InIt = function () {
    var canvas = document.getElementById('myCanvas');
    console.log(canvas);
    paper.setup(canvas);
    var path = new paper.Path();
    path.strokeColor = 'black';
    var start = new paper.Point(100, 100);
    path.moveTo(start);
    path.lineTo(start.add([200, -50]));
    paper.view.draw();   
}

window.onload = InIt;

window.onresize=InIt;

截图

屏幕 1

屏幕 2

您可以在调整大小时看到高度和宽度的差异。

【问题讨论】：

是的！我认为您不是在发表声明，而是在问一个问题，但是您必须将这个问题拼出来让我们知道它是什么:) 如果您不希望它调整大小，请不要将 init 函数添加到调整事件大小。
@Blindman67 调整大小时高度和宽度的值不应改变。
然后通过不将Init函数附加到window.resize来调整页面大小时不要调整画布大小
@Blindman67 你是对的。但我需要在同一功能中进行其他一些操作的窗口调整大小选项。

标签： javascript html canvas paperjs

【解决方案1】：

不要在 init 函数中执行 paper.setup()。执行 paper.setup() 一次。类似于以下内容（我的 test.html 文件）：

<script src="./dist/paper-core.js"></script>

<canvas id="canvas" height="800" width="1000"></canvas>

<script>
var  canvas = document.getElementById("canvas");
paper.setup(canvas);
var init = function() {
    console.log(canvas);
    var path = new paper.Path();
    path.strokeColor = 'black';
    var start = new paper.Point(100,100);
    path.moveTo(start);
    path.lineTo(start.add([200, -50]));
    paper.view.draw();
}
window.onload = init;
window.onresize = init;
</script>

【讨论】：

它给出了一个错误 paper.js:2687 Uncaught TypeError: Cannot read property '_eventCounters' of undefined
我用的纸张是 0.9.25。你用的是什么版本？
我有 0.9.15 paperjs
这对我来说运行良好，使用 paper-core.js 版本 0.9.15 和 0.9.25。我在 Windows 7 64 位和 Ubuntu 14.04 64 位上运行 Chrome 版本 51.0.2704.106 m。也许有些东西被稍微错误地复制了？请注意，我确实更改了画布 ID。
如果document.getElementById() 中使用的画布 ID 不匹配，我会收到类似的错误。