时间戳

首页 > 解决方案 > 变量范围冲突Js

javascript - 变量范围冲突Js

问题描述

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

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- 这不是完整的代码，我知道 usingJquery并不是很有用，因为我可以用它来代替它，addEventListener()但keypressevent 似乎有问题，所以我决定在完成代码并jquery从我的项目。

标签： javascriptpaperjs

解决方案

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

<!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获得了必要的信息，其中还讨论了这样做的一个小问题，该问题不适用于您的用例。

推荐阅读