Question

我正在尝试Paper.js以获得乐趣，但似乎我已经陷入了困境。

将resize="true"添加到canvas标记应该使元素与浏览器窗口一样高和宽。但是，这样做会导致一些相当奇怪的行为。

我希望画布在加载页面后立即调整到视口，但它没有这样做，这就是为什么我最初认为它根本没有调整大小。然而，实际发生的事情更加奇怪：画布的默认大小为300x150，当我调整视口大小时，它会慢慢增长 - 但是无限期地。

为了记录，我尝试使用data-paper-resize="true"或仅使用resize，或使用Chrome而不是Firefox - 都无济于事。

如果这个问题是由我的一些令人费解的奇怪设置引起的，我不期待一个答案。但是，我想知道这个问题是否常见（或者甚至已知存在）并且已知原因和解决方案。

这是我正在使用的代码：

<!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>

Answer 1

将以下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>

Answer 2

我在Github上为此打开了一个问题，似乎这是0.9.22中引入的错误。 @Skalkaz向我提出了这个问题。

以下是未决问题：https://github.com/paperjs/paper.js/issues/662。

您还可以在等待修补程序时降级到0.9.21。

Answer 3

另一种选择是 - 如果您使用设定比例（相对于身体） - 覆盖纸张的视图：

while($query2=mysql_fetch_array($query1))

Paper.js不会正确调整画布大小

3 个答案: