Paper.js获胜'无法正确调整画布大小

Paper.js won't resize the canvas correctly

本文关键字：调整 布大小 获胜 js Paper      更新时间：2023-09-26

我尝试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>

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

我在Github上为此打开了一个问题，似乎这是0.9.22中引入的一个bug@斯卡尔卡兹向我提出了这个问题。

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

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

对于任何仍然遇到这个问题的人来说，以下是在我的TypeScript/Rect项目中对我有效的方法。我遇到了一些问题，Paper.js的调整大小逻辑似乎与我应用程序中其他地方的现有调整大小逻辑冲突/不同步（可能正在进行一些数据竞赛）。无论哪种方式，我都意识到可以手动更新画布的viewSize。

使用lodash debounce，一旦用户调整了窗口的大小，就可以用实际的画布大小重新校准Paper.js视图。对于我的例子，我选择只在用户完成500ms的大小调整后才这样做，这样在调整大小时不会引起性能问题，也可以确保所有样式都已经正确更新和重新渲染。下面是我看到的TypeScript/Rect示例，它现在似乎运行良好：

export default function ChalkboardCanvas() {
// get a direct reference to the canvas element
const canvasRef = useRef(null);
 /** 
  * Sometimes the Paper.js view gets out of sync when resizing
  * manually update it instead once the user is done resizing 
  */
  const onResize = useCallback(debounce(() => {
    if (canvasRef.current) {
      const { width, height } = canvasRef.current.getBoundingClientRect();
      paper.view.viewSize = new paper.Size(width, height);
    }
  }, 500, {
    leading: false,
    trailing: true,
  }), []);
  useEffect(() => {
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, [onResize]);
return (
     <canvas
        style={{
          width: '100%',
          height: '100%',
        }}
        ref={canvasRef}
        resize="true"
      />
  );
}

另一个选项是-如果您使用设置的比例（相对于主体）-覆盖纸张的视图：

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
相关文章：