确定网页上的滚动距离，以便 Paper.js 同步滚动视图

Question

我在网页上放置了绝对定位 canvas。 canvas 有一些使用 Paper.js 创建的项目。我希望 canvas（或视图）与网页的滚动同步移动。

canvas 覆盖整个屏幕 (1920 x 1080) 而不是网页（1920 x 可变长度）。所以，仅仅移动 canvas 的固定位置是行不通的。它不再覆盖整个屏幕。

后来，我在 Paper.js 中找到了有关视图的信息，我可以使用以下行来滚动视图：

project.view.scrollBy(new Point(0, 450));

问题是我无法计算出我需要为 450 设置的值，以便滚动始终同步。

我确实使用以下 JavaScript 在按下向上和向下键时为网页上的滚动动作设置动画：

$("section.scrollable").animate({scrollTop : $("section.scrollable").scrollTop() + 300 })

但是，将 300 放入 scrollBy 值中也不会使 canvas 和网页正确同步。

This pen is a very minimal example to show my problem. You might prefer to see it in debug mode.

您可以在 canvas 上拖动以创建橙色线条。

在叠加层上绘制了三个标题和三个对应的线 canvas。 canvas 宽 1920px，高 1080px。

第三个标题低于 1080 像素，因此它的线在 canvas 上不可见。但是，当我使用以下行在 Paper 视图中滚动时，它变得可见：

project.view.scrollBy(new Point(0, 600));

这是我遇到的以下限制问题：

canvas 位置必须保持固定。因此，它不会与文档的其余部分一起滚动。
但是，Paper.js 的视图必须与文档同步移动，这样线条、路径和其他项目就不会改变它们相对于网页的相对位置。例如，这些行仍然保留在相同的标题下。

Answer 1

您需要监听滚动事件，每次发生时，更新您的 paper.js 场景 y 位置。
我发现使用活动层比使用视图更方便，但理论上您可以对视图执行相同的操作。
这是一个简单的 fiddle，应该能让您步入正轨。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Debug Paper.js</title>
    <script src="https://unpkg.com/acorn"></script>
    <script src="https://unpkg.com/paper"></script>
    <style>
        html,
        body {
            margin : 0;
            height : 100%;
        }

        canvas {
            position : fixed;
            top      : 0;
            left     : 0;
            width    : 100vw;
            height   : 100vh;
        }

        section {
            max-width : 500px;
            margin    : auto;
        }
    </style>
</head>
<body>

<section>
    <div>
        <h1>title 1</h1>
        <p>...</p>
    </div>
    <div>
        <h1>title 2</h1>
        <p>...</p>
    </div>
</section>

<canvas id="canvas" resize></canvas>

<script>
    paper.setup('canvas');

    new paper.Path.Circle({
        center: paper.view.center,
        radius: 50,
        fillColor: 'orange'
    });

    const originalY = paper.view.center.y;

    const update = () => {
        const yOffset = document.scrollingElement.scrollTop;
        paper.view.center.y = originalY - yOffset;
    };

    window.addEventListener('scroll', update);
</script>
</body>
</html>

确定网页上的滚动距离，以便 Paper.js 同步滚动视图

Determine scrolled distance on the webpage for Paper.js synchronized scrolling of the view

javascript

html

css

paperjs