javascript Paper.js 不会正确调整画布大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28896260/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Paper.js won't resize the canvas correctly
提问by vvye
I'm trying out Paper.jsfor fun, but it seems I'm already stuck at the very start.
我正在尝试Paper.js 是为了好玩，但似乎我一开始就陷入困境。
Adding resize="true"to the canvastag is supposed to make the element as high and wide as the browser window. However, doing that results in some rather strange behavior.
添加resize="true"到canvas标签应该使元素与浏览器窗口一样高和宽。然而，这样做会导致一些相当奇怪的行为。
I expected the canvas to adjust itself to the viewport right after loading the page, but it didn't do so, which is why I initially thought it didn't resize at all. What actually happens, though, is even more bizarre: The canvas starts out at its default size of 300x150, and when I resize the viewport, it grows - slowly, but indefinitely.
我希望画布在加载页面后立即调整到视口，但它没有这样做，这就是为什么我最初认为它根本没有调整大小。然而，实际发生的事情更奇怪：画布从默认大小 300x150 开始，当我调整视口大小时，它会增长 - 缓慢但无限期。
For the record, I've tried using data-paper-resize="true"or just resizeinstead, or using Chrome instead of Firefox - all to no avail.
为了记录，我已经尝试使用data-paper-resize="true"或resize代替，或者使用 Chrome 而不是 Firefox - 都无济于事。
I'm not expecting an answer if this problem is caused by some inexplicably weird setup on my end. I am wondering, however, if the problem is common (or even known to exist at all) and has known causes and solutions.
如果这个问题是由我的某些莫名其妙的奇怪设置引起的，我不希望得到答案。然而，我想知道这个问题是否很常见（或者甚至已知存在）并且是否有已知的原因和解决方案。
Here's the code I'm using:
这是我正在使用的代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="paper-full.min.js"></script>
<script type="text/paperscript" canvas="myCanvas">
var path = new Path();
path.strokeColor = 'black';
path.moveTo(new Point(120, 120));
path.lineTo(new Point(500, 500));
</script>
</head>
<body>
<canvas id="myCanvas" style="border: 1px dotted red;" resize="true"></canvas>
</body>
</html>
采纳答案by user3337813
Add the following CSS to your project:
将以下 CSS 添加到您的项目中：
<style type="text/css">
html,
body {
margin: 0;
overflow: hidden;
height: 100%;
}
/* Scale canvas with resize attribute to full size */
canvas[resize] {
width: 100%;
height: 100%;
}
</style>
回答by ngryman
I opened an issue for this on Github and it seems that this is a bug introduced in 0.9.22. @Skalkaz pointed me this question.
我在 Github 上为此打开了一个问题，似乎这是 0.9.22 中引入的错误。@Skalkaz 向我指出了这个问题。
Here is the pending issue: https://github.com/paperjs/paper.js/issues/662.
这是悬而未决的问题：https: //github.com/paperjs/paper.js/issues/662。
You can also downgrade to 0.9.21 while waiting for a patch.
您还可以在等待补丁的同时降级到 0.9.21。
回答by SumNeuron
Another option is - if you are using set proportions (relative to the body) - to override paper's view:
另一种选择是 - 如果您使用固定比例（相对于身体） - 覆盖纸张的视图：
var pageWidth = document.getElementsByTagName("BODY")[0].clientWidth
var pageHeight = document.getElementsByTagName("BODY")[0].clientHeight
view.size.width = pageWidth * myWidthScale
view.size.height = pageHeight * myHeightScale
center = new Point(width / 2, pageHeight / 2)
view.center = center
