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相同的概念，我试图制作另一个缩小我的圆半径的动画，所以我在动画功能中递减hue，但是，这并没有工作-尽管不会出现错误。

注意： 1- paper.view.draw()是一种属性，它可以改变圆圈的颜色，这是我从文档中获得的。

2-我尝试将paper.view.onframe()放入我的paper.view.onframe()函数中作为一种解决方案，好像每次调用paper.时它将绘制一个具有新半径的新圆，但这并没有不行。

3-我知道我的代码包含很多重复的paperjs和Jquery文档，目的是为了避免这种情况的2种约定，但是我只是想先着眼于最重要的事情，然后再进行改进我的代码质量。

4-这不是完整的代码，我知道使用addEventListener()并不是真正有用，因为我可以将其使用替换为keypress，但是jquery事件似乎有一个问题，所以我决定在完成代码后重新使用它，并从项目中删除var clonedArray = this.state.heartarr.slice(); clonedArray[key] = clonedArray[key] === "black" ? "#e50914" : "black"; this.setState({ heartarr: clonedArray })。

Answer 1

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

<!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获得了必要的信息，该信息还讨论了以这种方式进行操作的一个小问题，不适用于您提出的用例。

可变范围冲突

1 个答案: