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

Question

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

vvy*_*vye 30 javascript paperjs

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

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

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

为了记录,我尝试过使用data-paper-resize="true"或者只resize使用Chrome或者使用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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 30

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

ngr*_*man 9

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

这是待定的问题:https://github.com/paperjs/paper.js/issues/662.

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

归档时间：	10 年，7 月前
查看次数：	12094 次
最近记录：	8 年，6 月前