变量作用域冲突 Js

Question

我正在尝试使用 paperjs 制作一个简单的动画 Web 应用程序，我一直在阅读它的文档，但我无法真正理解这段代码的工作原理。

如果你能给我提供要搜索的标题，或者我缺少的 js 部分到底是什么。

// To make sure the script isn't executed unless DOM is ready
window.onload = function(){
    // Whenever the user clicks on a keyboard button, this event handler is executed
    $('body').on('keypress', function(event) {

        var path = new paper.Path.Circle({
            center: [400, 200],
            radius: 10,                     
            fillColor: '#1abc9c'
        });

        console.log(path.fillColor);       // prints undefined
        console.log(path.fillColor.hue);   // prints undefined

        paper.view.onFrame = function(event) {
            // On each frame, increment:
            path.fillColor.hue += 1;       // works fine !!
            path.radius -= 1;              // doesn't work !!
        }
        // starts drawing
        paper.view.draw();
    }
}

第一个问题：为什么 path.fillColor.hue 在第一行 console.log() 中未定义，但 paper.view.onframe() 中的第一行工作正常？

第二个问题：根据与 path.fillColor.hue 相同的概念，我正在尝试制作另一个缩小我的圆半径的动画，所以我在我的动画函数中递减 path.radius，然而，这确实无法工作 - 虽然没有出现错误。

备注： 1- hue 是一个属性，它改变了我的圆圈的颜色，我从文档中得到它。

2- 我试图将 paper.view.draw() 放入我的 paper.view.onframe() 函数中作为解决方案，就好像每次调用 paper.view.onframe() 时它都会绘制一个具有新半径的新圆但是这不起作用。

3- 我知道我的代码包含很多重复的 paper. 和 paperjs 文档目的 2 约定来避免这种情况，但我只是想首先关注最重要的事情在提高我的代码质量之前。

4- 这不是完整的代码，我知道使用 Jquery 并不是很有用，因为我可以用 addEventListener() 替换它的使用，但是 keypress 事件似乎遇到问题，所以我决定在完成代码并从我的项目中删除 jquery 后回到它。

Answer 1

问题是路径一旦创建就不再是 "circle"。这只是一条路。您需要以稍微复杂的方式与它交互以更改半径。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <canvas id="myCanvas" resize="true" width="800" height="800"></canvas>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="paper-full.min.js"></script>
        <script>
            window.onload = function(){
                $('body').on('keypress', function(event) {
                    paper.setup('myCanvas');

                    var path = new paper.Path.Circle({
                        center: [400, 200],
                        radius: 10,
                        fillColor: '#1abc9c'
                    });

                    paper.view.onFrame = function(event) {
                        var currentRadius = path.bounds.width / 2,
                            newRadius = currentRadius - 1;
                        path.fillColor.hue += 1;
                        path.scale(newRadius / currentRadius);
                    }

                    paper.view.draw();
                });
            }
        </script>
    </body>
</html>

我从 https://groups.google.com/forum/#!topic/paperjs/xJTDWTQIFwQ 那里获得了必要的信息，其中还讨论了以这种方式执行此操作的一个小问题，该问题不适用于您提供的用例。

变量作用域冲突 Js

variable scope conflict Js

javascript

paperjs