Javascript 可变范围冲突Js_Javascript_Paperjs

Javascript 可变范围冲突Js

javascript

Javascript 可变范围冲突Js,javascript,paperjs,Javascript,Paperjs,我正在尝试使用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 han

我正在尝试使用

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-我知道我的代码中包含大量重复的文件。
和文件js
文件有两个约定来避免这种情况，但我只是想在提高代码质量之前，先记住最重要的事情
4-这不是完整的代码，我知道使用Jquery
并不是很有用，因为我可以用addEventListener（）代替它的使用
但是keypress
事件似乎有问题，所以我决定在完成代码后再回到它，并从我的项目中删除jquery
。
问题是，一旦创建了路径，它就不再是一个“圆”。这只是一条路。您需要以稍微复杂一点的方式与它交互以更改半径
<!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>


window.onload=函数（）{
$（'body'）。在（'keypress'，函数（事件）上{
纸张设置（“myCanvas”）；
var path=新纸张路径圆({
中心：[400200]，
半径：10，
填充颜色：“#1abc9c”
});
paper.view.onFrame=函数（事件）{
var currentRadius=path.bounds.width/2，
新半径=当前半径-1；
path.fillColor.hue+=1；
路径比例（新半径/当前半径）；
}
paper.view.draw（）；
});
}

我从中获得了必要的信息，其中还讨论了以这种方式进行操作时的一个小问题，该问题不适用于所介绍的用例。
对于增量和减量操作，“正常工作”和“不工作”是什么意思？一个在控制台中导致错误，另一个没有？旁注：我不担心在您还在弄清楚纸张是如何工作的时候使用或不使用jQuery。对你来说最简单的。说谎，半径开始未定义
，递减后变为NaN
。但是console.log
s都为我打印了合理的输出，我得到了一个颜色变化的圆圈。动画可以工作，但半径不变。我的完整版本包含paper.setup（'myCanvas'），我认为我不需要paper.install（窗口），因为我已经使用完整的语法paper.view（）和paper.Path（）从paperjs库调用了方法，而不仅仅是view（）和Path（）。是的，我确实不理解您遇到的问题。但现在我做到了，我更新了我认为是一个解决方案：D让我知道它是否适合你！它起作用了。非常感谢您的信息源说明！